闹钟倒计时动画效果实现。仿聚美优品H5闪购动画。

我们先来看一下聚美优品的效果：

这个闹钟会有三个动画效果：

1. 类似雷达扫描的效果，在1秒内旋转一圈，就是图中的黄底。
2. 闹钟中间的数字由大到小展示。
3. 6秒内的时候，闹钟会有一个shake振动的效果。

下面展示一下我丑陋的实现效果，大家看下原理，画面可以自己优化。

我5秒的时候整个屏幕都在振动=。=

这个效果涉及到的知识还是比较多的。

• 计时器的使用，不太了解的看官可以看这篇博客Android计时工具解析
• Android基本动画效果的实现
• 自定义view绘制雷达效果等

下面介绍一下代码：
MainActivity。

public class MainActivity extends ActionBarActivity {
    private CircleView mRoundProgressBar;
    private int progress = 0;
    private TextView mTvTime;
    RefreshTimeTimeTask mRefreshTimerTask;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRoundProgressBar = (CircleView) findViewById(R.id.roundProgressBar);
        mTvTime = (TextView) findViewById(R.id.time);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                startTimer();
            }
        });

    }

    /**
     * 自定义计时器。
     */
    public class RefreshTimeTimeTask extends CountDownTimer {
        /**
         * @param millisInFuture    The number of millis in the future from the call
         *                          to {@link #start()} until the countdown is done and {@link #onFinish()}
         *                          is called.
         * @param countDownInterval The interval along the way to receive
         *                          {@link #onTick(long)} callbacks.
         */
        public RefreshTimeTimeTask(long millisInFuture, long countDownInterval) {
            super(millisInFuture, countDownInterval);
        }

        @Override
        public void onTick(long millisUntilFinished) {
            //单位时间刷新UI.
            onTickFrashUI(millisUntilFinished);
        }

        @Override
        public void onFinish() {
            //即时结束后，重启闹钟循环这个过程。
            startTimer();
        }
    }

    /**
     * 开启计时器
     */
    protected void startTimer() {
        stopTimer();
        mRefreshTimerTask = getTimerTask();
        if (mRefreshTimerTask != null) {
            mRefreshTimerTask.start();
        }
    }

    /**
     * 关闭计时器
     */
    protected void stopTimer() {
        if (mRefreshTimerTask == null) return;
        mRefreshTimerTask.cancel();
        mRefreshTimerTask = null;
    }

    /**
     * 刷新UI的操作。
     * @param millisUntilFinished
     */
    protected void onTickFrashUI(long millisUntilFinished) {
        long leftTime = millisUntilFinished / 1000;
        if (leftTime < 6) {
            Animation shakeAnimation = AnimationUtils.loadAnimation(this, R.anim.shake);
            findViewById(R.id.content_view).setAnimation(shakeAnimation);
        }

        mTvTime.setText(String.valueOf(leftTime));
        Animation mAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
        mTvTime.setAnimation(mAnimation);
        progress = 0;
        new Thread(new Runnable() {

            @Override
            public void run() {
                while (progress < 100) {
                    //设置成5会出问题。。。
                    progress += 6;

                    System.out.println(progress);

                    mRoundProgressBar.setProgress(progress);

                    try {
                        Thread.sleep(50);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }

    /**
     * 初始化计时器。
     * @return
     */
    public RefreshTimeTimeTask getTimerTask() {
        RefreshTimeTimeTask mTimeTask = new RefreshTimeTimeTask(1000 * 10, 1000);
        return mTimeTask;
    }

    /**
     * 退出页面关系计时器。
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        stopTimer();
    }
}

具体内部的实现，大家下代码一看便知。
代码下载传送门