iOS仿小红书呼吸灯动画(核心动画和定时器)两种方式实现

Odessa ·
更新时间:2024-11-14
· 993 次阅读

最近公司需求做个类似小红书的标签呼吸灯动画,经过一段时间研究使用两种方式实现了该效果...

第一种方式使用定时器加 UIView动画,核心方法如下

-(void)begigFlashAnimation { // 缩放 + 透明度动画 self.flashView.transform = CGAffineTransformMakeScale(0.1, 0.1); [UIView animateWithDuration:3 animations:^{ self.flashView.transform = CGAffineTransformMakeScale(1,1); self.flashView.alpha = 1.0; [UIView beginAnimations:@"flash" context:nil]; [UIView setAnimationDuration:2]; [UIView setAnimationCurve:UIViewAnimationCurveLinear]; self.flashView.alpha = 0; [UIView commitAnimations]; }]; }

第二种方式使用核心动画的动画组,核心方法如下

- (CAAnimationGroup *)groups { if (!_groups) { // 缩放动画 CABasicAnimation * scaleAnim = [CABasicAnimation animation]; scaleAnim.keyPath = @"transform.scale"; scaleAnim.fromValue = @0.1; scaleAnim.toValue = @1; scaleAnim.duration = 2; // 透明度动画 CABasicAnimation *opacityAnim=[CABasicAnimation animationWithKeyPath:@"opacity"]; opacityAnim.fromValue= @1; opacityAnim.toValue= @0.1; opacityAnim.duration= 2; // 创建动画组 _groups =[CAAnimationGroup animation]; _groups.animations = @[scaleAnim,opacityAnim]; _groups.removedOnCompletion = NO; _groups.fillMode = kCAFillModeForwards; _groups.duration = 2; _groups.repeatCount = FLT_MAX; } return _groups; }

对比两种方法,第一种方法需要使用定时器,第二个则不需要,不知道这样是否第二个性能性对来说会好点呢?

github项目地址:https://github.com/Caiflower/XXTwinkleView.git

demo下载:XXTwinkleView_jb51.rar

您可能感兴趣的文章:node.js中的Socket.IO使用实例node.js中Socket.IO的进阶使用技巧Nodejs中session的简单使用及通过session实现身份验证的方法基于socket.io和node.js搭建即时通信系统node.js中的socket.io入门实例iOS开发定时器的三种方法分享BOM系列第二篇之定时器requestAnimationFrameiOS中最全的各种定时器使用教程iOS中的NSTimer定时器的初步使用解析node中IO以及定时器优先级详解



呼吸灯 定时器 小红书 IOS 动画

需要 登录 后方可回复, 如果你还没有账号请 注册新账号