自定义View+属性动画实战 — 灵动的锦鲤

通过自定义View+属性动画 实现一个会动鱼

分析：

1.画一条鱼

2.鱼原地动

3.鱼向点击处游动

鱼分为：鱼头（圆） + 身体（两条直线+两条贝塞尔曲线） + 鱼鳍（一条直线+一个贝塞尔）+尾巴（两三角）+节肢*2 （梯形+两圆）

先把鱼水平朝右，画一个坐标系，鱼的重心为坐标系中心

头圆半径的4.19倍，这个其实是自己定的，5f,6f都行，就是只改变鱼的长度，用鱼头半径做初始单位有利于改变整个鱼的大小。

初中知识：

所以可以得出： 入参一个点、两点长度、对于x轴的角度。返回值 一个坐标

定义画笔

mPaint.setDither(true)防抖动

mPaint.setAntiAlias(true)抗锯齿

画鱼头：找到鱼头圆心，入参：重心、鱼身长一半、鱼的朝向（默认180跟重心一个方向）

画鱼鳍

鱼鳍是一个直线+一个二阶贝塞尔曲线，所以重点就是求出三个点：鱼鳍左点、右点、贝塞尔控制点

通过鱼头的圆心求，距离 0.9 * R ，角度110 。通过那个公式就能求出来 = 右鱼鳍点

左鱼鳍点 = 右鱼鳍点、距离、角度-180

贝塞尔控制点 = （这个完全靠自己试，只影响鱼鳍的胖瘦） 右鱼鳍点、距离 * 1.8f、角度 115

试贝塞尔的网站： cubic-bezier.com/#.17,.67,.8…

三个点都有了，绘制鱼鳍：

绘制之前要将其他绘制重置： mPath.reset()

然后mPath.moveTo()移动到第一个点

mPath.lineTo()画直线

mPath.quadTo()画二阶贝塞尔曲线，入参第二个点、第三个点

最后 canvas.drawPath(mPath,mPaint)直接画出来

最后一个点不用封闭，系统自动会封闭。

别的部分也都差不多，根据那个公式，通过参考点求出另一个点，然后求出各个部分的点，最后连线画就行

然后

mPath.reset()、 mPath.moveTo、 mPath.lineTo、canvas.drawPath

画身体

求出这6个点就行

鱼原地摆动需要属性动画ValueAnimator

属性动画，给一个值，一直变，

如： ValueAnimator.ofFloat(0,1f) 就是将一个float值 从0f变到1f

setRepeatCount设置重复次数

setRepeatMode设置重复模式

setInterpolator设置插值器

Interpolator（插值器）系统提供了很多插值器：先加速在减速、加速、匀速、周期运动、先回退再加速、最后d一下等等。如果不够用可以自定义。

在监听里面能取到当前的值，然后通过 invalidateSelf()刷新重绘

通过这个变化的值，去改变鱼头的角度，这能实现鱼的摆动（比如鱼头摆动5度，节肢1摆动10度，节肢2摆动20度）这样不同的幅度就让鱼动起来。

鱼尾是通过改变三角的大小来实现的，幅度规律应该跟节肢2一样。

鱼尾是上节（节肢1）带动（节肢2）来运动的，而且是周期规律性的运动

说到周期性运动，又很平滑。sin、cos刚好是这样的

所以可以用sin代替0~1f的动画，这样更加平滑。cos刚好比sin多一个象限，那么节肢2刚好可以被节肢1带着。

鱼整条都是定义在FishDrawable的，用FishRelativeLayout，addView去将ImageView加进来FishDrawable

在onTouchEvent里记录下点击（X,Y），然后根据属性动画去改变圆半径和透明度

ObjectAnimator

ObjectAnimator extends ValueAnimator

效果是一样的，将一个属性从 X值改到Y值。可以不用写监听了addListener

入参1.要改变的对象，2.要改变的值（必须实现set方法），3.初始值，4.终点值 -- （或者路径Path）

本质其实是利用反射将 第二个参数的set、get方法里的值给改了。所以一定得实现set、get，不然就报错

鱼的运行轨迹为 3阶贝塞尔曲线，所以关键就是确定4个点

重点就是控制点2的角度

求出夹角，还得算出与X轴的夹角也就是

// AB连线与X的夹角的tan值 - OB与x轴的夹角的tan值 float direction = (A.y - B.y) / (A.x - B.x) - (O.y - B.y) / (O.x - B.x)

完整各个点：

最后游动：

path.cubicTo（）三阶贝塞尔曲线公式

通过ObjectAnimator属性动画改变ImageView的xy坐标。

通过fishDrawable.setFrequence(3f) 让鱼在游动的时候运动的更快

鱼头的朝向，转过来

鱼头的方向 = 运动轨迹的切线的方向，这样就能平滑的转过来了。

通过取到曲线执行的百分比得到

pathMeasure.getPosTan()

tanα值，然后转换成角度

完成

最近比较闲,提前为下个项目中需要用得到功能造个轮子.alertView在项目中应该经常用的到,然而用自带的系统控件多少缺乏点儿激情.于是打算给alertView加上一点点儿动画,(这里的动画用到的是faceBook的POP)提高用户体验.话不多说.看效果图先:

第一个是d出提示信息后自动消失的alertView

第二个是d出带有button的alertView

接下来大体说一下思路:

类

在.h中:

AbstractBasicAlertView 基类里面定义了所有需要用到的控件的属性 title subTitle message buttonsTitle contentView autoHiden delayAutoHidenDuration 以及方法: -(void)show -(void)hide -(void)setView:(UIView *)view withKey:(NSString *)key和 -(UIView *)viewWithKey:(NSString *)key

以及协议方法:协议方法会在viewController中使用到的时候说明他们的意思

这两个方法是将view根据key放入字典中存起来,在viewController中会有用到

初始化:

}

}

}

---