学习笔记,非原创,不知原创是哪 通过自定义View+属性动画 实现一个会动鱼 分析: 画一条鱼鱼分为:鱼头(圆) + 身体(两条直线+两条贝塞尔曲线) + 鱼鳍(一条直线+一个贝塞尔)+尾巴(两三角)+节肢*2 (梯形+两圆) 先把鱼水平朝右,画一个坐标系,鱼的重心为坐标系中心
头圆半径的4.19倍,这个其实是自己定的,5f,6f都行,就是只改变鱼的长度,用鱼头半径做初始单位有利于改变整个鱼的大小。
初中知识: 所以可以得出:入参一个点、两点长度、对于x轴的角度。返回值 一个坐标
定义画笔 画鱼头:找到鱼头圆心,入参:重心、鱼身长一半、鱼的朝向(默认180跟重心一个方向) 画鱼鳍 鱼鳍是一个直线+一个二阶贝塞尔曲线,所以重点就是求出三个点:鱼鳍左点、右点、贝塞尔控制点 通过鱼头的圆心求,距离 0.9 * R ,角度110 。通过那个公式就能求出来 = 右鱼鳍点 三个点都有了,绘制鱼鳍: 别的部分也都差不多,根据那个公式,通过参考点求出另一个点,然后求出各个部分的点,最后连线画就行 求出各个点 然后 画身体 求出这6个点就行 鱼原地摆动鱼原地摆动需要属性动画ValueAnimator ValueAnimator属性动画,给一个值,一直变, setRepeatCount设置重复次数 在监听里面能取到当前的值,然后通过invalidateSelf();刷新重绘 通过这个变化的值,去改变鱼头的角度,这能实现鱼的摆动(比如鱼头摆动5度,节肢1摆动10度,节肢2摆动20度)这样不同的幅度就让鱼动起来。 所以可以用sin代替0~1f的动画,这样更加平滑。cos刚好比sin多一个象限,那么节肢2刚好可以被节肢1带着。 鱼游动鱼整条都是定义在FishDrawable的,用FishRelativeLayout,addView去将ImageView加进来FishDrawable 点击水波纹在onTouchEvent里记录下点击(X,Y),然后根据属性动画去改变圆半径和透明度 ObjectAnimator ObjectAnimator extends ValueAnimator 本质其实是利用反射将 第二个参数的set、get方法里的值给改了。所以一定得实现set、get,不然就报错 鱼的运动轨迹鱼的运行轨迹为 3阶贝塞尔曲线,所以关键就是确定4个点 已知三点求角度: 重点就是控制点2的角度 求出夹角,还得算出与X轴的夹角也就是 完整各个点: 最后游动: 鱼头的朝向,转过来 鱼头的方向 = 运动轨迹的切线的方向,这样就能平滑的转过来了。 完成 |
|
来自: wintelsui > 《好好学 Web 开发》