iOS实现点赞动画特效

本文实例为大家分享了ios实现点赞动画特效的具体代码，供大家参考，具体内容如下

动画的基本使用

动画的实现基本上是基于对view控件和view的layer属性进行操作，对视图进行移动，尺寸变换，透明度变换，旋转等一系列操作。

关键帧动画：

动画的实现可以分为两个部分，一部分是规定动画的变化内容，比如view需要把scale从0变化到1，这个数字是相对值，即从尺寸为0变化到正常尺寸。另一个部分是规定动画的渐变时间。这样就实现了view在规定时间完成指定变化了，这个变化的过程也可以通过参数设置为非均匀变化的。上面的示例是关键帧动画的实现，实现的方式是把动画划分为几个部分，“第一帧”做一件事，“第二帧”再做另外一件事，这就使得变化连续且可控。duration参数确定了时间，delay确定了延时多久执行，options确定了关键帧动画布局子控件。completion的参数是一个block，其中的内容是在内容执行结束后才调用。这里做了3帧，前两帧做了尺寸变为3倍然后恢复，后一帧使得其隐藏。结束后会调用block使其移除。

cashapelayer和uibezierpath：

当不满足于view的变化，还需要在view的表面绘制一些图案，就要对layer进行操作，layer可以理解为是view的表面，每个view都有layer参数。uibezierpath是贝塞尔曲线，它用于设置绘图的路径，没有了它，layer的绘制也是无效的，因为没有边界呀。
如下代码绘制了一个圆形的曲线，设置了它的中心，半径，起始终止角这些属性。

在最后我们可以看到：circlelayer.path = bezierpath.cgpath; [self.layer addsublayer:circlelayer];
它的作用是设置layer的路径，并把layer添加到view的表面。下面来看看layer的配置。
创建一个layer后设置它的frame和颜色以及边界，线宽这些属性。

几处联系：把贝塞尔曲线和layer联系起来，把layer和view的layer联系起来。

为layer加动画（动画组）：

先创建动画组caanimationgroup，它可以容纳若干动画，然后创建若干cabasicanimation基础动画。分别设置属性，动画组需要涉及的属性有时间功能，kcamediatimingfunctioneasein表示逐渐加快，另外还有设置持续时间，设置kcafillmodeforwards表示动画在结束后会保持，removedoncompletion = no表示最后不移除。在基础动画的设置中，一般设置在动画组中的起始时间和持续时间，还有参数的变化。最后的 group.animations = @[scaleanimtion,widthstartanimtion,widthendanimtion];[circlelayer addanimation:group forkey:nil];
两句表示在动画组中添加动画然后为layer添加动画组，这样layer就有动画特效了。

点赞动画的实现原理

下面来介绍demo的实现原理。

controller的尺寸设置为全屏，在其上方也覆盖一个全屏的view，再在view上添加点击事件（手势）。

下面看看点击后调用的方法：

这里每次点击都会获取点击的位置然后去初始化一个爱心，这是异步任务，放在主队列中执行。

这段代码创建了视图对象，这里自然用到了事先创建好的心形图片。这里把创建的imageview存到队列，显示到view上，最后调用likeaction:方法执行动画。

我们看看givelikeaction：这个方法，它包括执行心形的变化动画和绘制六个辐射的三角形动画，还有辐散的圆的动画。

接下来直接看看辐散的三角形的动画（爱心的变化动画在上面已经涉及到了）：
这段代码跑了6个循环，做了6个三角形，它们分别有动画效果。
shape.transform = catransform3dmakerotation(3.14 / 3 * i, 0, 0, 1);实现了旋转。
[givelikeview.layer addsublayer:shape];执行layer的添加。
因为在循环中，每个layer都有独立的动画，动画组实现的效果是三角形从小变大，最后变成一条直线并消失。
下面的两行代码用到了__bridge，它的作用是实现类型的转换，这里把cgpathref类型“桥接”转化为了id类型，如果没有它，会报错。
pathanimation.fromvalue = (__bridge id)startpath.cgpath;
pathanimation.tovalue = (__bridge id)endpath.cgpath;

demo实现的动画效果

demo的github链接

最后附上demo链接：myfgivelikeanimationdemo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。