iOS波纹动画

最新推荐文章于 2025-11-01 11:00:37 发布

原创最新推荐文章于 2025-11-01 11:00:37 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在iOS中创建波纹扩散动画，通过在目标view周围添加layer并设置动画参数，包括动画间隔、scale变化、透明度变化和速度控制，最终实现从view边界向外扩散并逐渐透明的效果。提供了完整的代码实现，帮助读者理解和应用这种动画效果。

先看效果图：

就这么一个图，先说下思路。首先有一个目标view，为这个view添加动画之前，先要在view边上添加一个layer，因为view的layer可以调用addsublayer方法为该view添加一个图层，所以先创建一个layer。这个layer就是我们要做的动画的操作主体。

可以看到，动画效果是由view边界开始，逐步向外扩散，同时渐渐变为透明，而且每个一秒就有一个新的动画出来，感觉是一个推着一个的。速度都是相同的。

所以，可以得到想实现动画需要的动画元素：

1，有数个animation在执行。间隔周期是1s左右，时间可以自定

2，每个animation的scale是变化的，由1开始逐渐变大，每个动画的持续时间内，最大暂时设定为2倍大小。

3，每个animation的透明度是变化的。由1-》0

4，每个animation的速度相同。

按照以上逻辑，我们来实现一下，代码：

-(void)addAnimateForView:(UIView *)view withRect:(CGRect)rect{
    CALayer *layer = [CALayer layer];//创建一个layer，最后用来添加到view的图层上展示动画用
    NSInteger repeatCount = 3;//设置重复次数3次
    NSInteger keepTiming = 3;// 设置每段动画持续时间3秒
    
    for (NSInteger i = 0; i< repeatCount; i++) {//每次执行，创建相关动画
        // 每个动画对应一个图层。3个动画，需要有3个图层
        CALayer *animateLayer = [CALayer layer];
        animateLayer.borderColor = COLOR(whiteColor).CGColor;
        animateLayer.borderWidth = 3.5;
        animateLayer.frame = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
        animateLayer.cornerRadius = rect.size.height/2;
        //到此。每一个图层的大小，形状。颜色设置完毕。
        // 设置图层的scale 使用CABasicAnimation
        CABasicAnimation *basicAni = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        basicAni.fromValue = @1.0f;
        basicAni.toValue = @2.4f;
        
        //设置图层的透明度，使用关键帧动画
        CAKeyframeAnimation *keyani = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
        keyani.values = @[@1, @0.9, @0.8, @0.7, @0.6, @0.5, @0.4, @0.3, @0.2, @0.1, @0];
        keyani.keyTimes = @[@0, @0.1, @0.2, @0.3, @0.4, @0.5, @0.6, @0.7, @0.8, @0.9, @1];
        
        //我们要让一个动画同时执行scale 和 opacity的变化，需要将他们都加入到layer的动画组
        CAAnimationGroup *group = [CAAnimationGroup animation];
        group.fillMode = kCAFillModeBackwards;
        group.duration = keepTiming;
        group.repeatCount = HUGE;
        group.beginTime = CACurrentMediaTime() + (double)i * keepTiming / (double)repeatCount;
        
        group.animations = @[keyani,basicAni];
        [animateLayer addAnimation:group forKey:@"plus"];
        [layer addSublayer:animateLayer];
    }
    [view.layer addSublayer:layer];
}

到这步整个动画就完成了，外面的view调用就会实现这个效果。整体很简单

其他文章请移步个人博客：http://zhangqq166.cn/

本人创建了一个公众号，里面每天发一些教程进阶知识，有的是本人总结所得，有的是转载大神的文章，大家一起分享看。