advances in uikit animations and transitions · agenda review discussion of uiviewpropertyanimator...

App Frameworks #WWDC16

Session 216

Advances in UIKit Animations and Transitions

Bruce Nilo UIKitMichael Turner UIKit

ResponsiveFluid

NaturalSmooth

Agenda

Review

Agenda

ReviewDiscussion of UIViewPropertyAnimator

Agenda

ReviewDiscussion of UIViewPropertyAnimatorUIViewControllerAnimated Transitioning

Agenda

ReviewDiscussion of UIViewPropertyAnimatorUIViewControllerAnimated TransitioningDemo of a New Photos Sample Application

Agenda

ReviewDiscussion of UIViewPropertyAnimatorUIViewControllerAnimated TransitioningDemo of a New Photos Sample ApplicationAnimation to Gesture Revisited

Agenda

ReviewDiscussion of UIViewPropertyAnimatorUIViewControllerAnimated TransitioningDemo of a New Photos Sample ApplicationAnimation to Gesture RevisitedInterruptible Keyframe Animations

Implicit property animationsUIKit Animations

Interpolation and Pacing

2.0 s0 s 1.0 s

x 0 800

2.0 s0 s 1.0 s

x 0 200 400 600 800

2.0 s0 s 1.0 s

x 0 200 400 600 800

2.0 s0 s 1.0 s

x 0 200 400 600 800

UIView.animate(withDuration:2.0,

delay: 0.0,

options:[.linear]) {

circle.center.x = 800.0

0 .5 1 1.5 2.0

0 100%Normalized Time

|x - x0|

|xT - x0|

Normalized Value (μ)

0 100%Normalized Times(t)

x 0 200 400 600 800

Normalized Value μ(s)

x 0 200 400 600 800

.easeInOut

.easeIn.easeInOut

.easeIn .easeOut.easeInOut

2.0 s0 s 1.0 s

x 0 200 400 600 800

delay: 0.0,

usingSpringWithDamping: 0.8, initialSpringVelocity: 0.0,

2.0 s0 s 1.0 s

x 0 200 400 600 800

delay: 0.0,

usingSpringWithDamping: 0.8, initialSpringVelocity: 0.0,

1024 x 768

Adding to Running Animations

Building Interruptible and Responsive Interactions WWDC 2014

From Model

From Model From Current

From Model From Current Additively

UIViewPropertyAnimatorNew Property Animation APIs

FeaturesUIViewPropertyAnimator

FamiliarInterruptibleScrubbableReversibleBroad availability of timing functionsRunning animations can be modified

UIViewPropertyAnimator

UIViewImplicitlyAnimating

UIViewAnimating

UITimingCurveProvider

UIViewAnimating

UICubicTimingParameters UISpringTimingParameters

UIViewAnimating

UIViewAnimatingState

UIViewAnimatingPosition

UIViewAnimating

.inactive.active

.stopped

UIViewAnimating

.end.start

.current

UIViewAnimating

NEWUIViewAnimating

var state: UIViewAnimatingState { get } var isRunning: Bool { get } var isReversed: Bool { get set } var fractionComplete: CGFloat { get set }

func startAnimation() func startAnimation(afterDelay : TimInterval)

func pauseAnimation()

func stopAnimation(_ withoutFinishing: Bool) func finishAnimation(at finalPosition: UIViewAnimatingPosition)

UIViewAnimating

optional func addAnimations(_ animation: () -> Void, delayFactor: CGFloat) optional func addAnimations(_ animation: () -> Void)

optional func addCompletion(_ completion: (UIViewAnimatingPosition) -> Void)

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

UIViewAnimating

var timingParameters: UITimingCurveProvider? { get } var duration: TimeInterval { get } var delay: TimeInterval { get } var isUserInteractionEnabled: Bool { get set } var isManualHitTestingEnabled: Bool { get set } var isInterruptible: Bool { get set }

init(duration: TimeInterval, timingParameters parameters: UITimingCurveProvider)

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

API discussionUIViewPropertyAnimator

Basic usage

Basic usagePausing and scrubbing

Basic usagePausing and scrubbingReversing

Basic usagePausing and scrubbingReversingTiming providers

1024 x 768

BasicsUIViewPropertyAnimator

let timing = UICubicTimingParameters(animationCurve: .easeInOut)

let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters:timing)

animator.addAnimations { self.squareView.center = CGPoint(x: 800.0, y: self.squareView.center,y) self.squareView.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_2)) }

animator.addCompletion {_ in self.squareView.backgroundColor = UIColor.orange() }

animator.startAnimation()

Observable propertiesUIViewPropertyAnimator

true false

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

isRunning isReversedstate.stopped.active.inactive falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.addAnimation {

isRunning isReversedstate.stopped.active.inactive falsetruefalsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.startAnimation ()

isRunning isReversedstate.stopped.active.inactive falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

isRunning isReversedstate.stopped.active.inactive falsetrue falsetrue

falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

isRunning isReversedstate.stopped.active.inactive

falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

falsetrue falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.pauseAnimation ()

falsetrue falsetrue falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

isRunning isReversedstate.stopped

animator.isReversed = true

.active.inactive

falsetrue falsetrue falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

.active.inactive

falsetrue

falsetrue falsetruetrue falsefalsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.isReversed = false

.inactive .active.active

falsetruetrue falsefalsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

.inactive .active.active

falsetrue falsetruetrue falsefalsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

.inactive

completion(.end)

.inactive .active

.active .stopped falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

isRunning isReversedstate.active.inactive

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

.active .stopped.stopped falsetrue falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.stopAnimation (false)

isRunning isReversedstate.inactive

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.finishAnimation (.current)

.active .stopped falsetrue falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.finishAnimation (.current)

.inactive falsefalse

completion(.current)

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.finishAnimation (.end)

.active .stopped falsetrue falsetrue falsetrue

t 2.0 s0 s .5 s 1.0 s 1.5 s

x 0 200 400 600 800

animator.finishAnimation (.end)

.inactive falsefalse

completion(.end)

Pausing and scrubbingUIViewPropertyAnimator

1024 x 768

switch animator.state { case .active:

if animator.isRunning {

progressAnimator.pauseAnimation();

animator.pauseAnimation();

else {

progressAnimator.startAnimation()

default:

else {

default:

else {

default:

func handleProgress (_ gr : UIPanGestureRecognizer) {

let s = gr.location(in: progress)

let f = min(s.x / progress.bounds.size.width, 1.0)

let fraction = max(0.0, f)

animator.fractionComplete = fraction

progressAnimator.fractionComplete = fraction

1024 x 768

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

0 100%

x 0 200 400 600 800

1024 x 768

ReversingUIViewPropertyAnimator

Pause and Reverse

animator.pauseAnimation()

Running Reverse

Animate Back

animator.addAnimations { view.center.x = 150.0 view.transform = CGAffineTransform.identity}

Timing providersUIViewPropertyAnimator

UICubicTimingParameters

UICubicTimingParameters()

UICubicTimingParameters(animationCurve: .linear)

UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0),

controlPoint2: CGPoint(x:1.0,y:0.0))

UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0), controlPoint2: CGPoint(x:1.0,y:0.0))

Timing providersUIViewPropertyAnimator NEW

UISpringTimingParameters

UISpringTimingParameters()

UISpringTimingParameters(dampingRatio: 0.8,

initialVelocity: CGVector(dx:1.0, dy: 0.0))

UISpringTimingParameters(mass: CGFloat, stiffness: CGFloat,

damping: CGFloat, initialVelocity velocity: CGVector)

1024 x 768

Creating interruptible transitionsCustom View Controller Transitions

View Controller Transitions

Custom Transitions Using View Controllers WWDC 2013

UIViewControllerInteractiveTransitioningUIViewControllerAnimated Transitioning

UIViewControllerInteractiveTransitioningUIViewControllerAnimated TransitioningUIViewControllerContextTransitioning

UIViewControllerAnimatedTransitioning

Delegate

UIViewControllerTransitioningDelegate

UIViewController

Delegate

UIViewController

UIViewControllerContextTransitioning

Delegate

UIViewController

animateTransition(using: context)

Delegate

UIViewController

UIViewControllerAnimatedTransitioning NEW

UIViewImplicitlyAnimating interruptibleAnimator(using: context)

Delegate

UIViewController

Delegate

UIViewController

func animateTransition(using context:UIViewControllerTransitioningContext) -> Void {

self.interruptibleAnimator(using: context).startTransition()

UIViewControllerInteractiveTransitioning

UIViewControllerAnimatedTransitioningDelegate

startInteractiveTransition(using: context)

UIPercentDrivenInteractiveTransition

UIViewImplicitlyAnimation

interruptibleAnimator(using: context)

func interruptibleAnimator(using context:

UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating {

let animator = UIViewPropertyAnimator(duration:self.duration, timingParameters:timing)

animator.addAnimations {

self.myAnimateTransition(context)

return animator

Migrating

func interruptibleAnimator(using context:

UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating {

let animator = UIViewPropertyAnimator(duration:self.duration, timingParameters:timing)

animator.addAnimations {

self.myAnimateTransition(context)

return animator

Migrating

UIViewControllerContextTransitioningView Controller Transitions

public protocol UIViewControllerContextTransitioning : NSObjectProtocol { ... // This should be called if the transition animation is interruptible and it // is being paused. @available(iOS 10.0, *) public func pauseInteractiveTransition()

// The next two values can change if the animating transition is interruptible. public var isInteractive : Bool { get }// This indicates whether the transition is currently interactive. public var transitionWasCancelled : Bool { get }

public func updateInteractiveTransition(_ percentComplete: CGFloat) public func finishInteractiveTransition() public func cancelInteractiveTransition() ... }

View Controller Transitions NEW

public protocol UIViewControllerInteractiveTransitioning : NSObjectProtocol { optional public var wantsInteractiveStart : Bool { get }

UIPercentDrivenInteractiveTransitionView Controller Transitions

public class UIPercentDrivenInteractiveTransition : NSObject, UIViewControllerInteractiveTransitioning {

public var timingCurve: UITimingCurveProvider?

public var wantsInteractiveStart: Bool

public func pause()

RulesView Controller Transitions

Implementation of interruptibleAnimator(using: context) implies adoption

Implementation of interruptibleAnimator(using: context) implies adoptionanimateTransition(using: context) or startInteractiveTransition(using: context) are called first

Implementation of interruptibleAnimator(using: context) implies adoptionanimateTransition(using: context) or startInteractiveTransition(using: context) are called firstinterruptibleAnimator(using: context) returns the same instance

Implementation of interruptibleAnimator(using: context) implies adoptionanimateTransition(using: context) or startInteractiveTransition(using: context) are called firstinterruptibleAnimator(using: context) returns the same instanceThe animator survives the life of the transition

DemoAn improved sample Photos app

Michael Turner UIKit

Two More Topics

Agenda

ReviewDiscussion of UIViewPropertyAnimatorUIViewControllerAnimated TransitioningDemo of a New Photos Sample ApplicationAnimation to Gesture Revisited (Hit Testing)Interruptible Keyframe Animations

Agenda

ReviewDiscussion of UIViewPropertyAnimatorUIViewControllerAnimated TransitioningDemo of a New Photos Sample ApplicationAnimation to Gesture Revisited (Hit Testing)Interruptible Keyframe Animations

Hit testingUIViewPropertyAnimator

var isUserInteractionEnabled: Bool

var isManualHitTestingEnabled: Bool

Defaults to true

Defaults to false

Hit testing moving viewsUIViewPropertyAnimator

animator.isManualHitTestingEnabled = true animator.isManualHitTestingEnabled = true

animator.isManualHitTestingEnabled = true

override func hitTest(_ point: CGPoint, with event: UIEvent!) -> UIView? {

let superPoint = self.convert(point, to: superview)

let pt = layer.presentation()?.convert(superPoint, from: superview!.layer)

return super.hitTest(pt!, with: event)

animator.isManualHitTestingEnabled = false

Keyframe Animations

1024 x 768

Keyframe animationsUIViewPropertyAnimator

animator.addAnimations { _ in

UIView.animateKeyframes(withDuration: self.duration, delay: 0.0, options:[.calculationModeCubic]

UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {

self.squareView1.center = CGPoint(x: 200.0, y: 450.0)

interactivePopGestureRecognizer

let popGesture = navController.interactivePopGestureRecognizer!

interactivePopGestureRecognizer

let popGesture = navController.interactivePopGestureRecognizer!

myInteractiveGesture.require(toFail: popGesture)

Summary

Create interruptible animations with a UIViewPropertyAnimator

Summary

Create interruptible animations with a UIViewPropertyAnimatorUIViewPropertyAnimators support a wide new range of pacing options

Summary

Create interruptible animations with a UIViewPropertyAnimatorUIViewPropertyAnimators support a wide new range of pacing optionsUse UIViewPropertyAnimator to create interruptible view controller transitions

More Information

https://developer.apple.com/wwdc16/216

Related Sessions

What’s New in UICollectionView in iOS10 Presidio Thursday 9:00 AM

A Peek at 3D Touch Presidio Thursday 4:00 PM

Advanced Techniques with UIKit Dynamics WWDC 2013

What's New in UIKit Dynamics and Visual Effects WWDC 2015

UIKit and UIKit Animations Lab FrameworksLab C Thursday 1:00 PM

advances in uikit animations and transitions · agenda review discussion of uiviewpropertyanimator...

Documents

android animations

uikit dynamics

transitioning to alternative fuel vehicles - luskin...

musical & animations

aardman animations

sample animations

114 customizing the appearance of uikit controls

meetup uikit programming

joomla template overrides mit uikit

transitioning multiagent technology to uav...

simple animations

web animations

ios game development with uikit

mastering ios frameworks -...

uikit dynamics-360idev2014

making ios uikit simulator for macos x

flash animations

mechanics animations

sorties animations

the best of both worlds: using uikit with opengl