文章目录
- 整体思路
- 实现方法
- 示例代码
各位看官们大家好,上一回中咱们说的例子是"Java中的进制转换",这一回中咱们说的例子是"向外扩散的水波纹动画"。闲话休提,言归正转, 让我们一起Talk Android吧!
整体思路
我们使用自定义View的思路来实现水波纹,先画一个圆环,然后通过动画不断地放大圆环进而形成向外扩散的效果,在放大圆环的同时让圆环逐渐变透明,形成波纹消失的效果。两种动画效果叠加在一起就形成了扩散的水波纹效果。下面是程序最终的运行效果,请大家参考:
实现方法
- 重写构造方法,在构造方法中初始化画笔相关参数;也可以把圆环的大小,半径,颜色做成自定义属性,通过属性来配置圆环的大小等信息;
- 重写测量方法,主要是计算圆环的长度和宽度,我们在这里就不不重写该方法了,大家可以参考自定义View中的模板代码;
- 重写绘制方法,在该方法中绘制一个圆环,绘制时计算圆环的位置(圆心),同时会使用圆环的半径和画笔;
- 创建一个动画集,其中包含大小缩放和透明度渐变两个子动画;缩放时只放大,渐变时从不透明渐渐变透明;
- 把自定义的波纹控件放到布局中,并且在给该控件绑定上一步中创建的动画集;
示例代码
介绍完实现方法,下面是示例代码,请大家参考:
public class WaveView extends View {
private Paint mPaint;
private int radius;
private int circleWidth;
private Context mContext;
public WaveView(Context context) {
super(context);
init(context);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context);
}
private void init(Context context) {
mContext = context;
mPaint = new Paint();
mPaint.setColor(Color.YELLOW);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
circleWidth = 20;
mPaint.setStrokeWidth(circleWidth);
radius = 100;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = getMeasuredWidth()/2;
int y = getMeasuredHeight()/2;
radius = getMeasuredWidth()/2-10;
if(x<150){
mPaint.setColor(Color.RED);
}
if(x>150 && x<250) {
mPaint.setColor(Color.GREEN);
}
if(x>250 && x<350) {
mPaint.setColor(Color.BLUE);
}
canvas.drawCircle(x, y, radius, mPaint);
}
public void startPlay() {
Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.wave_aimation);
this.startAnimation(animation);
}
}
上面的代码中的多个if判断条件是为了依据不同的宽度来设置不同的画笔颜色,这样可以画出不同颜色的圆环来。代码中使用的是视图动画集,下面是动画集中的代码:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000">
<scale
android:repeatMode="restart"
android:repeatCount="-1"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.5"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%">
</scale>
<alpha
android:fromAlpha="1"
android:toAlpha="0">
</alpha>
</set>
把自定义的控件添加到布局中,然后在代码中获取布局中的控件,接着使用控件中的startPlay()方法就可以播放动画了,动画的效果就是向外扩散的水波纹。
看官们,关于"向外扩散的水波纹动画"的例子咱们就介绍到这里,欲知后面还有什么例子,且听下回分解!