屬性動畫-波紋擴散WaveView

風吹過wu發表於2019-01-07

再次複習了屬性動畫,以前總是直接拿別人的輪子來用,現在學以致用,想自己搞一下。

先上圖

屬性動畫-波紋擴散WaveView

實現思路:3個圓不斷的擴大半徑,並且增加顏色的透明度。

程式碼:

public class WaveView extends RelativeLayout {

    private Circle circle1;
    private Circle circle2;
    private Circle circle3;
    private AnimatorSet animatorSet;

    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.layout_wave_view, this, true);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        circle1 = findViewById(R.id.circle1);
        circle2 = findViewById(R.id.circle2);
        circle3 = findViewById(R.id.circle3);
    }



    public void startAnimation() {
        if (animatorSet == null) {
            PropertyValuesHolder radiusHolder = PropertyValuesHolder.ofInt("radius", 100,200);
            PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("color",255, 0);
            ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(circle1,
                    alphaHolder,radiusHolder);
            objectAnimator.setDuration(1500);
            objectAnimator.setRepeatMode(ValueAnimator.RESTART);
            objectAnimator.setRepeatCount(ValueAnimator.INFINITE);

            ObjectAnimator objectAnimator1 = objectAnimator.clone();
            objectAnimator1.setTarget(circle2);
            objectAnimator1.setStartDelay(500);

            ObjectAnimator objectAnimator2 = objectAnimator.clone();
            objectAnimator2.setTarget(circle3);
            objectAnimator2.setStartDelay(1000);

            animatorSet = new AnimatorSet();
            animatorSet.playTogether(objectAnimator, objectAnimator1, objectAnimator2);
        }
        if (!animatorSet.isRunning()) {
            animatorSet.start();
        }
    }

    public void cancelAnimation() {
        if (animatorSet != null) {
            animatorSet.cancel();
        }
    }


}

複製程式碼

關於Circle的程式碼,這裡就不貼出來了。原始碼可以直接到github中Clone程式碼。歡迎star

相關文章