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

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

呼吸灯效果.gif

第一种方式使用定时器加 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;
}

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

稍后添加 demo链接,如有更好的方法请联系我~
Demo链接:https://github.com/Caiflower/XXTwinkleView.git
喜欢请点个赞~ 3q