自定view--小清新載入進度動畫特效
阿新 • • 發佈：2018-12-16
實現上面的效果涉及到左右兩個小圓點、中間小圓點、線條的繪製，同時涉及到屬性動畫及二階貝塞爾曲線的使用。
A點和B點的兩個小圓點比較好繪製，確定相應的座標後，呼叫canvas.drawCircle()方法進行繪製;
A點的X就是:getWidth(自定義控制元件的寬度)/2-mLineWidth(A點到B點的長度，即線條的長度)/2;
C點的X就是:getWidth(自定義控制元件的寬度)/2+mLineWidth(A點到B點的長度，即線條的長度)/2;
A點和C點的Y是一樣的都是：getHeight()/2接下來就是繪製線條和中間的小球，將小球的狀態定義為3種：下墜，上升及自由落體，在小球下墜、上升或者自由落體時，呼叫mPath.moveTo()和mPath.quadTo()進行左右貝塞爾曲線的繪製，A點和C點的座標在繪製左右兩個小點的時候就已經得到了，
B點的X座標是：getWidth(自定義控制元件的寬度)/2+mLineWidth(A點到B點的長度，即線條的長度)/2;
Y的座標在上升或者下墜過程中就有區別：下墜Y座標:getHeight() / 2 + mDownDistance(下墜的距離)；上升或者自由落地Y座標：getHeight() / 2 + (distance(定義的一個距離常量) - mUpDistance(上升的距離))D和E點的座標可以通過除錯後獲取到最佳的座標點，相應的三個點的座標值獲取後，就可以繪製相應的貝塞爾曲線了；
剩下就只有中間小球的座標位置了，不管下墜、上升或者自由落體，X對應的座標都是getWidth(自定義控制元件的寬度)/2；
但是對應的Y的座標就會有區別：
下墜：getHeight() / 2 + mDownDistance(下墜的距離) - mPointSize(小球的半徑)
正常上升：getHeight() / 2 + (distance - mUpDistance) - mPointSize
自由落地：getHeight() / 2 - freeBallDistance(自由落體的距離) - mPointSize
獲取到對應的座標點後，呼叫onDraw()方法進行繪製，小球的上下運動是通過ValueAnimator來控制的；
實現主要程式碼(程式碼中有相應的註釋)：
public class /**
* Created by Administrator on 2017/12/23.
* 自定義加速器
*/
public class DampingInterpolator implements Interpolator {
@Override
public float getInterpolation(float input) {
return (float) (1 - Math.exp(-3 * input) * Math.cos(10 * input));
}
}/**
* Created by Administrator on 2017/12/23.
實現AnimatorListener介面，在監聽動畫的時候可以建立SimpleAnimatorListener抽象類子類
根據需要去重寫相應的方法
*/
public abstract class SimpleAnimatorListener implements Animator.AnimatorListener {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
}在LoadView類中提供了startTotalAnimations()方法，在對應的activity頁面中開啟動畫就ok了。
public class MainActivity extends AppCompatActivity {
private LoadView qp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
qp = (LoadView) findViewById(R.id.qp);
//開啟動畫
qp.startTotalAnimations();
}
}