一个水波纹动画的实现

一个水波纹动画的实现

效果图

按照往常惯例先看下效果图

设计原理

要实现图中的水波纹效果其实也很简单，首先想到的使用ValueAnimator动画来实现。计算最里面的水波纹和最外面的水波纹的距离，然后通过onAnimationUpdate回调获取当前的值画圆，这里我们需要用一个List来保存从动画开始到动画结束所以的值。用来在onDraw()来计算画多少个水波纹。注意这里还有颜色的透明度的变化还有每个水波纹之间的距离也是要考虑的。透明度可以通过距离差值动态的从FF~00设置，每个水波纹之间的距离这就要考虑用何种Interpolator还有就是onAnimationUpdate每回调几次才进行绘制一次来计算了。总体逻辑就是这样。接下来上源代码了

源码

java代码

public class RippleView extends View implements ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {//水波纹开始的半径private int mStartRadius;//控件的半径private int mRadius;//水波纹颜色private int mColor;//线的宽度private int mStrokeWidth;//一次水波纹的动画时间private int mDuration;//画笔private Paint mPaint;private static final int DEFAULT_START_RADIUS = 30;private static final int DEFAULT_COLOR = 0xFF5BE5E5;private static final int DEFAULT_STROKE = 3;private static final int DEFAULT_DURAION = 1000;//1秒//没有透明度的颜色值private int mNoAlphaColor;//默认动画差值private TimeInterpolator mInterpolator = new AccelerateInterpolator();private ValueAnimator mValueAnimator;private ArrayList<Integer> mRadiusList = new ArrayList<Integer>(50);//统计动画回调的次数private int mCount=0;//取模次数才进行绘制private int mMode;private static final int DEFAULT_MODE=8;public RippleView(Context context) {super(context);init(context, null);}public RippleView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init(context, attrs);}public RippleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context, attrs);}private void init(Context context, AttributeSet attr) {TypedArray typedArray = context.obtainStyledAttributes(attr, R.styleable.RippleView, 0, 0);mStartRadius = DimensionPixelSize(R.styleable.RippleView_ripple_start_radius, DEFAULT_START_RADIUS);mColor = Color(R.styleable.RippleView_ripple_color, DEFAULT_COLOR);mStrokeWidth = DimensionPixelSize(R.styleable.RippleView_ripple_stroke, DEFAULT_STROKE);mDuration = Integer(R.styleable.RippleView_ripple_duration, DEFAULT_DURAION);mMode&#Integer(R.styleable.RippleView_ripple_mode,DEFAULT_MODE);le();//如果最高位有值得话就说明设置了透明度//无符号右移 高位补0if ((mColor>>>24) > 0) {mNoAlphaColor = mColor & 0x00FFFFFF;} else {mNoAlphaColor = mColor;}mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setColor(mColor);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(mStrokeWidth);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int width = measureHanlder(widthMeasureSpec);int height = measureHanlder(heightMeasureSpec);mRadius = ((width < height) ? width : height) / 2;setMeasuredDimension(width, height);}private int measureHanlder(int measureSpec) {int result = 0;int specMode = Mode(measureSpec);int specSize = Size(measureSpec);if (specMode == MeasureSpec.EXACTLY) {result = specSize;} else if (specMode == MeasureSpec.AT_MOST) {result = Math.max(result, specSize);}return result;}/*** 开始动画*/public void startAnimation() {if (mValueAnimator == null) {mValueAnimator = new ValueAnimator();mValueAnimator.setInterpolator(mInterpolator);mValueAnimator.setIntValues(mStartRadius,mRadius);mValueAnimator.setDuration(mDuration);mValueAnimator.setRepeatCount(-1);mValueAnimator.addUpdateListener(this);mValueAnimator.addListener(this);mValueAnimator.start();} else {if (!mValueAnimator.isRunning()) {mValueAnimator.start();}}}/*** 获取透明度** @param mChangeRadius* @return*/private int getColor(int mChangeRadius) {int currentRT = (mRadius - mChangeRadius);int sumR = mRadius - mStartRadius;int alpha = 255 * currentRT / sumR;//把透明度左移24位移动到最高位再进行与运算就得到正在的值啦return (alpha << 24) | mNoAlphaColor;}@Overrideprotected void onDetachedFromWindow() {stopAnimation();DetachedFromWindow();}/*** 结束动画*/public void stopAnimation() {if (mValueAnimator != null && mValueAnimator.isRunning()) {mValueAnimator.cancel();}}@Overrideprotected void onDraw(Canvas canvas) {for (int i = 0; i < mRadiusList.size(); i++) {int changeRadius = (i);mPaint.setColor(getColor(changeRadius));canvas.drawCircle(mRadius, mRadius, changeRadius, mPaint);}}@Overridepublic void onAnimationStart(Animator animation) {mRadiusList.clear();}@Overridepublic void onAnimationEnd(Animator animation) {}@Overridepublic void onAnimationCancel(Animator animation) {mCount=0;mRadiusList.clear();invalidate();}@Overridepublic void onAnimationRepeat(Animator animation) {mCount=0;mRadiusList.clear();}@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mCount++;if(mCount%mMode==0){int mRadius = (int) AnimatedValue();Log.e("lx","now Radius=>"+mRadius+"startRadius=>"+mStartRadius+"mRadius=>"+this.mRadius);mRadiusList.add(mRadius);invalidate();}}
}

xml中的属性

   <declare-styleable name="RippleView"><!--水波纹从什么时候开始，开始的半径 --><attr name="ripple_start_radius" format="dimension|reference"/><!--水波纹颜色 --><attr name="ripple_color" format="color|reference"/><!--水波纹粗度 --><attr name="ripple_stroke" format="dimension|reference"/><!--动画的时间 建议1000 毫秒单位 --><attr name="ripple_duration" format="integer"/><!--在动画更新值方法中多少次才取一次数据刷新绘制 建议值8 --><attr name="ripple_mode" format="integer"/></declare-styleable>

总结

代码比较简单，就这样吧