iOS 实现点赞动画特效

最新推荐文章于 2024-05-13 09:56:46 发布

mayifan_blog

最新推荐文章于 2024-05-13 09:56:46 发布

阅读量3k

点赞数

分类专栏： iOS开发文章标签： iOS 动画的使用 iOS 实现点赞特效 iOS CAShapeLayer IOS UIBezierPath iOS 逐帧动画和动画组

本文链接：https://blog.csdn.net/mayifan_blog/article/details/89266383

版权

本文介绍了在iOS中如何实现点赞动画特效，详细讲解了动画基础、CAShapeLayer和UIBezierPath的使用，以及如何创建逐帧动画和动画组。通过设置贝塞尔曲线路径和layer属性，实现心形图案的动态变化效果。

摘要由CSDN通过智能技术生成

动画的基本使用

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

[UIView animateKeyframesWithDuration:self.animationDurtion * 4 delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{
   
            /*参数1:关键帧开始时间
              参数2:关键帧占用时间比例
              参数3:到达该关键帧时的属性值 */
            [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 * self.animationDurtion animations:^{
   
                giveLikeView.transform =  CGAffineTransformMakeScale(3, 3);;
            }];
            [UIView addKeyframeWithRelativeStartTime:0.5 * self.animationDurtion relativeDuration:0.5 * self.animationDurtion animations:^{
   
                giveLikeView.transform = CGAffineTransformIdentity;
            }];
            [UIView addKeyframeWithRelativeStartTime:self.animationDurtion relativeDuration:self.animationDurtion * 3 animations:^{
   
                giveLikeView.alpha = 0;
            }];
        } completion:^(BOOL finished) {
   
            giveLikeView.hidden = YES;
            [giveLikeView removeFromSuperview];
        }];

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

   UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2) radius:giveLikeView.bounds.size.width startAngle:-1.57 endAngle:-1.57+3.14*2 clockwise:YES];
    circleLayer.path = bezierPath.CGPath;
    [self.layer addSublayer:circleLayer];