iOS如何实现抖音点赞功能
导读:本文共3095.5字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:接下来,请跟着小编一起来学习吧!三角形的贝塞尔曲线原理从上述两张图中,我们可以看到 它是一个 三角形的贝塞尔曲线这样的动画需要经过:2π (360°)旋转一周圆一周一共有六个 三角形的贝赛尔曲线图形形状.一个动画组 内部包含缩放动画 从0~1的放大 ,动画如果执行10秒,那么 scale缩放动画执行 100.2 = 2秒, 动画组中还包含另一个动画是 从结束位置的动画... ...
目录
(为您整理了一些要点),点击可以直达。接下来,请跟着小编一起来学习吧!
三角形的贝塞尔曲线原理
从上述两张图中,我们可以看到 它是一个 三角形的贝塞尔曲线
这样的动画需要经过:
2π (360°)旋转一周
圆一周一共有六个 三角形的贝赛尔曲线图形形状.
一个动画组 内部包含缩放动画 从0~1的放大 ,动画如果执行10秒,那么 scale缩放动画执行 100.2 = 2秒, 动画组中还包含另一个动画是 从结束位置的动画到结尾消失的位置大小变化直到动画消失.
沿着圆形每 60°角度 创建一个上图的三角形图形.
说了这么多 实际就是用CABasicAnimation
的keypath是path
和CABasicAnimation
的keypath
是transform.scale
的动画组合在一起作用于一个三角形上,并且一共创建6个三角形图形.
结束的时候实际上是一个从 上一次动画执行完成的path向 一条线上三个点的path过渡的过程,直到最后隐藏消失.
好下面我们来实现一下这个动画
代码实现
首先我们子类话一个ZanLikeView
继承自UIView
并设置底部的图片和点击变换的❤️图片,就是两张UIImageView加手势,当点击的时候区分不同view的tag就知道哪个imageview点击,这样就可以做两张动画不同的效果了,不过这些可以参考demo.
我主要介绍核心代码
创建 CAShapeLayer
创建 CAShapeLayer
用于做形状图形相关的图形动画.
CAShapeLayerlayer=[[CAShapeLayeralloc]init];
layer.position=_likeBefore.center;
layer.fillColor=[UIColorredColor].CGColor;
颜色最终可对外暴露接口
for循环每 30°角创建一个上述的三角形.我们需要创建 6个 就循环6次
创建初始位置的贝塞尔path
CGFloatlength=30;
CGFloatduration=0.5f;
for(inti=0;i<6;i++){
CAShapeLayerlayer=[[CAShapeLayeralloc]init];
layer.position=_likeBefore.center;
layer.fillColor=[[UIColorredColor].CGColor;
//...1
//...2
//...3
}
这里我们一共创建6个shapeLayer的实例并填充成颜色,我们这里填充的是红色 其它的颜色可自行封装.
_likeBefore 是我们看到白色的❤️背景视图(UIImageView)
下面 在//... 1
的地方加入如下代码
UIBezierPathstartPath=[UIBezierPathbezierPath];
[startPathmoveToPoint:CGPointMake(-2,-length)];
[startPathaddLineToPoint:CGPointMake(2,-length)];
[startPathaddLineToPoint:CGPointMake(0,0)];
然后创建完成我们需要把path给layer.path. 记得转成CGPath
layer.path=startPath.CGPath;
layer.transform=CATransform3DMakeRotation(M_PI/3.0fi,0.0,0.0,1.0);
[self.layeraddSublayer:layer]
注: CATransform3DMakeRotation()函数 当x,y,z值为0时,代表在该轴方向上不进行旋转,当值为-1时,代表在该轴方向上进行逆时针旋转,当值为1时,代表在该轴方向上进行顺时针旋转
因为我们是需要60°创建一个layer所以需要顺时针 M_PI / 3.0f = 60°. 每循环一次则创建第N个角度乘
60°.
接着在//... 2
添加如下代码
//动画组
CAAnimationGroupgroup=[[CAAnimationGroupalloc]init];
group.removedOnCompletion=NO;
group.timingFunction=[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.fillMode=kCAFillModeForwards;
group.duration=duration;
//缩放动画
CABasicAnimationscaleAnim=[CABasicAnimationanimationWithKeyPath:@"transform.scale"];
scaleAnim.fromValue=@(0.0);
scaleAnim.toValue=@(1.0);
scaleAnim.duration=duration0.2f;//注意这里是在给定时长的地方前0.2f的时间里执行缩放
这里说下duration 0.2f. 比如我给定 10秒的duration,那么 duration 0.2 = 2 秒执行缩放.
最后在//... 3
的代码出加上如下代码
//结束点
UIBezierPathendPath=[UIBezierPathbezierPath];
[endPathmoveToPoint:CGPointMake(-2,-length)];
[endPathaddLineToPoint:CGPointMake(2,-length)];
[endPathaddLineToPoint:CGPointMake(0,-length)];
CABasicAnimationpathAnim=[CABasicAnimationanimationWithKeyPath:@"path"];
pathAnim.fromValue=(bridgeid)layer.path;
pathAnim.toValue=(bridgeid)endPath.CGPath;
pathAnim.beginTime=duration0.2f;
pathAnim.duration=duration0.8f;
[groupsetAnimations:@[scaleAnim,pathAnim]];
[layeraddAnimation:groupforKey:nil];
这几行代码的意识是 从我们上一个layer的path位置开始向我们结束位置的path过渡,并且注意开始时间pathAnim.beginTime
是 duration 0.2也就是说 在上一个动画结束的时间点才开始结束过渡,过渡的时长剩余是duration 0.8.这样两个连贯在一起的动画就执行完了,最后把动画加到动画组 天加给layer.
剩余的工作就是做个普通的动画的 基本没什么了.
[UIViewanimateWithDuration:0.35f若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
delay:0.0f
options:UIViewAnimationOptionCurveEaseIn
animations:^{
self.likeAfter.transform=CGAffineTransformScale(CGAffineTransformMakeRotation(-M_PI_4),0.1f,0.1f);
}
completion:^(BOOLfinished){
[self.likeAftersetHidden:YES];
self.likeBefore.userInteractionEnabled=YES;
self.likeAfter.userInteractionEnabled=YES;
}];
iOS如何实现抖音点赞功能的详细内容,希望对您有所帮助,信息来源于网络。