1. 说明

在我们开发项目的过程中，在加载列表数据时，比如加载ListView、RecyclerView数据之前一般都会有一些数据加载的动画，就比如我们之前写的一些效果，如58同城数据加载动画、花束直播加载效果，都是一些属性动画之类的。那么什么时间需要开启这些动画就显得尤为重要，那么接下来我们就来看下，这些属性动画到底是在什么时机开始调用的呢。

2. 属性动画调用时机

就是在布局实例化好之后、onResume()之后、view绘制流程执行完毕之后，调用开启属性动画，可以参考如下2个示例代码：

2.1 这个是58同城的，属性动画开始调用时机：是在自定义View的第三个构造方法中等实例化布局文件 ui_loading_view 之后再去调用 开启动画

/**
 * Created by JackChen on 2018/3/7.
 * Decription : 仿58同城数据加载动画
 */

public class LoadingView extends LinearLayout {

    // 上边的形状
    private ShapeView mShapeView;
    // 中间的阴影
    private View mShadowView;
    // 下落的高度
    private int mTranslationDistance ;
    // 动画执行的时间
    private final long ANIMATOR_DURATION = 350;
    // 是否停止动画
    private boolean mIsStopAnimator = false;


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

    public LoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mTranslationDistance = dp2px(80) ;
        // 初始化加载布局
        initLayout() ;
    }


    /**
     * dp - px
     * @param dip
     * @return
     */
    private int dp2px(int dip) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP , dip , getResources().getDisplayMetrics());
    }


    /**
     * 初始化加载布局
     */
    private void initLayout() {
        // 1. 加载写好的 ui_loading_view
        // 1.1 实例化view
//        View loadView = inflate(getContext() , R.layout.ui_loading_view , null) ;
//        // 1.2 添加到该View中
//        addView(loadView);


        // 找一下 插件式换肤资源加载那一节内容
        // this就代表把 ui_loading_view 加载到 LoadingView中
        inflate(getContext() , R.layout.ui_loading_view , this) ;

        mShapeView = (ShapeView) findViewById(R.id.shape_view);
        mShadowView = (View) findViewById(R.id.shadow_view);

        post(new Runnable() {
            @Override
            public void run() {
                // onResume()之后 view绘制流程执行完毕之后  开始动画
                startFallAnimation() ;
            }
        }) ;
    }

2.2 这个是花束直播的示例代码：

/**
 * Email: 2185134304@qq.com
 * Created by JackChen 2018/3/8 15:29
 * Version 1.0
 * Params:
 * Description:  花束直播加载效果
*/
public class LoadingView extends RelativeLayout {



    // 位移动画的偏移距离    30dp 需要转为 px
    private int mTranslationDistance = 30 ;
    private CircleView mLeftView , mMiddleView , mRightView;


    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);

        // 两个圆形进行位移动画 中间的运动间距
        mTranslationDistance = dp2px(mTranslationDistance) ;
        setBackgroundColor(Color.WHITE);

        // 添加3个View，但是需要圆形
        mLeftView = getCircleView(context);
        mLeftView.exchangeColor(Color.BLUE);

        // 中间的圆
        mMiddleView = getCircleView(context) ;
        mMiddleView.exchangeColor(Color.RED);

        // 右边的圆
        mRightView = getCircleView(context) ;
        mRightView.exchangeColor(Color.GREEN);

        addView(mLeftView);
        addView(mMiddleView);
        addView(mRightView);

        // 让布局实例化好之后再去开启动画
        post(new Runnable() {
            @Override
            public void run() {
                // 扩展动画
                expendAnimator() ;
            }
        }) ;
    }