我们先来看一下聚美优品的效果:
这个闹钟会有三个动画效果:
- 类似雷达扫描的效果,在1秒内旋转一圈,就是图中的黄底。
- 闹钟中间的数字由大到小展示。
- 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();
}
}
具体内部的实现,大家下代码一看便知。
代码下载传送门