swift 的水波动画或雷达动画效果

本文介绍了一种在iOS开发中实现动画扩散效果的方法,通过使用CALayer和CAAnimationGroup,结合图片视图和动态波动画,创建了一个可以扩散的雷达动画效果。详细解释了代码中的关键步骤,包括设置动画参数、添加动画到视图以及如何控制动画的开始和停止。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

刚接触不久iOS开发,拖拉拽开始学习,代码还没接触过,但还算看的半懂!

做成动画扩散效果,这图不是动态的,是我直接截图下来的;

拿别人的代码自己删改了一些,然后加一些自己理解的注释上去,就成这样了!记录下来

1. 在图片名 那里加入一张自己文件中的图片名,

2.如果你的动图中间不想要图片,就把在动图中间加入了图片这句下的代码注释掉,把没有加入图片这句下的代码放开注释就可以了

import UIKit

class ViewController: UIViewController {
    
    private let radarAnimation = "radarAnimation"   //对象1
    private var animationLayer: CALayer?        //对象2
    private var animationGroup: CAAnimationGroup?       //对象3
    private var imageview : UIImageView!    //定义图片view

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
//没有加入图片
        //let first = makeRadarAnimation(showRect: CGRect(x: 120, y: 200, width: 150, height: 150), isRound: true)    //调用 方法:makeRadarAnimation(...)
       // view.layer.addSublayer(first)   //显示动画 调用显示
        
//在动图中间加入了图片
        imageview = UIImageView(frame: CGRect(x: 120, y: 200, width: 150, height: 150))
        imageview.image = 图片名   //图片
        view.addSubview(imageview) //把图片放到view中去
        let imagev = makeRadarAnimation(showRect: imageview.frame, isRound: true)
        view.layer.insertSublayer(imagev, below: imageview.layer) //动画显示 将图片压后放后放
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    //动作-开始 按钮
    @IBAction func startAction(_ sender: UIButton) {
        animationLayer?.add(animationGroup!, forKey: radarAnimation)
    }
    //动作-停止 按钮
    @IBAction func stopAction(_ sender: UIButton) {
        animationLayer?.removeAnimation(forKey: radarAnimation)
    }
    
    // 动态波的方法
    private func makeRadarAnimation(showRect: CGRect, isRound: Bool) -> CALayer {
        // 1. 一个动态波
        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = showRect
        // showRect 最大内切圆
        shapeLayer.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height)).cgPath
        shapeLayer.fillColor = UIColor.white.cgColor    //波纹颜色
        shapeLayer.opacity = 0.0    // 默认初始颜色透明度
        animationLayer = shapeLayer     //全局对象2 animationLayer
        
        // 2. 创建动画组 from -> to 透明比例过渡
        let opacityAnimation = CABasicAnimation(keyPath: "opacity")
        opacityAnimation.fromValue = NSNumber(floatLiteral: 1.0)  // 开始透明度
        opacityAnimation.toValue = NSNumber(floatLiteral: 0)      // 结束时透明底
        
        // 3. 波纹动画 起始大小
        let scaleAnimation = CABasicAnimation(keyPath: "transform")
        if isRound {
            scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0))      // 缩放起始大小
        } else {
            scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.5, 1.5, 0))      // 缩放起始大小
        }
        scaleAnimation.toValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 2.0, 2.0, 0))      // 缩放结束大小
        
        // 4. 定义波的运行时间
        let animationGroup = CAAnimationGroup()
        animationGroup.animations = [opacityAnimation, scaleAnimation]  //引用opacityAnimation 和 scaleAnimation
        animationGroup.duration = 3.0       // 动画执行时间
        animationGroup.repeatCount = HUGE   // 最大重复
        animationGroup.autoreverses = false
        
        self.animationGroup = animationGroup    //全局对象3  animationGroup
        shapeLayer.add(animationGroup, forKey: radarAnimation)  //全局对象1 radarAnimation
        
        // 5. 需要重复的动态波,数量,缩放起始点 <=> 创建副本
        let replicator = CAReplicatorLayer()
        replicator.frame = shapeLayer.bounds
        replicator.instanceCount = 4
        replicator.instanceDelay = 1.0
        replicator.addSublayer(shapeLayer)
        
        return replicator
    }

}

参考来源:https://blog.youkuaiyun.com/xxh0307/article/details/80069007

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逸曦穆泽

您的鼓励是我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值