属性动画 -- 弹起下落加载

1.先看效果

属性动画练习.gif

2.分析

这是一个不规则图形 三角形 圆形 正方形 三个图形的转换。弹起的时候转换，在下落的过程中慢慢的加速，弹起的时候是减速的过程，底部的阴影部分是下落缩小，弹起放大的过程。

3.自定义view

 @Override
    protected void onDraw(Canvas canvas) {
        if(mCurrentShape == CIRCLE) {
            mPaint.setColor(Color.YELLOW);
            canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth()/2, mPaint);
        }else if(mCurrentShape == SQUARE) {
            mPaint.setColor(Color.GREEN);
            canvas.drawRect(0, 0, getWidth(), getWidth(), mPaint);
        }else if(mCurrentShape == TRIANGLE) {
            mPaint.setColor(Color.RED);
            Path path = new Path();
            path.moveTo(getWidth() / 2, 0);
            path.lineTo((float) (getWidth() / 2 - getWidth() / 4 * Math.sqrt(3)), 3 * getWidth() / 4);
            path.lineTo((float) (getWidth() / 2 + getWidth() / 4 * Math.sqrt(3)), 3 * getWidth() / 4);
            path.close();
            canvas.drawPath(path,mPaint);
        }
    }

4.不规则view的切换

public void exchange(){
        switch (mCurrentShape){
            case CIRCLE:
                mCurrentShape = SQUARE;
                break;
            case SQUARE:
                mCurrentShape = TRIANGLE;
                break;
            case TRIANGLE:
                mCurrentShape = CIRCLE;
                break;
        }
        invalidate();
    }

5.自定义一个LoadingView继承LinearLayout

先看布局文件
loading_ui.xml

在LoadingView中加入这个布局

/**
     * 初始化加载布局
     */
    private void initLayout() {
        inflate(getContext(), R.layout.loading_ui, this);
        mShareView = findViewById(R.id.shapeView);
        mViewMin = findViewById(R.id.v_min);
        post(new Runnable() {
            @Override
            public void run() {
                startFallAnimation();
            }
        });
    }

6.动画的实现

下落过程

/**
     * 下落动画
     */
    /**
     * 下落动画
     */
    private void startFallAnimation() {

        if(mFallAnimatorSet == null) {
            ObjectAnimator translationAnimation = ObjectAnimator.ofFloat(mShareView, "translationY", 0, mTranslationDistance);
            //配合底部阴影缩小
            ObjectAnimator scaleAnimation = ObjectAnimator.ofFloat(mViewMin, "scaleX", 1f, 0.3f);

            //组合动画
            mFallAnimatorSet = new AnimatorSet();
            mFallAnimatorSet.playTogether(translationAnimation, scaleAnimation);
            mFallAnimatorSet.setDuration(mAnimationDuration);
            //设置差值器 越来越快
            mFallAnimatorSet.setInterpolator(new AccelerateInterpolator());

            // AnimatorListenerAdapter 只需要关注结束动画就行
            mFallAnimatorSet.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    //下落完弹起
                    if(!isStopAnimation) {
                        mShareView.exchange();
                        startUpAnimation();
                    }
                }
            });
        }
        mFallAnimatorSet.start();
    }

7.弹起

 /**
     * 上升动画
     */
     private void startUpAnimation(){

        Log.d("TAG","startUpAnimation");

        if(mUpAnimatorSet == null) {

            ObjectAnimator translationAnimation = ObjectAnimator.ofFloat(mShareView, "translationY", mTranslationDistance, 0);

            ObjectAnimator scaleAnimation = ObjectAnimator.ofFloat(mViewMin, "scaleX", 0.3f, 1f);

            ObjectAnimator rotateAnimation = ObjectAnimator.ofFloat(mShareView, "rotation", 0, -360);

            //组合动画
            mUpAnimatorSet = new AnimatorSet();
            mUpAnimatorSet.playTogether(translationAnimation, scaleAnimation, rotateAnimation);
            mUpAnimatorSet.setDuration(mAnimationDuration);
            //设置差值器 越来越慢
            mUpAnimatorSet.setInterpolator(new DecelerateInterpolator());

            // AnimatorListenerAdapter 只需要关注结束动画就行
            mUpAnimatorSet.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    //弹起下落
                    if(!isStopAnimation) {
                        startFallAnimation();
                    }
                }
            });
        }
        mUpAnimatorSet.start();
    }

8.优化

 public void showLoading(){
        setVisibility(VISIBLE);
        isStopAnimation = false;
        startFallAnimation();
    }
    public void hideLoading(){
        setVisibility(INVISIBLE);
        doCancel();
    }
    /**
     * 当设置隐藏的时候 需要关闭动画 内存优化
     * @param
     */
    public void doCancel() {
        mShareView.clearAnimation();
        mViewMin.clearAnimation();
        mUpAnimatorSet.cancel();
        mFallAnimatorSet.cancel();
        mUpAnimatorSet = null;
        mFallAnimatorSet = null;
        isStopAnimation = true;
    }

加入一个标识 isStopAnimation 否则动画会一直执行，即使执行把动画remove了

9.调用方式

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final LoadingView loadingView = findViewById(R.id.loadingView);
        loadingView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                loadingView.hideLoading();
            }
        });

        findViewById(R.id.tv).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                loadingView.showLoading();
            }
        });

    }
}

就到这里了 附上源码
https://github.com/panshimu/ShareView