服务器之家

服务器之家 > 正文

iOS实现数字倍数动画效果

时间:2021-05-21 14:07     来源/作者:G_猿

前言

一个简单的利用 透明度和 缩放 实现的 数字倍数动画

效果图:

iOS实现数字倍数动画效果

实现思路

上代码 看比较清晰

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 数字跳动动画
- (void)labeldanceanimation:(nstimeinterval)duration {
 //透明度
 cabasicanimation *opacityanimation = [cabasicanimation animationwithkeypath:@"opacity"];
 opacityanimation.duration = 0.4 * duration;
 opacityanimation.fromvalue = @0.f;
 opacityanimation.tovalue = @1.f;
 
 //缩放
 cakeyframeanimation *scaleanimation = [cakeyframeanimation animationwithkeypath:@"transform.scale"];
 scaleanimation.duration = duration;
 scaleanimation.values = @[@3.f, @1.f, @1.2f, @1.f];
 scaleanimation.keytimes = @[@0.f, @0.16f, @0.28f, @0.4f];
 scaleanimation.removedoncompletion = yes;
 scaleanimation.fillmode = kcafillmodeforwards;
 
 caanimationgroup *animationgroup = [caanimationgroup animation];
 animationgroup.animations = @[opacityanimation, scaleanimation];
 animationgroup.duration = duration;
 animationgroup.removedoncompletion = yes;
 animationgroup.fillmode = kcafillmodeforwards;
 
 [self.combolabel.layer addanimation:animationgroup forkey:@"kcomboanimationkey"];
}

利用一个透明度从 0 ~ 1之间的alpha,然后缩放 之后加到动画组实现一下就好了

切记动画完成最好移除 否则可能引起动画内存问题

这里设置斜体字体

?
1
self.combolabel.font = [uifont fontwithname:@"avenirnext-bolditalic" size:50];

看着比较明显

最后按钮点击的时候调用

?
1
2
3
4
5
- (ibaction)clickaction:(uibutton *)sender {
 self.dancecount++;
 [self labeldanceanimation:0.4];
 self.combolabel.text = [nsstring stringwithformat:@"+ %tu",self.dancecount];
}

如果实现 dozen动画的话很简单, dancecount % 10 == 0 求模就行了.

总结

这个动画比较适合 有些直播场景的点击操作计数相关.

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对服务器之家的支持。

原文链接:https://segmentfault.com/a/1190000018326524

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部