RazzleDazzle动画

看到 RazzleDazzleg官方Demo，流畅的交互式动画瞬间让我大爱，所以花时间学习了下。
特别适合做版本介绍类动画

动画分类

1. 背景颜色类动画 BackgroundColorAnimation 用来实现偏移量和背景颜色改变的动画

代码和解释

let backgroundColorAnimation = BackgroundColorAnimation(view: scrollView)
//先创建一个背景动画对象
backgroundColorAnimation[0] = UIColor(red: 0.4, green: 0.4, blue: 0.4, alpha: 1)
backgroundColorAnimation[0.5] = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
backgroundColorAnimation[0.99] = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
backgroundColorAnimation[1] = UIColor(red: 0.14, green: 0.8, blue: 1, alpha: 1)
//表达式左边下标0代表的是引导页的偏移量，右边代表当前偏移量背景颜色
//注意下标的取值范围为0...numberOfPages() 这里越界不会奔溃只是无效果而已
animator.addAnimation(backgroundColorAnimation)
//最后再把这个动画添加到RD的动画管理对象中去，这个操作对每一种动画都一样，设置完毕后添加。

2. 缩放类动画 ScaleAnimation 用来对动画对象进行放大缩小

代码和解释

let starScaleAnimation = ScaleAnimation(view: star)
//star 缩放对象
starScaleAnimation.addKeyframe(0, value: 1, easing: EasingFunctionEaseInQuad)
starScaleAnimation[1] = 10
//0,1代表偏移量的占比，10为倍数
animator.addAnimation(starScaleAnimation)
let starHideAnimation = HideAnimation(view: star, hideAt: 1)
animator.addAnimation(starHideAnimation)

---

完整代码

import UIKit
import RazzleDazzle

class ViewController: AnimatedPagingScrollViewController {

    private let star = UIImageView(image: #imageLiteral(resourceName: "Star"))
    private let presents = UIImageView(image: #imageLiteral(resourceName: "IFTTTPresents"))
    private let razzle = UIImageView(image: #imageLiteral(resourceName: "Razzle"))
    private let dazzle = UIImageView(image: #imageLiteral(resourceName: "Dazzle"))
    
    private let musicStand = UIImageView(image: #imageLiteral(resourceName: "MusicStand"))
    private let musicNotes = UIImageView(image: #imageLiteral(resourceName: "MusicNotes"))
    private let plane = UIImageView(image: #imageLiteral(resourceName: "Plane"))
    private var planePathLayer = CAShapeLayer()
    private let planePathView = UIView()
    
    private let bigCloud = UIImageView(image: #imageLiteral(resourceName: "BigCloud"))
    private let littleCloud = UIImageView(image: #imageLiteral(resourceName: "LittleCloud"))
    private let sun = UIImageView(image: #imageLiteral(resourceName: "Sun"))
    private let iftttCloud = UIImageView(image: #imageLiteral(resourceName: "IFTTTCloud"))
    
    private let page2Text = UIImageView(image: #imageLiteral(resourceName: "Page2Text"))
    private let page3Text = UIImageView(image: #imageLiteral(resourceName: "Page3Text"))
    
    private var airplaneFlyingAnimation: PathPositionAnimation?
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configViews()
        configAnimations()
    }
    
    override var prefersStatusBarHidden: Bool {
        return true
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        scaleAirplanePath(toSize: scrollView.frame.size)
    }
    
    override func numberOfPages() -> Int {
        return 4
    }
    
    private func configViews() {
        contentView.addSubview(presents)
        contentView.addSubview(star)
        contentView.addSubview(razzle)
        contentView.addSubview(dazzle)
        contentView.addSubview(planePathView)
        contentView.addSubview(musicStand)
        contentView.addSubview(musicNotes)
        contentView.addSubview(bigCloud)
        contentView.addSubview(littleCloud)
        contentView.addSubview(sun)
        contentView.addSubview(iftttCloud)
        contentView.addSubview(page2Text)
        contentView.addSubview(page3Text)
        animateCurrentFrame()
    }
    
    private func configAnimations () {
        configScrollView()
        
        configPresents()
        configStar()
        configRazzleDazzle()
        
        configMusicStand()
        configMusicNotes()
        
        configPage2Text()
        configBigCloud()
        configLittleCloud()
        configAirplane()
        
        configSun()
        configPage3Text()
        configIftttCloud()
    }
    
    func configScrollView() {
        let backgroundColorAnimation = BackgroundColorAnimation(view: scrollView)
        backgroundColorAnimation[0] = UIColor(red: 0.4, green: 0.4, blue: 0.4, alpha: 1)
        backgroundColorAnimation[0.5] = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
        backgroundColorAnimation[0.99] = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
        backgroundColorAnimation[1] = UIColor(red: 0.14, green: 0.8, blue: 1, alpha: 1)
        animator.addAnimation(backgroundColorAnimation)
    }
    
    func configPresents() {
        NSLayoutConstraint(item: presents, attribute: .top, relatedBy: .equal, toItem: contentView, attribute: .top, multiplier: 1, constant: 20).isActive = true
        keepView(presents, onPages: [0, 1])
        
        let presentsHideAnimation = HideAnimation(view: presents, hideAt: 1)
        animator.addAnimation(presentsHideAnimation)
    }
    
    func configStar() {
        let width = NSLayoutConstraint(item: star, attribute: .width, relatedBy: .lessThanOrEqual, toItem: scrollView, attribute: .width, multiplier: 1.3, constant: 0)
        
        let height = NSLayoutConstraint(item: star, attribute: .height, relatedBy: .lessThanOrEqual, toItem: scrollView, attribute: .height, multiplier: 1, constant: 0)
        
        let top = NSLayoutConstraint(item: star, attribute: .top, relatedBy: .greaterThanOrEqual, toItem: scrollView, attribute: .top, multiplier: 1, constant: 30)
        
        let aspect = NSLayoutConstraint(item: star, attribute: .height, relatedBy: .equal, toItem: star, attribute: .width, multiplier: 1, constant: 0)
        
        let centerY = NSLayoutConstraint(item: star, attribute: .centerY, relatedBy: .equal, toItem: scrollView, attribute: .centerY, multiplier: 1, constant: 0)
        
        NSLayoutConstraint.activate([width, height, top, aspect, centerY])
        keepView(star, onPages: [0, 1])
        
        let starScaleAnimation = ScaleAnimation(view: star)
        starScaleAnimation.addKeyframe(0, value: 1, easing: EasingFunctionEaseInQuad)
        starScaleAnimation[1] = 10
        animator.addAnimation(starScaleAnimation)
        
        let starHideAnimation = HideAnimation(view: star, hideAt: 1)
        animator.addAnimation(starHideAnimation)
    }
    
    func configRazzleDazzle() {
        let razzleWidth = NSLayoutConstraint(item: razzle, attribute: .width, relatedBy: .equal, toItem: star, attribute: .width, multiplier: 0.6, constant: 0)
        let razzleHeight = NSLayoutConstraint(item: razzle, attribute: .height, relatedBy: .equal, toItem: razzle, attribute: .width, multiplier: 218.0 / 576, constant: 0)
        let dazzleWidth = NSLayoutConstraint(item: dazzle, attribute: .width, relatedBy: .equal, toItem: star, attribute: .width, multiplier: 0.6, constant: 0)
        let dazzleHeight = NSLayoutConstraint(item: dazzle, attribute: .height, relatedBy: .equal, toItem: dazzle, attribute: .width, multiplier: 386 / 588.0, constant: 0)
        NSLayoutConstraint.activate([razzleWidth, razzleHeight, dazzleWidth, dazzleHeight])
        
        let razzleVertical = NSLayoutConstraint(item: razzle, attribute: .centerY, relatedBy: .equal, toItem: star, attribute: .centerY, multiplier: 1, constant: 0)
        let dazzleVertical = NSLayoutConstraint(item: dazzle, attribute: .centerY, relatedBy: .equal, toItem: star, attribute: .centerY, multiplier: 1, constant: 0)
        NSLayoutConstraint.activate([razzleVertical, dazzleVertical])
        
        let razzleVerticalAnimation = ConstraintConstantAnimation(superview: scrollView, constraint: razzleVertical)
        razzleVerticalAnimation[0] = -30
        razzleVerticalAnimation[1] = -200
        animator.addAnimation(razzleVerticalAnimation)
        
        let dazzleVerticalAnimation = ConstraintConstantAnimation(superview: scrollView, constraint: dazzleVertical)
        dazzleVerticalAnimation[0] = 80
        dazzleVerticalAnimation[1] = 260
        animator.addAnimation(dazzleVerticalAnimation)
        
        keepView(razzle, onPage: 0)
        keepView(dazzle, onPage: 0)
        
        let razzleRotationAnimation = RotationAnimation(view: razzle)
        razzleRotationAnimation[0] = 0
        razzleRotationAnimation[1] = 100
        animator.addAnimation(razzleRotationAnimation)
        
        let dazzleRotationAnimation = RotationAnimation(view: dazzle)
        dazzleRotationAnimation[0] = 0
        dazzleRotationAnimation[1] = 100
        animator.addAnimation(dazzleRotationAnimation)
    }
    
    private func configMusicStand() {
        let verticalConstraint = NSLayoutConstraint(item: musicStand, attribute: .bottom, relatedBy: .greaterThanOrEqual, toItem: scrollView, attribute: .bottom, multiplier: 1, constant: 0)
        
        let topConstraint = NSLayoutConstraint(item: musicStand, attribute: .top, relatedBy: .greaterThanOrEqual, toItem: scrollView, attribute: .top, multiplier: 1, constant: 40)
        
        let widthConstraint = NSLayoutConstraint(item: musicStand, attribute: .width, relatedBy: .lessThanOrEqual, toItem: scrollView, attribute: .width, multiplier: 1, constant: 0)
        
        let aspectConstraint = NSLayoutConstraint(item: musicStand, attribute: .height, relatedBy: .equal, toItem: musicStand, attribute: .width, multiplier: 1184 / 750.0, constant: 0)
        
        NSLayoutConstraint.activate([verticalConstraint, topConstraint, widthConstraint, aspectConstraint])
        keepView(musicStand, onPages: [1, 2], withAttribute: .right)
        
        let verticalAnimation = ConstraintMultiplierAnimation(superview: scrollView, constraint: verticalConstraint, attribute: .height, referenceView: contentView)
        verticalAnimation.addKeyframe(1, value: 0, easing: EasingFunctionEaseOutCubic)
        verticalAnimation[2] = 1
        animator.addAnimation(verticalAnimation)
    }
    
    private func configMusicNotes() {
        let width = NSLayoutConstraint(item: musicNotes, attribute: .width, relatedBy: .equal, toItem: musicStand, attribute: .width, multiplier: 1, constant: 0)
        
        let height = NSLayoutConstraint(item: musicNotes, attribute: .height, relatedBy: .equal, toItem: musicStand, attribute: .height, multiplier: 1, constant: 0)
        
        let centerY = NSLayoutConstraint(item: musicNotes, attribute: .centerY, relatedBy: .equal, toItem: musicStand, attribute: .centerY, multiplier: 1, constant: 0)
        
        NSLayoutConstraint.activate([width, height, centerY])
        
        keepView(musicNotes, onPages: [2, 1, 2], atTimes: [0.5, 1, 2], withAttribute: .right)
        
    }
    
    private func configPage2Text() {
        let centerY = NSLayoutConstraint(item: page2Text, attribute: .centerY, relatedBy: .equal, toItem: scrollView, attribute: .centerY, multiplier: 1, constant: -30)
        
        NSLayoutConstraint.activate([centerY])
        
        keepView(page2Text, onPage: 2)
    }
    
    private func configBigCloud() {
        let vertical = NSLayoutConstraint(item: bigCloud, attribute: .centerY, relatedBy: .equal, toItem: scrollView, attribute: .top, multiplier: 1, constant: 0)
        
        let width = NSLayoutConstraint(item: bigCloud, attribute: .width, relatedBy: .lessThanOrEqual, toItem: scrollView, attribute: .width, multiplier: 0.78, constant: 0)
        
        let height = NSLayoutConstraint(item: bigCloud, attribute: .height, relatedBy: .lessThanOrEqual, toItem: scrollView, attribute: .height, multiplier: 0.2, constant: 0)
        
        let aspect = NSLayoutConstraint(item: bigCloud, attribute: .height, relatedBy: .equal, toItem: bigCloud, attribute: .width, multiplier: 0.45, constant: 0)
        
        NSLayoutConstraint.activate([vertical, width, height, aspect])
        
        keepView(bigCloud, onPages: [1.35, 2.35, 1.8], atTimes: [1, 2, 3])
        
        let verticalAnimation = ConstraintMultiplierAnimation(superview: scrollView, constraint: vertical, attribute: .height, referenceView: scrollView)
        verticalAnimation[1] = -0.2
        verticalAnimation[2] = 0.2
        animator.addAnimation(verticalAnimation)
    }
    
    private func configLittleCloud() {
        let top = NSLayoutConstraint(item: littleCloud, attribute: .bottom, relatedBy: .equal, toItem: bigCloud, attribute: .top, multiplier: 1, constant: 0)
        
        NSLayoutConstraint.activate([top])
        
        keepView(littleCloud, onPages: [0.75, 1.75], atTimes: [1, 2])
    }
    
    private func configSun() {
        let top = NSLayoutConstraint(item: sun, attribute: .centerY, relatedBy: .equal, toItem: scrollView, attribute: .top, multiplier: 1, constant: 0)
        
        NSLayoutConstraint.activate([top])
        
        keepView(sun, onPages: [2.8, 2.6], atTimes: [2.5, 3])
        
        let verticalAnimation = ConstraintConstantAnimation(superview: scrollView, constraint: top)
        verticalAnimation[2] = -200
        verticalAnimation[3] = 20
        animator.addAnimation(verticalAnimation)
    }
    
    private func configIftttCloud() {
        let centerY = NSLayoutConstraint(item: iftttCloud, attribute: .centerY, relatedBy: .equal, toItem: scrollView, attribute: .centerY, multiplier: 1.5, constant: 0)
        
        NSLayoutConstraint.activate([centerY])
        
        keepView(iftttCloud, onPages: [3.5, 3], atTimes: [2, 3], withAttribute: .centerX)
    }
    
    private func configPage3Text() {
        let centerY = NSLayoutConstraint(item: page3Text, attribute: .centerY, relatedBy: .equal, toItem: scrollView, attribute: .centerY, multiplier: 1, constant: 0)
        
        NSLayoutConstraint.activate([centerY])
        
        keepView(page3Text, onPage: 3)
    }
    
    private func configAirplane() {
        planePathLayer = airplanePathLayer()
        planePathView.layer.addSublayer(planePathLayer)
        planePathView.addSubview(plane)
        planePathView.translatesAutoresizingMaskIntoConstraints = false
        plane.translatesAutoresizingMaskIntoConstraints = false
        let planeBottom = NSLayoutConstraint(item: plane, attribute: .bottom, relatedBy: .equal, toItem: planePathView, attribute: .centerY, multiplier: 1, constant: 0)
        
        let planeRight = NSLayoutConstraint(item: plane, attribute: .right, relatedBy: .equal, toItem: planePathView, attribute: .centerX, multiplier: 1, constant: 0)
        
        NSLayoutConstraint.activate([planeBottom, planeRight])
        
        
        let planPathBottom = NSLayoutConstraint(item: planePathView, attribute: .bottom, relatedBy: .equal, toItem: scrollView, attribute: .bottom, multiplier: 1, constant: 40)
        
        let planePathWidth = NSLayoutConstraint(item: planePathView, attribute: .width, relatedBy: .equal, toItem: plane, attribute: .width, multiplier: 1, constant: 0)
        
        let planePathHeight = NSLayoutConstraint(item: planePathView, attribute: .height, relatedBy: .equal, toItem: plane, attribute: .height, multiplier: 1, constant: 0)
        
        NSLayoutConstraint.activate([planePathWidth, planePathHeight, planPathBottom])
        
        keepView(planePathView, onPages: [1.5, 2.5], atTimes: [1, 2], withAttribute: .left)
        
        let planeFlyingAnimation = PathPositionAnimation(view: plane, path: planePathLayer.path)
        planeFlyingAnimation[1] = 0
        planeFlyingAnimation[2] = 1
        animator.addAnimation(planeFlyingAnimation)
        airplaneFlyingAnimation = planeFlyingAnimation
        
        let planePathAnimation = LayerStrokeEndAnimation(layer: planePathLayer)
        planePathAnimation[1] = 0
        planePathAnimation[2] = 1
        animator.addAnimation(planePathAnimation)
        
        let planeAlphaAnimation = AlphaAnimation(view: planePathView)
        planeAlphaAnimation[1.06] = 0
        planeAlphaAnimation[1.08] = 1
        planeAlphaAnimation[2.5] = 1
        planeAlphaAnimation[3] = 0
        animator.addAnimation(planeAlphaAnimation)
    }
    
    private func airplanePath() -> CGPath {
        let airplanePath = UIBezierPath()
        airplanePath.move(to: CGPoint(x: 120, y: 20))
        airplanePath.addCurve(to: CGPoint(x: 40, y: -130), controlPoint1: CGPoint(x: 120, y: 20), controlPoint2: CGPoint(x: 140, y: -50))
        airplanePath.addCurve(to: CGPoint(x: 30, y: -430), controlPoint1: CGPoint(x: -60, y: -210), controlPoint2: CGPoint(x: -320, y: -430))
        airplanePath.addCurve(to: CGPoint(x: -210, y: -190), controlPoint1: CGPoint(x: 320, y: -430), controlPoint2: CGPoint(x: 130, y: -190))
        return airplanePath.cgPath
    }
    
    private func airplanePathLayer() -> CAShapeLayer {
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = airplanePath()
        shapeLayer.strokeColor = UIColor.white.cgColor
        shapeLayer.lineDashPattern = [20, 20]
        shapeLayer.lineWidth = 4
        shapeLayer.miterLimit = 4
        shapeLayer.fillColor = nil
        shapeLayer.fillRule = kCAFillRuleEvenOdd
        return shapeLayer
    }
    
    private func scaleAirplanePath(toSize pageSize: CGSize) {
        let scaleSize = CGSize(width: pageSize.width / 375.0, height: pageSize.height / 667.0)
        
        var scaleTransform = CGAffineTransform(scaleX: scaleSize.width, y: scaleSize.height)
        let scaledPath = airplanePath().copy(using: &scaleTransform)
        planePathLayer.path = scaledPath
        
        if let planeAnimation = airplaneFlyingAnimation {
            planeAnimation.path = scaledPath
        }
    }
    
}