写在前面的几句话
<p>
为什么起这个标题呢，其实并不是因为这个自定义的View有多难，主要是因为上个版本才刚写好的自定义的View动效，这个版本就改了，让我有点不开森。
那先简单看看这两个动效图吧
图1 动效一
图2 动效二
看起来其实都蛮复杂的，但其实分步来慢慢实现，就其实很简单， 关键是去想的过程
实现效果图
图3 实现效果一
图4 实现效果二
不是百分百吻痕视觉效果，需要更多的微调，这里就把实现的思路去进行说明就好了
动效一的实现
<p>
主要说说实现的思路，代码就不贴上来，后面会把代码地址贴上来，注释也会写的尽量详细一些
实现动效无非是从静态到动态的过程，所以第一步就是实现静态的效果图
静态图如下
图5 效果一静态图
看静态图，可以看到组成部分
- 外圈有透明度的两个大圆
- 实体绿色圆
- 实体绿色圆内的圆环
- 中间的文字
这几个都很好实现的，所以其实静态图对我们来说并没有多大的困难，那么我们来分析下运动的过程
图6 效果一动态图
来看下运动过程
- 1.字体运动效果 ->透明度变化
- 2.实体圆与圆环的运动效果 ->半径从大到小，并且有弹簧类似的效果
- 3.圆弧运动的效果 -> 一个圆弧不断增大
- 4.对号的运动效果 -> 对号从消失到出现
- 5.外圈两个圆的运动效果 -> 半径变化与透明度变化
运动的前后顺序
点击后 外圈两个圆的运动效果 + 字体运动效果 + 实体圆与圆环的运动效果 - >圆弧运动的效果 - >对号的运动效果
那简单分析下每个运动过程的做法，由运动的顺序来分析
第一步 外圈两个圆的运动效果
我们看下这两个圆是一直进行扩张运动，而且外圆的扩展速度明显大于内圆，并且随着运动颜色越来越浅
我们只要将颜色透明度设置即可以让颜色变浅，而且也不用考虑两个圆先后的问题，因为颜色是透明的情况下，是有穿透的效果，所以这里我们要改变的值是圆的半径与圆的颜色透明度问题，颜色透明度的话通过10进制255-0来改变，但是其实可以通过圆半径比例来计算颜色的变化，所以最后其实是变成圆的半径变化的问题了。
第二步 字体运动效果
字体运动其实主要是透明度变化上面其实也说了从255-0变化就好了，但是其实在某些机型上会出现问题，是当颜色从10进制转成16进制后，不能识别该颜色，所以从255到>0的某个值就可以了
第三步 实体圆与圆环的运动效果
这个其实也是一样，半径的变化，减小到变大，设置一个BounceInterpolator就可以实现类似弹簧的效果了
第四步 圆弧运动的效果
其实这里是有两个圆弧的 ，一个是默认底色的圆弧，另一个是带颜色可以运动的圆弧，那么其实设置一个从0到360度的变化，就可以达到一个运动圆弧的效果
第五步 对号的运动效果
这个对号其实是绘制一个Path的路径，通过PathMeasure计算出Path路径的长度，然后通过长度的变化达到对号的绘制效果。
到这里也就分析结束了，其实经过分析后整个动效的运动就很清晰了，也没有那么复杂了
动效二的实现
<p>
首先自然也是从静态图进行分析
图7 效果二静态图
静态效果图其实很好分析出来，四个椭圆分别竖着放和横着放还有斜对角放,那我们分析下应该怎么选择会是比较好的方法
如果是用每个椭圆坐标来计算的话，那就太麻烦了，特别是后面的运动会特别坑的，所以这里我们用Canvas里面的旋转画布的方法来把同一样坐标的椭圆旋转到指定的位置，这样就可以实现这样四个圆叠加的效果了，注意圆的颜色透明度
另外有没有发现从上到下其实是有颜色的变化的，所以这里其实是有颜色的过渡的效果的，我们使用的是LinearGradient（线性渐变）通过设置两种颜色来实现颜色的过渡，但是LinearGradient是从左上方到右下方的，所以通过旋转画布来实现从上到下的颜色过渡效果
所以我们要绘制的内容如下
- 四个椭圆，方向不同
- 线性渐变
- 文字
接下来看一下动态图
图8 效果二动态图
来看下运动过程
- 1.字体变化 -> 透明度变化
- 2.椭圆的变化 -> 旋转，横向大小的变化
- 3.每一个Item的变化 ->从无到有，然后一直运动，有时间差值
那简单分析下每个运动过程的做法
第一步 字体运动效果
这个其实上面有介绍过，参考上面就可以了
第二步 椭圆的变化
椭圆有两个变化一个是旋转变化，旋转呢用前面的旋转画布实现就可以了，横向大小变化则不做说明了
第三步 每一个Item的变化
其实每个Item都是一个对象，有一个运动的最大值与最小值，而且从动态图可以看到从无到有有到最小值，与最大值，所以这些用随机数生成就好了，其实运动则是从无到这个值，然后值从最大到最小运动，就好了，而且控制一下Item的出现时间就可以了
基本分析完了，其实理论上都很简单，其实也确实很简单，更多的内容通过代码去查看就好了
网友评论