如何实现超萌动感小炸弹?

超萌动感小炸弹

作者:锋ivy

博客:http://www.jianshu.com/u/872177ee99f9

文章目录

  • 前言

  • 地板

  • 身体的边框

  • 身体

  • 脸上的阴影

  • 引线

  • 爆炸效果

  • 脸左右移动动画

  • 身体头部引线左右旋转

  • 脸部上下移动

  • 炸弹引线,点燃效果

  • 爆炸动画

  • 结语

0

前言

开始我们的超萌动感小炸弹之旅。

https://www.uplabs.com/posts/explosive-animation

)。

效果如下,Amazing:

preview.gif

再来看 android 的实现效果。

android实现

下面我们和 自定义view实现超萌动感天气小太阳 一样,开始解析动画!( 没看过天气小太阳的朋友可以先去看天气小太阳,有些天气小太阳讲过的套路将不再讲,同时需要掌握path、camera、贝塞尔曲线等,不然部分代码可能会引起不适 )。

我们先把静态 view 绘制出来,然后再实现动画,Let's go。

静态效果

1

地板

可以看到地板其实就是一条直线。然后中间两个缺口。这要个么实现呢?看到小太阳的小伙伴可能都会说,这很简单。只要画一线直线然后覆盖两个白的区间就可以了。的确这可以实现,但是仔细观察可以发现下方的缺口是两个半圆加矩形实现的,这样的话就有点麻烦,而且不方便缺口位置的移动。那有什么简单的方法呢?

有,那就是使用 Path 进行绘画一条直线,然后通过设置圆笔头, 再设置 DashPathEffect( 实现虚线,一段画,一段不画的效果,可以自由控制各段长度)来实现间隔(本view的缺口都是使用此特性实现的,不熟悉的小伙伴可以去看一下 ),代码如下:

2

身体的边框

仔细一看!聪明的你一定会说太简单了,这不就是一个圆然后再用 DashPathEffect 实现缺口不就可以了!!嗯,对,就是这样的。直接放代码:

简单!简单的不能再简单了,下面看身体

3

.身体

可以发现身体其实也就是一个圆,然后加上左上角的高光。那么高光是怎么实现的呢?

三个点的高光,很简单的,用 Path 画弧,然后使用 DashPathEffect 效果,完美。

那么另一个高光呢?看图。

可以看到就是条圆弧和一个路径合成的,然后裁剪保持圆内。路径的形成就是取弧度的两个点,然后用贝塞尔曲线进行绘制, 控制点位于弧度中分线中(下图红点)

代码如下:(部分代码,左上角高光的,其它的请查看源码)

4

大家可以看到,好你有点复杂的,其实还好。这里是因为使用了Z轴旋转,看起来有点复杂,那我们移到中间。

好像简单了,眼睛和酒窝简单,4个圆!!嘴巴,这个。。。这个好像有点恶心啊。其实不然,看图。

其实就是一个圆然后再加上一个路径图就可以实现,红点表示的是控制点。空心点表示节点。细心的朋友可能发现,不对啊。舌头下面不全是红的,和嘴巴是分开的。这里只需要把嘴巴按比例缩小,然后和嘴巴做个 Xfermode 就可以了。部分代码:

5

脸上的阴影(不知道叫,暂时称阴影遮罩)

一看,个别好事的小伙伴说,你不会又让我用贝塞尔曲线画吧!这个不好找啊!!冷静冷静,这个实现如下:

如此简单,两个圆取红圆未相交的部分。

6

小伙伴又要说了。这个不好画,不好画!!冷静冷静。这个其实更简单。只要把头放在身体的后面一层就可以了。看图:

代码:

7

引线

这个引线,其实也就是一线曲线,贝塞尔曲线继续上场(不解释,不懂的请面壁去)。

8

爆炸效果

简单的不太再简单了,4个圆,半径从大到小画,中间然后挖空。 so easy!!

到这里,我们已经完成了一半,那就是小炸弹的显示,现在到了动画的时间了!再次出场

android实现

9

脸左右移动动画

可以看到左右移动,在移动的时间然后我们只需要在画脸的时间加一个偏移,然后在移动的过程中,会发现脸会绕炸弹身体的中心旋转。所以代码如下

使用 camera ,进行 z 轴的旋转,然后再进行 translate 左右移动,然后使用 valueanimator 动画对变偏移进行设置,搞定!在移动过程中,可以发现眼睛有眯下的效果。这个很简单,可以把眼睛用椭圆来实现,保持宽度不变,改变高度就可以了。

10

身体头部引线左右旋转

这个就更简单了,只需要在画之前用 camera 旋转变换获取 martix ,然后对 canvas 进行变换。

11

脸部上下移动

首先和脸部左右移动一样,使用 matrix.translate 进行上下移动。眼睛的变换也一样。后面的眼睛放大效果,就是在变成圆的眼睛的时候,放大圆的半径。

嘴巴的变换就相对比较复杂!看图,高能预警,我也不知道我讲不讲得清楚!!!!

这是刚才画嘴巴的图!!!嘴巴动画有两个部分!!(以下语句可能会引起不适)

  • 第一部分嘴角往两边移动,嘴巴变扁。这里我们需要把 ab 两点用属性动画往两边移动(两边的拐角点同样移动), c 点往上方移动,然后回到原始位置。

  • 第二部分是 ab 两点往中间靠拢,直到ab重合,同时 ab 两点往上移, de 的控制点同时拉长,直到形成一个椭圆。

不理解!!不理解再好好想象一下,空间想象能力。要是还想不懂,那就算了。毕竟平时用得不多。

12

炸弹引线,点燃效果

炸弹引线效果同样分两个部分

  • 一个是引线变短,可以根据 PathMeasure ,获取 Path 的比例 Path (比如 70%Path ),这样我们就可以通过 ValueAnimator 用一个0到1的比例来绘制引线变短的效果

  • 第二部分是点燃的效果。其实就是一个金色的实心圆,然后一个红色的圆边框,中间白色,三个圆按不同的速率和极限做放大缩小动画 (这里原设计还加入了变色的功能,金色圆会变色,可以用 ArgbEvaluator 实现)。

13

爆炸动画

和引线动画类型,4个圆做放大缩小动画,只是到一定的大小后,然后圆小漏空,并且漏空逐渐放大。

14

结语

好了,我们的超萌动感小炸弹到这里就结束了。希望小伙伴们能有所收获,掌握更多自定义 view 的套路,更多分析方法,我们下次见。

github:

https://github.com/fengivy/Weather

留言有福利, 具体规则请看

帮你养成好习惯

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章