Android使用Canvas和Path自定义绘制动画 Android使用Canvas和Path自定义绘制

1. 动画类型在android开发中，完成设计师设计的动画的途径有很多种。
(1). 属性动画（Property Animtion）

Creates an animation by modifying an object's property values over a set period of time with an Animator.

通过使用Animator类修改object 的属性来实现动画。注意属性动画可以为所有的 Object类来作动画。
(2). 视图动画（View Animation）

Tween animation: Creates an animation by performing a series of transformations on a single image with an Animation
Frame animation: or creates an animation by showing a sequence of images in order with an AnimationDrawable.

补间动画：通过使用Animation类对单个view作一系列变形来实现动画。
帧动画：通过使用AnimationDrawable来创建动画来顺序展示一连串的图片。
(3). lottie库
lottie库是Airbnb开源的支持Android,ios,ReactNative的动画库，设计师利用AE上插件导出json文件，研发人员即可使用，可以省去研发人员的大量事件，但缺点是目前还不能完成所有的动画。
(4). gif

Fresco 是一个强大的图片加载组件。使用它之后，你不需要再去关心图片的加载和显示这些繁琐的事情！支持 Android 2.3 及以后的版本。Fresco 支持 GIF 和 WebP 格式的动画图片。

String path = ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + getResources().getResourcePackageName(R.raw.gif_pic) + "/" + getResources().getResourceTypeName(R.raw.gif_pic) + "/" + getResources().getResourceEntryName(R.raw.gif_pic); Uri uri = Uri.parse(path); ControllerListener controllerListener = new BaseControllerListener() { @Override public void onFinalImageSet(String id,@Nullable ImageInfo imageInfo, @Nullable Animatable anim) { if (anim != null) { anim.start(); } }@Override public void onFailure(String id, Throwable throwable) {} }; DraweeController controller = Fresco.newDraweeControllerBuilder() .setUri(uri) .setControllerListener(controllerListener) .setAutoPlayAnimations(false) .build(); mSimpleDraweeView.setController(controller);

(5). 使用 canvas 自定义绘制
使用canvas绘制动画的简单姿势：

提前创建好Paint 对象
重写 onDraw()，控制不同的状态，绘制不同的代码。

今天主要介绍利用canvas来绘制一个Path动画。
2. 开发步骤本节将以一团火围绕一个爱心旋转为例来说明如何使用path做动画。
效果如下：

文章图片
demo.gif
将video 转成gif，推荐一个工具： GIF Brewery by Gfycat
2.1 如何画出「爱心」
android 有很多绘制图形的API，对于简单的图形，可以直接找到对应的API。具体可以查阅 canvas, 不过对于一些自定义的图形，可以使用
canvas.drawPath 或者canvas.drawBitmap,本例中的「爱心」，就是利用Path来绘制。
可以拆成两个弧和一条线，具体见：

Path mAnimPath = new Path(); mAnimPath.addArc(200, 200, 400, 400, -225, 225); mAnimPath.arcTo(400, 200, 600, 400, -180, 225, false); mAnimPath.lineTo(400, 542);

drawArc() 是使用一个椭圆来描述弧形的。
left, top, right, bottom 描述的是这个弧形所在的椭圆；
startAngle 是弧形的起始角度（x 轴的正向，即正右的方向，时针3点的位置是 0 度的位置；顺时针为正角度，逆时针为负角度)
sweepAngle 是弧形划过的角度；
useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形。

2.2 如何画出「光点」
「光点」的绘制则是利用canvas.drawBitmap()来完成的。该API 有很多重载方法

drawBitmap(Bitmap bitmap, float left, float top,Paint paint) drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint) drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

由于我们在绘制过程中要对「光点」进行平移和旋转，所以选择通过变换Matrix来绘制变换的bitmap。
2.3 如何控制「光点」的移动速度、位置和角度
2.3.1 「光点」的移动速度我们利用计算「爱心」路径的长度和合适的时长来计算每次「光点」移动的步长。
「爱心」路径的长度：

mPathMeasure = new PathMeasure(mAnimPath, false); mPathLength = mPathMeasure.getLength();

如果在onDraw函数中没有大量的耗时操作，就认为16ms执行一次，可以根据总运行时间，来推算要执行多少次，从而推算出步长是多少。

private static final int INVALIDATE_TIMES = 100; //希望执行100次 mStep = mPathLength / INVALIDATE_TIMES;

2.3.2 「光点」的位置和角度我们希望在动画过程中能知道该「光点」在屏幕的位置和角度，可以利用API

boolean getPosTan (float distance, float[] pos, float[] tan)

该API 就是获取在路径长度为distance时，该点的位置和角度。其中pos[0],pos[1] 表示此时的坐标位置，而tan[0], tan[1]表示计算tan角度的x值和y值

mPos = new float[2]; mTan = new float[2]; mPathMeasure.getPosTan(mDistance, mPos, mTan);

2.3.3 绘制「光点」的位置和角度通过上一节，知道了不同时刻的位置和角度，那么画在屏幕上，利用matrix来做变换，代码很简单，不做其它解释了。

mMatrix.postTranslate(-mOffsetX, -mOffsetY); // 移到光点图片的中间位置。 float degrees = (float) (Math.atan2(mTan[1], mTan[0]) * 180.0 / Math.PI); mMatrix.postRotate(degrees); mMatrix.postTranslate(mPos[0], mPos[1]); canvas.drawBitmap(mBitmap, mMatrix, null);

3. 源码 【Android使用Canvas和Path自定义绘制动画】最后放出整个效果的源码，祝大家520快乐。

package com.taohuahua.pathanimdemo; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Path; import android.graphics.PathMeasure; import android.graphics.RectF; import android.util.AttributeSet; import android.util.Log; import android.view.View; import java.util.Date; public class PathAnimView extends View { private static final int INVALIDATE_TIMES = 100; //总共执行100次private Paint mPaint; private Bitmap mBitmap; private int mOffsetX, mOffsetY; // 图片的中间位置private Path mAnimPath; private PathMeasure mPathMeasure; private float mPathLength; private double mStep; //distance each step private float mDistance; //distance movedprivate float[] mPos; private float[] mTan; private Matrix mMatrix; public PathAnimView(Context context) { this(context, null); }public PathAnimView(Context context, AttributeSet attrs) { this(context, attrs, -1); }public PathAnimView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPathView(); }public void start() { mDistance = 0; invalidate(); }public void initPathView() { mPaint = new Paint(); mPaint.setColor(Color.RED); mPaint.setStrokeWidth(10); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); mPaint.setAntiAlias(true); mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.day_top_light); mOffsetX = mBitmap.getWidth() / 2; mOffsetY = mBitmap.getHeight() / 2; mAnimPath = new Path(); mAnimPath.addArc(200, 200, 400, 400, -225, 225); mAnimPath.arcTo(400, 200, 600, 400, -180, 225, false); mAnimPath.lineTo(400, 542); mAnimPath.close(); mPathMeasure = new PathMeasure(mAnimPath, false); mPathLength = mPathMeasure.getLength(); mStep = mPathLength / INVALIDATE_TIMES; mDistance = mPathLength; mPos = new float[2]; mTan = new float[2]; mMatrix = new Matrix(); }@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mAnimPath == null || mPaint == null) { return; } canvas.drawPath(mAnimPath, mPaint); if (mDistance < mPathLength) { mPathMeasure.getPosTan(mDistance, mPos, mTan); mMatrix.reset(); mMatrix.postTranslate(-mOffsetX, -mOffsetY); float degrees = (float) (Math.atan2(mTan[1], mTan[0]) * 180.0 / Math.PI); mMatrix.postRotate(degrees); mMatrix.postTranslate(mPos[0], mPos[1]); canvas.drawBitmap(mBitmap, mMatrix, null); mDistance += mStep; invalidate(); } else { canvas.drawBitmap(mBitmap, mMatrix, null); } } }