Swift 雷达动画

雷达动画,或者说水波动画,就是用的一个动画组。效果如下:
Mar-28-2018 19-19-01.gif
全部代码,除了两个按钮是SB上的。留有详细注释,留作以后参考。其余复制可用:

import UIKit

class ViewController: UIViewController {
    
    private let radarAnimation = "radarAnimation"
    
    private var animationLayer: CALayer?
    private var animationGroup: CAAnimationGroup?
    
    private var opBtn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        let first = makeRadarAnimation(showRect: CGRect(x: 120, y: 100, width: 100, height: 100), isRound: true)
        view.layer.addSublayer(first)

        opBtn = UIButton(frame: CGRect(x: 100, y: 450, width: 80, height: 80))
        opBtn.backgroundColor = UIColor.red
        opBtn.clipsToBounds = true
        opBtn.setTitle("Hsu", for: .normal)
        opBtn.layer.cornerRadius = 10
        view.addSubview(opBtn)
        
        let second = makeRadarAnimation(showRect: opBtn.frame, isRound: false)
        view.layer.insertSublayer(second, below: opBtn.layer)
    }

    @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 最大内切圆
        if isRound {
            shapeLayer.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height)).cgPath
        } else {
            // 矩形
            shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height), cornerRadius: 10).cgPath
        }
        
        shapeLayer.fillColor = UIColor.orange.cgColor
        // 默认初始颜色透明度
        shapeLayer.opacity = 0.0
        
        animationLayer = shapeLayer
        
        // 2. 需要重复的动态波,即创建副本
        let replicator = CAReplicatorLayer()
        replicator.frame = shapeLayer.bounds
        replicator.instanceCount = 4
        replicator.instanceDelay = 1.0
        replicator.addSublayer(shapeLayer)

        // 3. 创建动画组
        let opacityAnimation = CABasicAnimation(keyPath: "opacity")
        opacityAnimation.fromValue = NSNumber(floatLiteral: 1.0)  // 开始透明度
        opacityAnimation.toValue = NSNumber(floatLiteral: 0)      // 结束时透明底
        
        let scaleAnimation = CABasicAnimation(keyPath: "transform")
        if isRound {
            scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 0, 0, 0))      // 缩放起始大小
        } else {
            scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0))      // 缩放起始大小
        }
        scaleAnimation.toValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.5, 1.5, 0))      // 缩放结束大小
        
        let animationGroup = CAAnimationGroup()
        animationGroup.animations = [opacityAnimation, scaleAnimation]
        animationGroup.duration = 3.0       // 动画执行时间
        animationGroup.repeatCount = HUGE   // 最大重复
        animationGroup.autoreverses = false
        
        self.animationGroup = animationGroup
        
        shapeLayer.add(animationGroup, forKey: radarAnimation)
        
        return replicator
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,103评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,195评论 4 61
  • 皮之不存,毛将焉附。 人类的自由需要自己把握。
    Silencer_N阅读 708评论 0 0
  • 雷雁雄8月17日总结:今天老婆要回老家去旅游,安排我守店,本来要去继续学习的也去不了,开店一直是老婆守店,好不容易...
    雷雁雄阅读 1,625评论 0 0
  • 一 ”最近的热点好像是王者荣耀,你们谁要不去尝试写下?“。 “王者荣耀不一直是热点吗?“ ”最近特别热!因为腾讯出...
    Loiu10阅读 2,985评论 2 5