Android自定义View之鲨鱼和小鱼的等待动画
之前在看文章的时候发现了一个gif动画,感觉很有意思,适逢最近学习kotlin,就打算用kotlin在android中实现一次,部分角度及参数设置的比较随意,如有需要可以可随意修改
先看效果图
部分角度及速率还有优化的空间,不过主要的效果都已经实现出来了
设计过程
因为是个动画,刚看的时候感觉无从下手,仔细分析过后,发现…其实很简单的
首先是一个循环的动画,先要找到某个循环的开始或者结束,我截取的某个循环部分是鲨鱼鳍在右侧,本地左右变化几下,然后向左追逐小鱼到左侧部分.向右的部分,通过将向左的部分x镜像一下就可以得到.
由此可以将整个画面拆成三个部分:
- 其一是水面的部分,水面以下及水面和鱼接触的部分的留白处理都是在后面鲨鱼和小鱼处进行的,所以最后绘制的是一个水面以下部分的遮挡,这个部分也是一个比较好绘制的部分
- 其二是鲨鱼鳍的部分, 这个部分难度中等,主要的难度是两个圆找交点的计算过程…如果有需要可以根据代码设计相关参数进行调整
- 其三是小鱼的部分,这个是画面中最难实现的部分,主要涉及小鱼的绘制(椭圆及三角形),小鱼的水面的接触时水面的留白,小鱼入水的时候溅起的水花
代码实现
水面部分
代码就不放了,因为只是单纯的绘制个线和下部的遮盖,可以看看效果图
水面
为加遮盖的水面(可以看到水面之下的小鱼)
鲨鱼部分
鲨鱼鳍的主要设计思路就是先绘制两个圆,再根据两个圆的交点决定绘制的圆弧范围,注意
绘制的时候遮盖下部的水面
效果图
1 | //绘制鲨鱼鳍 |
小鱼部分
小鱼部分设计三个部分,鱼身(本体,眼睛,鱼尾),鱼的运动,鱼入水时的水花.
小鱼的运动轨迹可以看出来是一个圆弧,涉及的部分就是要根据鲨鱼鳍的位置调整在运动圆环上的位置,简单的canvas变换就可以做到
鱼身,相对来说比较简单,一个椭圆,一个三角形,一个点就可以完成了,再实现的时候先绘制了一个和背景色相同的填充内部颜色的鱼,用来实现鱼的水面接触的部分留白.
小鱼入水的水花实际上是在鱼的两侧没测画两个圆弧,当小鱼和入水越来越深(canvas的旋转的角度越来越大的时候,同一侧的两个水花之间的间隔也会变大,用来模拟水花的下落)
小鱼还未出水的部分(关闭水面下发的遮盖)
小鱼和水面接触的部分(遮盖水面的绘制)
小鱼入水时的水花效果
代码实现
1 | //绘制前面逃跑的小鱼 |
至此这个小动画就可以实现了,具体的代码可以查看我的github