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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iOS开发定时器的三种方法分享

    前言 在开发中,很多时候我们需要用到定时器实时刷新某个数值.这个时候我们就需要用到定时器,这里,我为大家推荐三种方法,分别是:NSTimer.CADisplayLink.GCD.接下来我就一一介绍它们的用法.希望能帮到大家. 一.NSTimer(一般用于定时的更新一些非界面上的数据) 1. 创建方法 NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(action:

  • iOS中最全的各种定时器使用教程

    前言 相信一说到定时器, 我们使用最多的就是NSTimer 和 GCD 了, 还有另外一个高级的定时器 CADisplayLink;,下面将给大家详细介绍关于iOS定时器使用的相关内容,话不多说了,来一起看看详细的介绍吧. 一. NSTimer NSTimer的初始化方法有以下几种: 会自动启动, 并加入 MainRunloop 的 NSDefaultRunLoopMode 中, 注意: 这里的自动启动, 并不是马上就会启动, 而是会延迟大概一个interval的时间: + (NSTimer *

  • iOS中的NSTimer定时器的初步使用解析

    iOS中的NSTimer定时器的初步使用解析

    创建一个定时器(NSTimer) - (void)viewDidLoad { [super viewDidLoad]; [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(actionTimer:) userInfo:nil repeats:YES]; } - (void)actionTimer:(NSTimer *)timer { } NSTimer默认运行在default mode下,default

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

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

    最近公司需求做个类似小红书的标签呼吸灯动画,经过一段时间研究使用两种方式实现了该效果... 第一种方式使用定时器加 UIView动画,核心方法如下 -(void)begigFlashAnimation { // 缩放 + 透明度动画 self.flashView.transform = CGAffineTransformMakeScale(0.1, 0.1); [UIView animateWithDuration:3 animations:^{ self.flashView.transform

  • React项目仿小红书首页保姆级实战教程

    React项目仿小红书首页保姆级实战教程

    目录 前言 前期准备 项目预览 项目准备 工具 项目初始化 安装项目依赖 工程化src目录 api目录 assets目录 components目录 modules目录 pages目录,routes目录以及utils目录 页面设计思路 main.jsx App.jsx 搭建路由 首页组件分析 首页页面布局style.js Header组件 Footer组件 详情页页面分析 点赞效果实现 最后 前言 React 是一个用于构建用户界面的 Javascript库.主要用于构建UI,它起源于 Faceb

  • iOS 实现类似QQ分组样式的两种方式

    iOS 实现类似QQ分组样式的两种方式

    思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "id": 1295, "chapterName": "第一章", "parentId": 0, "chapterLevel": 0, "attachmentUrl": "", &qu

  • IOS 指纹识别两种方式详解及实例

    IOS 指纹识别两种方式详解及实例 首先引入类名: #import <LocalAuthentication/LocalAuthentication.h> 然后在实现指纹识别的地方放入如下代码: 方式一: LAContext *lacontext = [[LAContext alloc]init]; // 判断设备是否支持指纹识别 BOOL isSupport = [lacontext canEvaluatePolicy:LAPolicyDeviceOwnerAuthenticationWit

  • IOS给图片添加水印（两种方式）

    为了防止自己辛苦做的项目被别人盗走,采取图片添加水印,在此表示图片的独一无二.加水印不是在上面添加几个Label,而是我们把字画到图片上成为一个整体,下面小编给大家分享IOS给图片添加水印(两种方式). 提供一个方法,此方法只需要传递一个要加水印的图片和水印的内容就达到效果. 第一种方式: -(UIImage *)watermarkImage:(UIImage *)img withName:(NSString *)name { NSString* mark = name; int w = img

  • ios 实现倒计时的两种方式

     方法1:使用NSTimer来实现 主要使用的是NSTimer的scheduledTimerWithTimeInterval方法来每1秒执行一次timeFireMethod函数,timeFireMethod进行倒计时的一些操作,完成时把timer给invalidate掉就ok了,代码如下: secondsCountDown = 60;//60秒倒计时 countDownTimer = [NSTimer scheduledTimerWithTimeInterval:1 target:self se

  • 详解IOS 单例的两种方式

    详解IOS 单例的两种方式 方法一: #pragma mark - #pragma mark sharedSingleton methods //单例函数 static RtDataModel *sharedSingletonManager = nil; + (RtDataModel *)sharedManager { @synchronized(self) { if (sharedSingletonManager == nil) { sharedSingletonManager = [[sel

  • Android实现旋转动画的两种方式案例详解

    Android实现旋转动画的两种方式案例详解

    目录 练习案例 效果展示 前期准备 自定义 View java代码编写 方法一 方法二 易错点总结: 练习案例 视差动画 - 雅虎新闻摘要加载 效果展示 前期准备 第一步:准备好颜色数组 res => values => colors.xml <color name="orange">#FF9600</color> <color name="aqua">#02D1AC</color> <color n

  • Android仿小红书欢迎界面

    Android仿小红书欢迎界面

    1,觉得小红书的欢迎界面感觉很漂亮,就想来学习学习一下来实现类似于这种效果 . 原效果图如下: 2,根据效果我们来一点点分析 第一步:首先看一下我们的主界面布局文件视图效果如下: main_activity.xml文件代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/a

  • 使用动画实现微信读书的换一批效果(两种方式)

    先来看看微信读书的效果 实现思路 这个效果比较简单,主要是旋转view,然后在旋转结束后更换view的背景,考虑到需要旋转view,所以使用动画来实现 两种实现方式1.方式一 使用ObjectAnimator结合AnimatorSet 核心过程如下: 创建布局,一个容器,四个view,过程简单,这里不做介绍 创建两个list,一个用来存放动画,一个用来存放view 使用ObjectAnimator创建四个动画,然后将动画放到list中 设置动画监听,动画结束时更换view背景 核心代码如下: p

随机推荐