看到 RazzleDazzleg官方Demo卡辰，流暢的交互式動畫瞬間讓我大愛，所以花時間學習了下岛杀。
特別適合做版本介紹類動畫
動畫分類
1. 背景顏色類動畫 BackgroundColorAnimation 用來實現(xiàn)偏移量和背景顏色改變的動畫
代碼和解釋
let backgroundColorAnimation = BackgroundColorAnimation(view: scrollView)
//先創(chuàng)建一個背景動畫對象
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為倍數(shù)
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
}
}
}
