Android自定义View--加载动画

背景

一直觉得Android系统自带的加载动画过于简单，看久了容易产生视觉疲劳，所以有时候有必要定义一些有趣的动画；也因为平时我们开发时多集中在业务与性能上的处理，对动画这一块使用得比较少；下面就来介绍一个加载动画代码的编写。最终效果如下：



技术介绍

目前Android里有三种动画模式，分别是property animation,view animation,drawable animation，这里简单介绍一下：

drawable animation：帧动画，通过切换图片来达到动画的效果。

view animation：补间动画，通过Animation对象可以对目标进行位移、透明度改变、伸缩、旋转。

property animation：属性动画，它表示的是一个值在一段时间内的改变，当值改变时要做什么事情完全是你自己决定的，这里使用到了ValueAnimator。

具体实现

1.我新建了个DotProgressView继承自View，因为要使用到onDraw，其中startDelay方法是重点。

public class DotProgressView extends View {

private Paint mPaint;
private float mRadius;
private float mSize;

public DotProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray=getContext().obtainStyledAttributes(attrs, R.styleable.DotProgressView);
try {
int height=typedArray.getLayoutDimension(R.styleable.DotProgressView_android_layout_height,-1);
//int width=typedArray.getLayoutDimension(R.styleable.DotProgressView_android_layout_width,-1);
Integer color=typedArray.getColor(R.styleable.DotProgressView_dot_color,Color.WHITE);

mPaint=new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(color);
mSize=height/2;
}finally {
typedArray.recycle();
}

}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(mPaint!=null){
canvas.drawCircle(getWidth()/2, getHeight()/2, mRadius, mPaint);
}
}

public void startDelay(long startDelay) {
ValueAnimator animator = ValueAnimator.ofFloat(mSize/4, mSize);
animator.setDuration(750);
animator.setStartDelay(startDelay);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mRadius = (Float)animation.getAnimatedValue();
invalidate();
}
});
animator.start();
}

}

2.里面我自定义了一些该View特有的属性，在attrs.xml里面：

<declare-styleable name="DotProgressView">
<attr name="android:layout_width" />
<attr name="android:layout_height" />
<attr name="dot_color" format="integer" />
</declare-styleable>

3.然后在需要用到该控件的layout里使用它，并在.java里启动动画。

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/splash_state_info_margin_bottom"
android:gravity="center"
android:orientation="horizontal">
<com.digital.customview.view.DotProgressView
android:id="@+id/dot1"
style="@style/DotProgressStyle"/>
<com.digital.customview.view.DotProgressView
android:id="@+id/dot2"
style="@style/DotProgressStyle"/>
<com.digital.customview.view.DotProgressView
android:id="@+id/dot3"
style="@style/DotProgressStyle"/>
</LinearLayout>

在.java代码中，启动他们。

((DotProgressView)findViewById(R.id.dot1)).startDelay(120);
((DotProgressView)findViewById(R.id.dot2)).startDelay(360);
((DotProgressView)findViewById(R.id.dot3)).startDelay(640);

以上没有将三个Dot集成到一个View里的考虑是更加灵活，当然也有人说这样使用起来会比较不方便，但这只是教程，具体的变化需要你去努力。

送上代码：下载地址