这篇文章汇总了几种我在学习与工作中遇到的几种动画，在此记录一下以便自己以后复习，同时也希望与大家交流学习。

Talk is cheap, Show me the code.

1、画线动画及沿路径移动

self.view.backgroundColor = UIColor.init(red: 44/255.0, green: 34/255.0, blue: 85/255.0, alpha: 1)
        let bezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 50, y: 100))
        bezierPath.addLine(to: CGPoint(x: 325, y: 100))
        bezierPath.addLine(to: CGPoint(x: 80, y: 250))
        bezierPath.addLine(to: CGPoint(x: 275, y: 250))
        bezierPath.addLine(to: CGPoint(x: self.view.frame.width/2.0, y: 220))
        bezierPath.addLine(to: CGPoint(x: self.view.frame.width/2.0, y: 400))
        bezierPath.addLine(to: CGPoint(x: 30, y: 400))
        bezierPath.addLine(to: CGPoint(x: 345, y: 400))
        
        //画线
        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = UIColor.purple.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineWidth = 2
        shapeLayer.lineJoin = kCALineJoinRound
        shapeLayer.lineCap = kCALineCapRound
        shapeLayer.path = bezierPath.cgPath
        view.layer.addSublayer(shapeLayer)
        
        let pathAnim = CABasicAnimation(keyPath: "strokeEnd")
        pathAnim.duration = 5.0
        pathAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        pathAnim.fromValue = 0//开始
        pathAnim.toValue = 1//到100%
        pathAnim.autoreverses = true// 动画按原路径返回
        pathAnim.fillMode = kCAFillModeForwards
        //        pathAnim.isRemovedOnCompletion = false
        pathAnim.repeatCount = Float.infinity
        shapeLayer.add(pathAnim, forKey: "strokeEndAnim")
        
        
        //视图沿路径移动
        let moveV = UIImageView.init(image: UIImage.init(named: ""))
        moveV.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
        moveV.backgroundColor = UIColor.red
        moveV.center = CGPoint(x: 50, y: 100)
        view.addSubview(moveV)
        
        let keyAnima = CAKeyframeAnimation.init(keyPath: "position")
//        keyAnima.delegate = self
        keyAnima.duration = 5.0
        keyAnima.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut)
        keyAnima.path = bezierPath.cgPath
        keyAnima.fillMode = kCAFillModeForwards//动画开始之后layer的状态将保持在动画的最后一帧，而removedOnCompletion的默认属性值是 YES，所以为了使动画结束之后layer保持结束状态，应将removedOnCompletion设置为NO
        keyAnima.isRemovedOnCompletion = false
        moveV.layer.add(keyAnima, forKey: "moveAnimation")

2、水面波浪

 lazy var waveDisplaylink = CADisplayLink()
    
    lazy var firstWaveLayer = CAShapeLayer()
    
    lazy var secondWaveLayer = CAShapeLayer()
    
    var firstWaveColor: UIColor?
    
    /// 水纹振幅
    var waveA: CGFloat = 10
    
    /// 水纹周期
    var waveW: CGFloat = 1/30.0;
    
    /// 位移
    var offsetX: CGFloat = 0
    
    /// 当前波浪高度Y
    var currentK: CGFloat = 0
    
    /// 水纹速度
    var waveSpeed: CGFloat = 0
    
    /// 水纹路宽度
    var waterWaveWidth: CGFloat = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.init(red: 44/255.0, green: 34/255.0, blue: 85/255.0, alpha: 1)
        self.view.layer.masksToBounds = true
        
        
        setUpUI()
        
    }
    
    
    func setUpUI () {
        
        // 波浪宽
        waterWaveWidth = self.view.bounds.size.width
        // 波浪颜色
        firstWaveColor = UIColor.green
        // 波浪速度
        waveSpeed = 0.4 / CGFloat(M_PI)
        // 设置闭环的颜色
        firstWaveLayer.fillColor = UIColor.init(colorLiteralRed: 73/255.0, green: 142/255.0, blue: 178/255.0, alpha: 0.5).cgColor
        // 设置边缘线的颜色
        //        firstWaveLayer.strokeColor = UIColor.blue.cgColor
        firstWaveLayer.strokeStart = 0.0
        firstWaveLayer.strokeEnd = 0.8
        // 设置闭环的颜色
        secondWaveLayer.fillColor = UIColor.init(colorLiteralRed: 73/255.0, green: 142/255.0, blue: 178/255.0, alpha: 0.5).cgColor
        // 设置边缘线的颜色
        //        secondWaveLayer.strokeColor = UIColor.blue.cgColor
        secondWaveLayer.strokeStart = 0.0
        secondWaveLayer.strokeEnd = 0.8
        self.view.layer.addSublayer(firstWaveLayer)
        self.view.layer.addSublayer(secondWaveLayer)
        
        // 设置波浪流动速度
        waveSpeed = 0.05
        // 设置振幅
        waveA = 8
        // 设置周期
        waveW = 2 * CGFloat(M_PI) / self.view.bounds.size.width
        // 设置波浪纵向位置
        currentK = self.view.bounds.size.height / 2 //屏幕居中
        
        waveDisplaylink = CADisplayLink(target: self, selector: #selector(getCurrentWave))
        waveDisplaylink.add(to: RunLoop.current, forMode: .commonModes)
        
    }
    
    
    @objc private func getCurrentWave(disPlayLink: CADisplayLink) {
        // 实时位移
        offsetX += waveSpeed
        setCurrentFirstWaveLayerPath()
    }
    
    private func setCurrentFirstWaveLayerPath() {
        // 创建一个路径
        let path = CGMutablePath()
        var y = currentK
        path.move(to: CGPoint(x: 0, y: y))
        
        for i in 0...Int(waterWaveWidth) {
            y = waveA * sin(waveW * CGFloat(i) + offsetX) + currentK
            path.addLine(to: CGPoint(x: CGFloat(i), y: y))
        }
        
        path.addLine(to: CGPoint(x: waterWaveWidth, y: self.view.bounds.size.height))
        path.addLine(to: CGPoint(x: 0, y: self.view.bounds.size.height))
        path.closeSubpath()
        firstWaveLayer.path = path
        
        // 创建一个路径
        let path2 = CGMutablePath()
        var y2 = currentK
        path2.move(to: CGPoint(x: 0, y: y))
        
        for i in 0...Int(waterWaveWidth) {
            y2 = waveA * sin(waveW * CGFloat(i) + offsetX - waterWaveWidth/2 ) + currentK
            path2.addLine(to: CGPoint(x: CGFloat(i), y: y2))
        }
        
        path2.addLine(to: CGPoint(x: waterWaveWidth, y: self.view.bounds.size.height))
        path2.addLine(to: CGPoint(x: 0, y: self.view.bounds.size.height))
        path2.closeSubpath()
        secondWaveLayer.path = path2
    }

3、雪花飘落动画

func snowAnimation() {
        
        //粒子发射器
        let snowEmitter = CAEmitterLayer()
        //粒子发射的位置
        snowEmitter.emitterPosition = CGPoint(x: 100, y: 30)
        //发射源的大小
        snowEmitter.emitterSize = CGSize(width: self.view.bounds.size.width, height: 0)
        //发射模式
        snowEmitter.emitterMode = kCAEmitterLayerOutline
        //发射源的形状
        snowEmitter.emitterShape = kCAEmitterLayerLine
                
        //创建雪花粒子
        let cell = CAEmitterCell()
        //粒子的名称
        cell.name = "snow"
        //粒子参数的速度乘数因子。越大出现的越快
        cell.birthRate = 1.0
        //存活时间
        cell.lifetime = 120.0
        //粒子速度
        cell.velocity = -10
        //粒子速度范围
        cell.velocityRange = 10
        //粒子y方向的加速度分量
        cell.yAcceleration = 3
        //周围发射角度
        cell.emissionRange = CGFloat(0.5 * M_PI)
        //粒子旋转角度范围
        cell.spinRange = CGFloat(0.25 * Double.pi)
        //粒子图片
        cell.contents = UIImage.init(named: "snow")?.cgImage
        //粒子颜色
        cell.color = UIColor.white.cgColor
        
        //设置阴影
        snowEmitter.shadowOpacity = 1.0
        snowEmitter.shadowRadius = 0.0
        snowEmitter.shadowOffset = CGSize(width: 0.0, height: 1.0)
        snowEmitter.shadowColor = UIColor.white.cgColor
            
        // 将粒子添加到粒子发射器上
        snowEmitter.emitterCells = [cell]
        
        self.view.layer .addSublayer(snowEmitter)
    }

4、烟花动画

/// 烟花粒子动画
    func fireworksAnimation() {
        
        //分为3种粒子，子弹粒子，爆炸粒子，散开粒子
        let fireworkEmitter = CAEmitterLayer()
        fireworkEmitter.emitterPosition = CGPoint(x: self.view.bounds.size.width/2.0, y: self.view.bounds.size.height)
        fireworkEmitter.emitterSize = CGSize(width: self.view.bounds.size.width/2.0, height: 0.0)
        fireworkEmitter.emitterMode = kCAEmitterLayerOutline
        fireworkEmitter.emitterShape = kCAEmitterLayerLine
        fireworkEmitter.renderMode = kCAEmitterLayerAdditive
        fireworkEmitter.seed = (arc4random()%100)+1
        
        // Create the rocket
        let rocket = CAEmitterCell()
        
        rocket.birthRate = 1.0
        rocket.velocity = 380
        rocket.velocityRange = 100
        rocket.yAcceleration = 75
        rocket.lifetime = 1.02
        
        //小圆球图片
        rocket.contents         = UIImage.init(named: "dot")?.cgImage
        rocket.scale            = 0.2;
        rocket.color            = UIColor.yellow.cgColor
        rocket.greenRange       = 1.0;      // different colors
        rocket.redRange         = 1.0;
        rocket.blueRange        = 1.0;
        rocket.spinRange        = CGFloat(M_PI);        // slow spin
        
        // the burst object cannot be seen, but will spawn the sparks
        // we change the color here, since the sparks inherit its value
        let burst = CAEmitterCell()
        
        burst.birthRate         = 1.0;      // at the end of travel
        burst.velocity          = 0;        //速度为0
        burst.scale             = 2.5;      //大小
        burst.redSpeed = -1.5// shifting
        burst.blueSpeed = +1.5
        burst.greenSpeed = +1.0
        burst.lifetime          = 0.35;     //存在时间
        
        // and finally, the sparks
        let spark = CAEmitterCell()
        
        spark.birthRate         = 400;
        spark.velocity          = 125;
        spark.emissionRange     = CGFloat(2 * M_PI);    // 360 度
        spark.yAcceleration     = 75;       // gravity
        spark.lifetime          = 3;
        //星星图片
        spark.contents          = UIImage.init(named: "star")?.cgImage
        spark.scaleSpeed        = -0.2;
        spark.greenSpeed = -0.1;
        spark.redSpeed = 0.4;
        spark.blueSpeed = -0.1;
        spark.alphaSpeed = -0.25;
        spark.spin = CGFloat(2 * M_PI)
        spark.spinRange = CGFloat(2 * M_PI)
        
        // 3种粒子组合，可以根据顺序，依次烟花弹－烟花弹粒子爆炸－爆炸散开粒子
        fireworkEmitter.emitterCells    = [rocket];
        rocket.emitterCells             = [burst];
        burst.emitterCells              = [spark];
        self.view.layer.addSublayer(fireworkEmitter)
    }

5、火苗效果

/// 火焰效果
    func fireAnimation() {
        
        // 发射器在xy平面的中心位置
        fireEmitter.emitterPosition = view.center
        // 发射器的尺寸大小
        //        fireEmitter.emitterSize = CGSize(width: 20, height: 60)
        // 发射器的发射模式
        //        fireEmitter.emitterMode = kCAEmitterLayerOutline
        //        // 发射器的形状
        fireEmitter.emitterShape = kCAEmitterLayerCircle
        // 发射器渲染模式
        fireEmitter.renderMode = kCAEmitterLayerAdditive
        
        // 发射单元 - 火焰
        let fire = CAEmitterCell()
        // 粒子的创建速率，默认为1/s。
        fire.birthRate = 200
        // 粒子存活时间
        fire.lifetime = 0.2
        // 粒子的生存时间容差
        fire.lifetimeRange = 0.5
        fire.color = UIColor.init(colorLiteralRed: 0.8, green: 0.4, blue: 0.2, alpha: 0.1) .cgColor
        fire.contents = UIImage(named: "fire.png")?.cgImage
        fire.name = "fire"
        // 粒子的速度
        fire.velocity = 35
        // 粒子动画的速度容差
        fire.velocityRange = 10
        // 粒子在xy平面的发射角度
        fire.emissionLongitude = CGFloat(M_PI + M_PI_2)
        // 粒子发射角度的容差
        fire.emissionRange = CGFloat(M_PI_2)
        // 缩放速度
        fire.scaleSpeed = 0.3
        // 旋转度
        //        fire.spin = 0.2
        
        fireEmitter.emitterCells = [fire]
        view.layer.addSublayer(fireEmitter)
    }

6、流星动画

var timer : Timer!
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        
        
        timer.invalidate()
        timer = nil
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.init(red: 44/255.0, green: 34/255.0, blue: 85/255.0, alpha: 1)

        // Do any additional setup after loading the view.
        timer = Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(liuXingAnimation), userInfo: nil, repeats: true)
    }
    
    ///流星动画
    func liuXingAnimation() {
        let rect    = CGRect(x: self.view.bounds.size.width, y: self.view.bounds.height, width: 100, height: 100)
        let emitter = CAEmitterLayer()
        emitter.frame = rect
        self.view.layer.addSublayer(emitter)
        emitter.renderMode   = kCAEmitterLayerAdditive//合并粒子重叠部分的亮度使得看上去更亮
        emitter.emitterPosition     = CGPoint(x: rect.width/2, y:rect.height/2)
        let            cell  = CAEmitterCell()
        let           image  = UIImage(named: "liuxing")!
        cell.contents        = image.cgImage
        cell.birthRate       = 500 //每秒产生150个粒子
        cell.lifetime        = 5.0
        cell.color           = UIColor.init(red: 1, green: 1, blue: 1, alpha: 0.5).cgColor
        
        cell.alphaSpeed      = -0.6//粒子的透明度每过一秒就减少0.4
        
        cell.velocity        = 50
        cell.velocityRange   = 20   //初始速度值变化的范围 30 ~ 70
        cell.emissionLongitude = CGFloat(-Double.pi/2/180*45)//向上（x-y平面的发射方向）
        cell.emissionRange   = CGFloat(Double.pi/2/180)//围绕发射方向的弧度数
        cell.scale           = 0.2
        emitter.emitterCells = [cell]
        self.view.layer.addSublayer(emitter)
        
        let aPath = UIBezierPath()
        let height : UInt32 = UInt32(self.view.bounds.height-50)
        let randomY = CGFloat(arc4random()%height)
        
        aPath.move(to: CGPoint(x: self.view.bounds.width, y: randomY))
        aPath.addLine(to: CGPoint(x: -100, y: self.view.bounds.width/2+randomY))
        
        let animation = CAKeyframeAnimation(keyPath: "position")
        animation.duration = 5;
        animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseIn)
        animation.repeatCount = 1
        animation.path = aPath.cgPath
        //        animation.calculationMode = kCAAnimationPaced
        animation.setValue("liuxing", forKey: "liuxing")
        //                animation.rotationMode = kCAAnimationRotateAutocell
        emitter.add(animation, forKey: "moveTheSquare")
//        animation.delegate = self
    }

7、Lottie加载动画

使用这个动画需要在项目中加入Lottie三方库，我在项目中使用了cocoapod。只需要在其中加入 pod 'lottie-ios' 即可。 其中的动画使用AE制作生成的 json 文件。 你也可以去这里下载你喜欢的动效。

animationArr = ["LottieLogo1_masked", "9squares-AlBoardman", "HamburgerArrow", "IconTransitions", "LottieLogo1", "LottieLogo2", "MotionCorpse-Jrcanest", "PinJump"];
        
        let temp = Int(arc4random()%(UInt32(animationArr.count)))
        animationStr = animationArr[temp]
        
        contentView.layer.masksToBounds = true
        animationView = LOTAnimationView(name: animationStr)
        animationView.frame = self.contentView.bounds
        animationView.contentMode = .scaleAspectFill
        self.contentView.addSubview(animationView)
        animationView.play{ (finished) in
            // Do Something
        }

8、后续待更新...

9、后记

如果大家对这些效果有兴趣，可以去github下载源码，若对您有帮助的话，请多多star哦！