属性动画实战之扁平化自定义Loading

最近换了一个项目组，需要从新开发一个APP，美工给推荐了几个Loading效果，都不是很满意，总觉得有违和感，于是自己从网上找了一个还算满意的效果，自己用代码实现了一遍，顺便重温了一下属性动画，100多行代码轻轻松松搞定。

---

网上原图效果如下：

Loading的载体其实就是一个自定义的dialog，下面总结一下实现过程：

1，首先，要有一个自定义的view，用来实现一个能屏幕适配的圆点。这里只继承view，不继承surfaceview的原因是不需要频繁的重绘我们的圆点，所以也就不存在阻塞UI线程的问题。

/**
 * 自定义圆点
 * @author lizheng
 *
 */
public class MyPointView extends View{
    /**
     * 点的半径
     */
    public int pointW = 20;
    public void setPointW(int pointW) {
        this.pointW = pointW;
    }
    public MyPointView(Context context) {
        super(context);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.WHITE);
        //点的圆心在父控件的正中心
        canvas.drawCircle(getWidth()/2, getHeight()/2, pointW, paint);
        super.onDraw(canvas);
    }
}

2，圆点有了，在实现dialog之前，还需为他设定一些参数。这个diaolg应该是没有标题栏，没有背景，同时为了美观，背景的四角应该使用圆角效果。明确了这几点，首先我们来实现他的shape和style。

shape:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="20dp" />
    <solid android:color="@color/BaseColor"/>
</shape>

style:

<style name="PointDialogStyle" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/dialog_bg</item>
        <item name="android:backgroundDimEnabled">true</item>
    </style>

在这里，我们为这个dialog设置了圆角，背景透明，无标题，背景色为纯色。

3，下面就可以开始自定义我们的dialog了，首先，为他实现一个layout，使用动态布局和静态布局都是OK的，这个layout应该是一个横向的线性布局，可以依次排列我们的圆点，并且居中显示，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:id="@+id/mianView"
    android:orientation="horizontal" >
</LinearLayout>

4，在开始实现自定义dialog之前，我们来规划一下他应该做哪些事
(1)，在构造方法中设置style
(2)，根据手机屏幕的宽高，动态计算dialog的宽高
(3)，动态计算圆点的半径，并为dialog的父控件添加圆点，数量可控
(4)，在页面加载完毕后，在回调内为每一个圆点添加属性动画
(5) , 为属性动画添加监听，并实现动画算法

下面给出完整实现代码：

/**
 * 自定义Loading效果的Dialog
 * @author lizheng
 *
 */
public class MyPointDialog extends Dialog {

    /**
     * 点的总数
     */
    public static final int POINT_NUM = 5;
    /**
     * 延迟时间
     */
    public static final int DELAY = 100;

    private Context context;
    private LinearLayout mian;
    private List<MyPointView> views;
    private int mScreenW;
    private int mScreenH;
    private int dialogW;
    private int dialogH;

    public MyPointDialog(Context context) {
        super(context, R.style.PointDialogStyle);
        this.context = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mypoint_dialog_view);
        initView();
        getPointView();
    }

    private void getPointView() {
        views = new ArrayList<MyPointView>();
        LinearLayout.LayoutParams lay = new LinearLayout.LayoutParams(
                mScreenW / 14, mScreenW / 14);
        for (int i = 0; i < POINT_NUM; i++) {
            MyPointView pointView = new MyPointView(context);
            pointView.setLayoutParams(lay);
            pointView.setPointW(mScreenW / 54);
            views.add(pointView);
            mian.addView(pointView);
        }
    }

    private void initView() {
        mian = (LinearLayout) findViewById(R.id.mianView);
        Display display = getWindow().getWindowManager().getDefaultDisplay();
        // 屏幕宽高
        mScreenH = display.getHeight();
        mScreenW = display.getWidth();
        // dialog宽高
        dialogW = (int) (mScreenW * 0.23);
        dialogH = (int) (mScreenH * 0.1);

        FrameLayout.LayoutParams fl = new FrameLayout.LayoutParams(
                Utils.dip2px(context, dialogW), Utils.dip2px(context, dialogH));
        mian.setLayoutParams(fl);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        //创建完毕回调
        if (hasFocus) {
            for (int i = 0; i < POINT_NUM; i++) {
                final MyPointView view = views.get(i);
                //计算圆点基于父控件的Y轴位置，公式为：dialog高度的一半 - 圆点父控件高度的一半
                int height = mian.getHeight() / 2 - mScreenW / 28;
                ValueAnimator va = ValueAnimator.ofInt(height, height
                        + mScreenH / 30, height - mScreenH / 27, height);
                va.setDuration(1800);//动画的持续时间
                va.setRepeatCount(Integer.MAX_VALUE);//重复播放
                va.setStartDelay(DELAY + DELAY * i);//延迟播放
                va.setInterpolator(new DecelerateInterpolator());
                va.start();
                va.addUpdateListener(new AnimatorUpdateListener() {

                    @SuppressLint("NewApi")
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        // Y轴方向变化参数
                        int parseInt = Integer.parseInt(animation
                                .getAnimatedValue().toString());
                        view.setY(parseInt);

                        // XY轴大小变化参数
                        float fraction = animation.getAnimatedFraction();
                        view.setScaleX(fraction < 0.5 ? 1 - fraction : fraction);
                        view.setScaleY(fraction < 0.5 ? 1 - fraction : fraction);
                    }
                });
            }
        }
        super.onWindowFocusChanged(hasFocus);
    }
}

简单说一下动画算法的思路，每个圆点做的事其实是一样的，只是每个点比前一个延迟了近0.1秒的时间，通过使用ValueAnimator，设置圆点的起始位置，上下偏移位置，即可实现，最后在ValueAnimator 的监听方法中对我们圆点的Y轴坐标进行赋值即可。
原图中在位移的同时还有一个透明度的变化，这里为了迎合项目我做了一个修改，动态改变其大小，XY轴方向同时从1缩小至0.5，再从0.5放大至1。实现方法很很简单，getAnimatedFraction()参数返回的是一个从0至1的float值，其意义在于监听动画完成进度，通过判断getAnimatedFraction()的值的大小，就可以实现我们需要的大小变化效果，配合位移，个人觉得比原图更出彩。

---

至此，自定义扁平化的Loading效果已实现完毕，最近天天加班，比较累，有什么不足的地方还请大家提出，一起学习一起进步。