本篇文章主要介绍了iOS仿小红书呼吸灯动画(核心动画和定时器)两种方式实现,非常具有实用价值,需要的朋友可以参考下
最近公司需求做个类似小红书的标签呼吸灯动画,经过一段时间研究使用两种方式实现了该效果...

第一种方式使用定时器加 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程学习网。
织梦狗教程
本文标题为:iOS仿小红书呼吸灯动画(核心动画和定时器)两种方式实现
基础教程推荐
猜你喜欢
- IOS应用内跳转系统设置相关界面的方法 2022-11-20
- 解决Android Studio突然不显示logcat日志的问题 2023-02-04
- android studio按钮监听的5种方法实例详解 2023-01-12
- Flutter手势密码的实现示例(附demo) 2023-04-11
- Flutter绘图组件之CustomPaint使用详解 2023-05-12
- iOS开发教程之XLForm的基本使用方法 2023-05-01
- Android多返回栈技术 2023-04-15
- Android开发使用RecyclerView添加点击事件实例详解 2023-06-15
- IOS 播放系统提示音使用总结(AudioToolbox) 2023-03-01
- Android中的webview监听每次URL变化实例 2023-01-23
