View详解（6）

废话不多说，直接进入正文，上文中我们已经看到了这篇要实现的动画效果如下：

我们可以看到该动画由两个主要元素构成：

• 张合的怪物脸

• 从右向左移动的食物
  

关于从右向左移动的食物，相信各位亲们第一眼就想到了位移动画，那么在Canvas绘制时，怎么做到动画呢？前篇的经验已经很多了，让圆心坐标成为动点，通过 ValueAnimator改变圆心坐标就好（PS：我这里建议做成 mStartPositionX+mDistanceX的形式，通过 ValueAnimator，控制 mDistanceX从0变化到移动距离就ok，注意向左移 mDistanceX要取负值）

接下来我们重点看一下嘴张合的怪物的实现原理。

简单观察动画后，我们可以截取到下图中的简单坐标系：

我们可以看到该动画的形成完成依赖于角CAB的大小变化，当角CAB变成0时，怪物吃食物完成，当角CAB达到最大时(最大角度由我们自行定义，这里假定为60度)，怪物嘴张到最大。

那么我们就可以就可以定义需要绘制的图形路径为：

移动圆弧起点到A，绘制直线AB，绘制狐线BC，绘制直线CA复制代码

其中B，C两点属于圆上点，坐标公式上文已讲过，不再赘述。

这里给出该图形的 Path伪代码供大家参考：

//重置Path起点mPath.reset();mPath.moveTo(A点);mPath.lineTo(B点);mPath.addArc(圆弧BC);mPath.lineTo(A点);复制代码

这样我们就可以完成这个动画的绘制了，请小伙伴们先自行尝试下，有问题的小伙伴可以通过后台回复ArcPointLoadingView获取完成代码。

转载于:https://juejin.im/post/5bc851aa6fb9a05d1e0e8b6c