导语

之前发了一个Drawable实现动画效果的帖子，有人找我要过相应圆弧绘制算法，仔细想想那个项目中有些地方还是值得分享出来的，趁现在项目不忙，就准备分享出来。

只有一些算法的东西，代码不涉及具体业务

效果如下(即Activity-A 进入 到Activity-B时会出现的动画效果如上)：

实现思路：

主要由两个动画组成，背景动画和按钮动画

背景动画

背景动画可分解为位移上移和圆弧的改变

位移上移可以交给TranslateAnimation 来实现 ，更妙的是可以产生动画插值用来绘制椭圆

弧形改变可以用canvas来绘制，那么动态计算并绘制椭圆即可

动态计算椭圆可以用TranslateAnimation产生的动画插值

按钮动画

根据图片可以看到是新的图片逐渐扩大，从一个点开始逐渐遮盖住了旧的图片，这一点可以用BitmapShader来实现

其他就没了

会用到的技术点

/** * *@param canvas 绘制椭圆 */

private void drawOval(Canvas canvas){

// 起始 角度

float startAngle = 0f;

// 划过角度

float sweepAngle = 180;

final RectF rect = new RectF(0,0,400,100);

Path path = new Path();

path.addArc(rect,startAngle,sweepAngle);

}

Shader是着色器，BitmapShader是bitmap着色器，可以将一个Bitmap对象绘制到画布上.

阻尼振动曲线如下图

其实分析曲线后就能发现 其实就是指数函数(无限趋近于0)和 余弦曲线的结合而已。

实现过程

因为主要是背景动画和按钮动画，所以也拆成两部分

背景动画的实现

动画过程分析

位移动画可以不表，因为很简单，以一种速率 最多加一个速度叠加器即可

椭圆可以看到先是移出时椭圆向下最大，然后慢慢缩小，最后在位移到 整体 1/2处椭圆为0，然后又向屏幕上方鼓出，慢慢增大，到 位移到最大位置时椭圆最大

到最大位移位置后，圆弧以阻尼振动慢慢缩小，及至椭圆为0

动画过程实现

1. 创建位移动画

同时创建出 0f - 1.0f 的时间插值

/** * *@return 得到上移动画 */

private AnimationSet getAnimationSet(){

// 之所以用 AnimationSet，是为了可能加入进来的其他动画效果

final AnimationSet animationSet = new AnimationSet(true);

animationSet.setDuration(1600);

// TranslateAnimation.RELATIVE_TO_SELF 相对位置

TranslateAnimation translateAnimation = new TranslateAnimation(

TranslateAnimation.RELATIVE_TO_SELF,0,

TranslateAnimation.RELATIVE_TO_SELF,0,

TranslateAnimation.RELATIVE_TO_SELF,1.0f,

TranslateAnimation.RELATIVE_TO_SELF,0){

/** * 回调间隔在10 ms 左右 *@param interpolatedTime 即为时间插值 0f - 1f， *@param t */

@Override

protected void applyTransformation(float interpolatedTime, Transformation t) {

super.applyTransformation(interpolatedTime, t);

// 半屏动画 设置插值

mHalfScreenDrawable.setPercent(interpolatedTime);

// 按钮动画 设置插值

mRippleButtonDrawable.setPercent(interpolatedTime);

}

};

animationSet.addAnimation(translateAnimation);

return animationSet;

}

2. 创建绘制弧线

向下的弧线可以理解为一块正方形和椭圆重叠，当绘制上/下半椭圆以及正确的混合模式即可得到一个正确的圆弧

// 图片混合模式为

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));

即 当时间插值 为 0f - 0.5f的时候，控制椭圆所在矩形高度由大减小到0，同时绘制椭圆下半部

当时间插值为 0.5f - 1.0f的时候，控制椭圆所在矩形高度由0增大到最大，同时绘制椭圆上半部

当到1.0f时，根据阻尼振动函数 计算出递增插值下 包含椭圆 矩形的高度绘制半部椭圆即可

/** * 设置时间插值，并根据插值计算椭圆所在矩形高度，从而得到不同的椭圆弧度 *@param value */

public void setPercent(float value) {

// 向下圆弧，绘制下半部椭圆

if (value <= 0.5f) {

mStartAngle = 0;

final float top = mBottomRectF.top - mHeightTopRect * (0.5f - value);

final float bottom = mBottomRectF.top + mHeightTopRect * (0.5f - value);

mTopRectF.set(mTopRectF.left, top, mTopRectF.right, bottom);

} else {

// 向上圆弧，绘制上半部椭圆

mStartAngle = 180;

final float top = mBottomRectF.top - mHeightTopRect * (value * 2f - 1f) / 2f;

final float bottom = mBottomRectF.top + mHeightTopRect * (value * 2f - 1f) / 2f;

mTopRectF.set(mTopRectF.left, top, mTopRectF.right, bottom);

if (value == 1.0f) {

// 当到1.0f时，开始绘制阻尼振动

startBackAnimation();

}

}

invalidateSelf();

}

/** * // 当到1.0f时，开始绘制阻尼振动画 */

private void startBackAnimation() {

isInBounceMode = true;

handler.sendEmptyMessageDelayed(100, 5);

}

/** * TODO: 15/12/8 要修改为弱引用 */

private Handler handler = new Handler() {

@Override

public void dispatchMessage(Message msg) {

super.dispatchMessage(msg);

invalidateSelf();

// 根据当前 阻尼函数计算得出的Y坐标计算得到包含椭圆矩形的上下Y坐标

final float top = mBottomRectF.top - Math.abs(mBounceY) / 2;

final float bottom = mBottomRectF.top + Math.abs(mBounceY) / 2;

mTopRectF.set(mTopRectF.left, top, mTopRectF.right, bottom);

// 根据当前 阻尼函数计算得出的Y坐标计算得到startAngel

if (mBounceY > 0) {

mStartAngle = 180;

} else {

mStartAngle = 0;

}

}

};

/** * 根据cursor插值，计算 阻尼 Y实时坐标 *@param x *@return 阻尼振动函数 */

private double getBounceY(long x) {

if (x == 0)

return 0;

// 指数函数

double bounceRate = Math.exp(-0.06 * x);

if (bounceRate < 0.0001) {

isInBounceMode = false;

}

// 增益函数和余弦曲线合并，就是阻尼函数曲线

return bounceRate * Math.cos(0.3 * x);

}

到这里，绘制背景动画关键代码已经完毕

按钮动画的实现

动画过程分析

可以看到是一张旧图片上，新的图片逐渐扩大，发现其实是两个动画的集合 ，一个是新的图片不停变大(保持圆形)，第二个是新的图片圆心坐标有变化

更深一步分析是新图片在 时间插值 0f-1f，半径从0-最大，圆心从 图片3/4处，变为最后1/2处

动画过程实现

时间插值可以用之前创建出来的

如果你已经看过了并指导 BitmapShader是干什么的那么应该已经有了思路了吧？

/** * 构造参数 * *@param bitmap 新的图片 *@param oldBitmap 旧图片 */

public RippleButtonDrawable(Bitmap bitmap, Bitmap oldBitmap) {

mBitmapNew = bitmap;

mBitmapOld = oldBitmap;

// 设置图片着色器

BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP,

Shader.TileMode.CLAMP);

mPaintNew = new Paint();

mPaintNew.setAntiAlias(true);

mPaintNew.setShader(bitmapShader);

mWidth = mBitmapNew.getWidth();

mHeight = mBitmapNew.getHeight();

mPaintOld = new Paint();

}

@Override

public void draw(Canvas canvas) {

// 绘制旧图片

canvas.drawBitmap(mBitmapOld, 0, 0, mPaintOld);

// 绘制圆形新图片

canvas.drawCircle(

getXCoordinateOfCenter(mPercent),

getYCoordinateOfCenter(mPercent),

getRadiusWithPercent(mPercent),

mPaintNew);

}

就这样就好了，是不是很简单？？？

有更多的问题可以联系我