概述

今天要說的UIViewPropertyAnimator, 是iOS10新的API

詳細

代碼下載：http://www.demodashi.com/demo/10639.html

基礎動畫, 核心動畫到自定義轉場動畫其實都不是什么新東西了, 所以我也是草草看一遍就能夠讀個大概, 但今天要說的UIViewPropertyAnimator, 是iOS10新的API, 其他的好處我還不太清楚, 但抽象動畫邏輯和監控動畫的進程上真的是方便很多。

一、準備工作

對于屬性動畫來說, 真的是個新知識, 想必會用的還不多, 我也是近期才有涉及, 理解不周還望大伙指點一二, 之前我們要做一些稍微高級的動畫都會使用核心動畫的方法, 但是核心動畫有一個致命的弱點, 就是假象和被打斷, 所以iOS10出了新的API真的是造福我們這些開發者. 不多說, 先了解新的API:

@available(iOS 10.0, *) open class UIViewPropertyAnimator : NSObject, UIViewImplicitlyAnimating, NSCopying@NSCopying open var timingParameters: UITimingCurveProvider? { get }open var duration: TimeInterval { get }open var delay: TimeInterval { get }open var isUserInteractionEnabled: Boolopen var isManualHitTestingEnabled: Boolopen var isInterruptible: Bool

• timingParameters: 時間參數

• duration: 持續時間

• delay: 延遲時間

• isUserInteractionEnabled: 是否可交互

• isManualHitTestingEnabled: 是否啟動手動測試

• isInterruptible: 是否可被打斷

構造方法:

public init(duration: TimeInterval, timingParameters parameters: UITimingCurveProvider)

• duration: 持續時間

• timingParameters: 時間參數

public convenience init(duration: TimeInterval, curve: UIViewAnimationCurve, animations: (@escaping () -> Swift.Void)? = nil)

• duration: 持續時間

• curve: 動畫曲線

• animations: 動畫執行閉包

public convenience init(duration: TimeInterval, controlPoint1 point1: CGPoint, controlPoint2 point2: CGPoint, animations: (@escaping () -> Swift.Void)? = nil)

• duration: 持續時間

• controlPoint1: 控制點1

• controlPoint2: 控制點2

• animations: 動畫執行閉包

public convenience init(duration: TimeInterval, dampingRatio ratio: CGFloat, animations: (@escaping () -> Swift.Void)? = nil)

• duration: 持續時間

• dampingRatio: 減震比率

• animations: 動畫執行閉包

運行屬性動畫方法:

open class func runningPropertyAnimator(withDuration duration: TimeInterval, delay: TimeInterval, options: UIViewAnimationOptions = [], animations: @escaping () -> Swift.Void, completion: (@escaping (UIViewAnimatingPosition) -> Swift.Void)? = nil) -> Self

• duration: 持續時間

• options: 動畫選項

• animations: 動畫執行閉包

• completion: 動畫完成閉包

添加動畫組方法:

open func addAnimations(_ animation: @escaping () -> Swift.Void, delayFactor: CGFloat)

• animation: 動畫執行閉包

• delayFactor: 延遲比率, 按照百分比計算 范圍0~1

動畫組完成方法:

open func addCompletion(_ completion: @escaping (UIViewAnimatingPosition) -> Swift.Void)

• completion: 完成執行閉包

繼續動畫方法:

open func continueAnimation(withTimingParameters parameters: UITimingCurveProvider?, durationFactor: CGFloat)

• withTimingParameters: 時間參數

• durationFactor: 持續比率, 按照百分比計算 范圍0~1

動畫狀態:

@available(iOS 10.0, *) public enum UIViewAnimatingState : Int {case inactive // The animation is not executing.case active // The animation is executing.case stopped // The animation has been stopped and has not transitioned to inactive. }

動畫位置:

@available(iOS 10.0, *) public enum UIViewAnimatingPosition : Int {case endcase startcase current }

動畫協議:

public protocol UIViewAnimating : NSObjectProtocol @available(iOS 10.0, *)public var state: UIViewAnimatingState { get }public var isRunning: Bool { get }public var isReversed: Bool { get set }public var fractionComplete: CGFloat { get set }public func startAnimation()public func startAnimation(afterDelay delay: TimeInterval)public func pauseAnimation()public func stopAnimation(_ withoutFinishing: Bool) @available(iOS 10.0, *)public func finishAnimation(at finalPosition: UIViewAnimatingPosition)

• state: 動畫狀態

• isRunning: 動畫是否在執行

• isReversed: 動畫是否反向執行

• fractionComplete: 分段完成 范圍0~1

• startAnimation: 開始執行動畫

• startAnimation(afterDelay:): 延遲執行動畫

• pauseAnimation: 暫停動畫執行

• finishAnimation: 完成動畫知悉在某個動畫位置

二、實戰實例

這次的API有點多, 因為本人也是第一次接觸所以把每個都嘗試了一遍, 我們就來使用這些API進行實戰, 和之前一樣, 我們就通過Stroyboard搭建界面 (由于Demo代碼較多, 只列舉具體的動畫部分)

我們首先先將動畫抽象到一個類中:

class AnimatorFactory {... }

添加縮放動畫:

static func scaleUp(view: UIView) -> UIViewPropertyAnimator {let scale = UIViewPropertyAnimator(duration: 0.33, curve: .easeIn) //屬性動畫初始化scale.addAnimations { //添加動畫組view.alpha = 1.0}scale.addAnimations({ //添加動畫組view.transform = .identity}, delayFactor: 0.33) //延遲33%執行scale.addCompletion {_ in //完成后打印print("ready")}return scale}

添加搖晃動畫:

@discardableResult //去除黃色警告static func jiggle(view: UIView) -> UIViewPropertyAnimator {return UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 0.33, delay: 0, //直接執行屬性動畫animations: {UIView.animateKeyframes(withDuration: 1, delay: 0, //關鍵幀動畫animations: {UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {view.transform = CGAffineTransform(rotationAngle: -.pi/8)}UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.75) {view.transform = CGAffineTransform(rotationAngle: +.pi/8)}UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 1.0) {view.transform = .identity}},completion: nil)},completion: {_ inview.transform = .identity //完成后置空})}

添加淡入淡出動畫:

@discardableResultstatic func fade(view: UIView, visible: Bool) -> UIViewPropertyAnimator {return UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 0.5, delay: 0.1,options: [.curveEaseOut], animations: {view.alpha = visible ? 1 : 0})}

添加約束動畫:

@discardableResultstatic func animateConstraint(view: UIView, constraint: NSLayoutConstraint, by: CGFloat) -> UIViewPropertyAnimator {let spring = UISpringTimingParameters(dampingRatio: 0.55) //這個和之前的彈簧動畫類似let animator = UIViewPropertyAnimator(duration: 1.0, timingParameters: spring)animator.addAnimations {constraint.constant += by //約束操作view.layoutIfNeeded() //刷幀}return animator}

添加閃爍動畫:

static func grow(view: UIVisualEffectView, blurView: UIVisualEffectView) -> UIViewPropertyAnimator {// 1view.contentView.alpha = 0view.transform = .identity// 2let animator = UIViewPropertyAnimator(duration: 0.5, curve: .easeIn)// 3animator.addAnimations {UIView.animateKeyframes(withDuration: 0.5, delay: 0.0, animations: {UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1.0) {blurView.effect = UIBlurEffect(style: .dark)view.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)}UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {view.transform = view.transform.rotated(by: -.pi/8)}})}// 4animator.addCompletion {position inswitch position {case .start:blurView.effect = nilcase .end:blurView.effect = UIBlurEffect(style: .dark)default: break}}return animator}

進行屬性動畫的調用:

@IBAction func toggleShowMore(_ sender: UIButton) {self.showsMore = !self.showsMorelet animations = { //創建動畫組閉包self.widgetHeight.constant = self.showsMore ? 230 : 130if let tableView = self.tableView {tableView.beginUpdates() //進行tableView刷新動畫tableView.endUpdates()tableView.layoutIfNeeded() //刷布局}}let textTransition = { //View轉場UIView.transition(with: sender, duration: 0.25, options: .transitionCrossDissolve,animations: {sender.setTitle(self.showsMore ? "Show Less" : "Show More", for: .normal)},completion: nil)}if let toggleHeightAnimator = toggleHeightAnimator, toggleHeightAnimator.isRunning { toggleHeightAnimator.addAnimations(animations)toggleHeightAnimator.addAnimations(textTransition, delayFactor: 0.5)} else {let spring = UISpringTimingParameters(mass: 30, stiffness: 1000, damping: 300, initialVelocity: CGVector.zero)toggleHeightAnimator = UIViewPropertyAnimator(duration: 0.0, timingParameters: spring) //初始化動畫toggleHeightAnimator?.addAnimations(animations) //添加動畫組toggleHeightAnimator?.addAnimations(textTransition, delayFactor: 0.5)toggleHeightAnimator?.startAnimation() //開始動畫}widgetView.expanded = showsMorewidgetView.reload()}

?

三、運行效果

1、運行效果

2、文件截圖

?

代碼下載：http://www.demodashi.com/demo/10639.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權

轉載于:https://www.cnblogs.com/demodashi/p/8481628.html

總結

以上是生活随笔為你收集整理的[Animations] 快速上手 iOS10 属性动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。