此篇中的小鱼动画是模仿国外一个大牛做的flash动画，第一眼就爱上它了，简约灵动又不失美学，于是抽空试着尝试了一下，如下是我用Android实现的效果图：
小鱼儿
由于整个绘制分析过程比较繁琐所以灵动的红鲤鱼准备做成上下两篇，本篇是小鱼儿绘制的实现篇，第二篇是小鱼儿游动控制篇下篇传送门。本篇实现如下效果：
原地摆尾版
绘制实现篇用到如下主要的技术:
1）、自定义Drawable动画
2）、Android的坐标及角度
3）、Canvas中layer的使用
4）、正余弦函数的使用以及角度角和弧度角的转换
下图是我实现小鱼儿的分解图纸：
部件分解图
一、动画拆解
拿到动画需求或者模仿一个动画首先需要分析动画主体如何绘制部件如何活动，就此动画外观分析如下：
1）、小鱼的身体各个部件都是简单的半透明几何图形
2）、各个部件都可以活动
3）、从头到尾方向的部件摆动幅度越来越大、频率越来越高
二、技术分析
小鱼摆动是周期运动，三角函数正好有此特性，角度问题也需要和坐标挂钩，所以我们先来明确一下两个最重要也是最基本的问题：坐标和角度。与平面直角坐标系不同的是Android的坐标系中Y轴正方向是朝下的，但是角度却和平面直角坐标系的计算方法一样，即原点指向X轴正方向为0°，正角度是逆时针旋转，负角度是顺时针旋转那么问题就来了：坐标系不同，角度转动方式却一样，为了让java中的Math函数计算出来的角度跟Android的坐标习惯一致我们需要将与Y轴相关的角度都减去180°，这样解决了既用Android的坐标又用自然角度的问题，即下图所示的角度和坐标系关系
Android坐标系下的自然角度
统一完角度问题，接下来我们就看看鱼的各部件是怎么关联在一起的。需要先了解三个重要参数
1）、鱼的重心
因为最终我们要实现鱼儿根据手指点击的位置而移动的效果，必须确保能让点击点成为唯一确定鱼儿位置的点，所以我们必须找到一个让鱼儿的各个部件都相对此点绘制的点。参考点可以任意选，但是考虑到转弯的时候或者身体摆动的时候不会往某一边偏，于是将参考点选在鱼的中轴线上，本来选在中轴线和鱼儿头顶橡胶的点但是最后转弯的时候就跟秋名山老司机漂移一样，那叫一个飘逸，最后将参考点选在了鱼的腹部重心处。
2）、鱼头半径
比例示意图
此案例中鱼的各个部件都是以鱼头半径R为单位衡量的，比如鱼的身子第一节长度是3.2R,依次确定好身体的各个部件相对于鱼头半径的尺寸就能确定整条鱼的总长度为6.79R，继而确定控件的总尺寸。如下图，经过计算控件最小尺寸为8.36R,这样就保证鱼儿转动任意角度都在控件之内
打转图
3）、鱼身角度
此处的鱼身角度是指重心到鱼头圆心的连线和X轴正方向的夹角角度，即鱼儿前进方向的角度。此方向是确定各个部件方向及位置的的基础方向，部件的定位、鱼身角度以及尾部的摆动角度都是在此角度基础上通过加减角度来控制左右摇摆。
下边我将演示一下如何通过这三个因素来确定头部以及鱼鳍的点坐标(其他部位原理相同)
先假设鱼身角度为0°，即头朝向X轴正方向。通过重心点以及第一节身长的一半的长度，以及角度即可计算出头部的圆心坐标，然后再以头部圆心坐标和0.9R的长度，顺时针旋转80°确定右边鱼鳍的坐标点
作者：Jics
链接：https://www.jianshu.com/p/3dd3d1524851