手把手讲解 - 一个复杂动效的自定义绘制 2，html5 移动端开发框架

4、集合整理原理探索过程中的一些坑，或者 demo 的运行过程中的注意事项 5、用 gif 图，最直观地展示 demo 运行效果**

如果觉得细节太细，直接跳过看结论即可。本人能力有限，如若发现描述不当之处，欢迎留言批评指正。

学到老活到老，路漫漫其修远兮。与众君共勉 !

#github 地址：下载之后找到其中的 MemoryClearDrawable

#前言

上一篇文章，在 主要是在解读 不规则图形 和 覆盖绘制的"秘密" , 利用数学思维 解决无限动画的 要求.

本文，如何 优雅地设计一个动画特效自定义 View 类。代码经过本人反复推敲，应该足够优雅了, 尽请参考。

#效果图

#源码讲解

特别说明：自定义View，可以继承view，可以继承View的某个实现，可以继承ViewGroup或者ViewGroup的某个实现，具体做法很多，但是究其原理，无非就是 自绘 / 组合. 而自绘，可以继承View去重写onDraw，也可以继承Drawable 去重写draw.

继承View 和 继承Drawable的区别是：1.后者使用比前者更简单，只需要重写draw过程，并且不需要操心onMeasure的一堆破事。2.setAlpha、setColorFilter、getOpacity也需要重写，但是模板固定.

另外，Drawable （英文翻译为 "可绘制",读音为：/'dr??bl/ ）可以理解为它就是一张图，可以当作图片去使用，并且这张图比 jpg/png 这种资源文件更省apk空间。

但是，继承Drawable有一个缺点：如果我们的自定义效果里面包含了手势操作，例如需要重写onTouchEvent，那么drawable就不能使用了，还是只能继承View，去重写 测量 布局 绘制。

###设计思路分析我上面提供了动画减速的按钮，应该可以帮助大家更好去分解动画。

遇到复杂动画，第一件事就是放慢速度观察，看看具体有哪些绘制 、动效 步骤。针对上面这个动画，

我们能够分析出静止的部分有：

1.最外围的绿色背景

2.外围的白色圆圈（带渐变色）

3.中间的白色叉叉

4.叉叉消失之后的一个小圆点

5.小圆点消失之后的勾勾

6.纵横的辅助线(也可以不画)

动态的部分有：

1.白色圆圈（带渐变色）的旋转

2. 叉叉逐渐缩小直到消失

3.叉叉消失之后的一个小圆点 上移

4.叉叉消失之后的一个小圆点 下移

**5.小圆点消失之

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

后的勾勾的伸长**

###开始撸码 ####1、从静止的部分开始写:TIPS: 自定义 View 的绘制，很大一部分工作量都是在坐标计算上。根据以往的经验，在绘制开始之前，将坐标轴平移到画面中心，一般都可以减轻计算的工作量，所以:

@Overridepublic void draw(@NonNull Canvas canvas) {canvas.translate(mWidth / 2, mHeight / 2);//第一件事，先把坐标轴移动到中央，为了绘制方便...}

首先平移坐标轴，总是有好处的。

####TIPS：坐标计算的过程，文字很难说的清，请阅读源码，应该能看懂

按照上面的 6 点要素，一个一个绘制, 确认单步绘制调试没有错误之后，把各个步骤的绘制方法独立出来.