属性动画 - 58同城数据加载动画

1.概述

---

其实越是形势不好的时候越是要练习内功，我们学会思考很重要，技术也只是技术而已。话不多说看看今天的效果：

58同城数据加载

2．效果实现

---

2.1 布局分析

可以看到上图可分为三部分，最上面是弹跳的几何形状图形，中间是阴影指示器，最下面是文字，所以布局用LinearLayout，最上面暂且放ImageView，中间阴影放ImageView , 最下面放玩命加载文字。

2.2 组合控件 LoadingView 继承自 LinearLayout

public class LoadingView extends LinearLayout{
    private ImageView mShapeLodingView,mIndicationView;
    private Context mContext;
    public LoadingView(Context context) {
        this(context, null);
    }
    public LoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        initLayout();
    }

    private void initLayout() {
        View.inflate(mContext, R.layout.load_view,this);
        mShapeLodingView = (ShapeLoadingView) findViewById(R.id.shapeLoadingView);
        mIndicationView = (ImageView) findViewById(R.id.indication);
    }
}

2.3 动画分析

这里可以看做两个部分的动画，一个是上面几何图形的下落上抛动画，一个是中间阴影指示器放大缩小的动画，如果能这样组合就算实现了: 当几何图形下落时配合阴影放大，当几何图形上抛时配合中间阴影缩小。需要用到 ObjectAnimator 属性动画

 //初始化下落动画
 private void initFreeFallAnimation() {
        // 下落动画集合
        mFreeFallAnimatiorSet  = new AnimatorSet();
        // 几何图形的垂直位移动画
        ObjectAnimator freeFallTranslationAnimator = ObjectAnimator.ofFloat(
                mShapeLodingView, "translationY", 0, mTranslationYDistance);
        // 定义动画的变化率。
        freeFallTranslationAnimator.setInterpolator(new AccelerateInterpolator(factor));
        // 中间阴影缩小动画
        ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationView,
                "scaleX", 1, 0.2f);

        mFreeFallAnimatiorSet.setDuration(ANIMATION_DURATION);
        mFreeFallAnimatiorSet.playTogether(freeFallTranslationAnimator, scaleIndication);

        mFreeFallAnimatiorSet.addListener(new AnimatorListenerAdapter() {
            //设置动画监听器，监听该动画的开始、停止、取消、结束等状态，我们往往会用AnimtorListener适配器类来只实现我们需要的方法
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                // 下落动画结束，改变形状，然后执行上抛动画
                upThrow();
                mShapeLodingView.changeShape();
            }
        });
    }

上抛动画其实和下落动画差不多，只要在下落动画执行完之后启动上抛动画即可，但是我们需要在下落动画结束完后改变形状，最直接的方式便是改变几何图像 ImageView 的背景资源即可，但是个人认为这样不是太好，所以需要自定义几何形状 ShapeLoadingView，然后提供一个 changeShape() 的方法，里面调用 invalidate()，在 onDraw(Canvas canvas) 中画对应的几何形状，具体请看这里 自定义View - 仿 QQ 运动步数进度效果

最后就剩两个旋转的动画了，我们旋转的动画以及角度问题我们直接从自定义 ShapeLoadingView 中获取，提供一个 getUpThrowRoteAnimation() 方法

/**
* 在ShapeLoadingView的构造方法中初始化旋转动画即可
*/
private void initRoteAnimation() {
    mRectRoteAnimation = ObjectAnimator.ofFloat(this,
        "rotation", 0, -120);
    mDefaultRoteAnimation = ObjectAnimator.ofFloat(this,
        "rotation", 0, 180);
}

/**
* 得到当前正在上抛时应该旋转的动画
*/
public ObjectAnimator getUpThrowRoteAnimation() {
    switch (mCureentShape){
        case SHAPE_RECT:
            return  mRectRoteAnimation;
        default:
            return mDefaultRoteAnimation;
    }
}

给上抛动画设置动画监听，在其 onAnimationStart() 中执行旋转动画

mUpThrowAnimatiorSet.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        //动画结束,下落
        freeFall();
    }

    @Override
    public void onAnimationStart(Animator animation) {
        super.onAnimationStart(animation);
        // 动画开始，和旋转动画一起执行
        startShapeRoteAnimator();
    }

    /**
    * 执行旋转动画
    */
    private void startShapeRoteAnimator() {
        ObjectAnimator roteAnimation  = mShapeLodingView.getUpThrowRoteAnimation();
        roteAnimation.setDuration(ANIMATION_DURATION);
        roteAnimation.setInterpolator(new DecelerateInterpolator(factor));
        roteAnimation.start();
    }
});

2.3 优化性能

网上有太多太多的 Demo 感觉都还很不错，但是后期检测性能的时候其实面临很多问题，如果某些效果不是你写的但是性能比较差的话其实很难改，要么你特别熟悉别人的代码要么你需要自己重新写要么得过且过。

    /**
     * 采用代码的方式添加
     *
     * @param parent
     * @return
     */
    public static LoadingView attach(ViewGroup parent) {
        LoadingView loadingView = new LoadingView(parent.getContext());
        loadingView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        parent.addView(loadingView);
        return loadingView;
    }

    /**
     * 优化性能
     * @param visibility
     */
    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(View.INVISIBLE);
        ViewGroup parent = (ViewGroup) this.getParent();
        if(parent != null){
            parent.removeView(this);
            mShapeView.clearAnimation();
            mShadowView.clearAnimation();
            this.removeAllViews();
            mStopAnimator = true;
        }
    }

所有分享大纲：Android进阶之旅 - 自定义View篇

视频讲解地址：http://pan.baidu.com/s/1slFJDOp