最近项目大改， 忙里偷闲 记录一下项目里用到的加载动画。。。。。
开始了：
UI大佬甩手扔过来一张GIF 说 ： 我要这个效果。
........这 得加钱。。。
好吧 先看看这张动图：
o.gif
既然活都接下了，只能硬着头皮上了。。
对于这个稍微复杂一点的动画，当然得先拆分一下，分成简单的动画后逐一实现，
看到这张动图，它一共包含三中动画效果
1.整体旋转
2.线条长短变化
3.缩放
既然已经拆分出来了，就可以一个一个实现了。。。
1.线条长短变化
这里我使用的是canvas.drawArc 绘制圆弧的方式实现的， 也可以用path的方式实现，
这里圆弧分为两半，中间间距我设置为20，可以得到一个圆弧的弧度是160.
添加属性动画， 让线条开始长短变化
比较简单， 看一下代码：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
arcRectF.set(paintStork, paintStork, getWidth() - paintStork, getHeight() - paintStork);
//第一个圆弧
canvas.drawArc(arcRectF, 270 + (intervalRadian >> 1), radian * progress, false, paint);
//第二个圆弧
canvas.drawArc(arcRectF, 90 + (intervalRadian >> 1), radian * progress, false, paint);
if(!isStart){
startAnim();
isStart = true;
}
}
private void startAnim(){
valueAnimator = ValueAnimator.ofFloat(minRadian, 1f);
valueAnimator.setDuration(rotatTime);
valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
progress = (float) animation.getAnimatedValue();
postInvalidate();
}
});
valueAnimator.start();
}
通过不断更新progress加上重绘，实现了圆弧的长短变化。
2.旋转
这部分如果用canvas实现的话 的不断更新圆弧的起始位置，相对于整个view的旋转来说复杂一点，
所以我选择整个view的旋转， 为view添加一个普通的旋转动画
看一下代码：
private void startRotatWithScale() {
// 利用 ObjectAnimator 实现旋转动画
final AnimatorSet rotateAnimationSet = new AnimatorSet();
rotationAnimator = ObjectAnimator.ofFloat(this, "rotation",0, 360);
rotationAnimator.setDuration(rotatTime);
rotationAnimator.setInterpolator(new LinearInterpolator());
rotationAnimator.setRepeatCount(ValueAnimator.INFINITE);
rotationAnimator.setRepeatMode(ValueAnimator.RESTART);
rotateAnimationSet.playTogether(
rotationAnimator
);
rotateAnimationSet.start();
现在就差一个缩放动画了。
3.缩放动画
这个缩放和普通的缩放不同，它每转三圈才缩放一次，这个不是很好控制，如果用计时器来就显得很冗余了，好在google给我们提供了关键帧动画， 通过关键帧动画， 可以控制缩放的时间段，这就很好弄了：
看一下代码：
Keyframe keyframe1 = Keyframe.ofFloat(0f, 1.0f);
Keyframe keyframe2 = Keyframe.ofFloat(0.9f, 1.0f);
Keyframe keyframe3 = Keyframe.ofFloat(1f, 0f);
PropertyValuesHolder frameHodlerX = PropertyValuesHolder.ofKeyframe("scaleX",keyframe1,keyframe2,keyframe3);
animatorX = ObjectAnimator.ofPropertyValuesHolder(this, frameHodlerX);
animatorX.setDuration(scaleTime);
animatorX.setRepeatCount(ValueAnimator.INFINITE);
animatorX.setRepeatMode(ValueAnimator.REVERSE);
animatorX.start();
PropertyValuesHolder frameHodlerY = PropertyValuesHolder.ofKeyframe("scaleY",keyframe1,keyframe2,keyframe3);
animatorY = ObjectAnimator.ofPropertyValuesHolder(this, frameHodlerY);
animatorY.setDuration(scaleTime);
animatorY.setRepeatCount(ValueAnimator.INFINITE);
animatorY.setRepeatMode(ValueAnimator.REVERSE);
animatorY.start();
这样三个动画组合起来就实现了我想要的效果了:
see see
t.gif
看上去还不错。。。。
