Post on 15-Sep-2020
© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
What's New in UIKit Dynamics and Visual Effects
Michael Turner UIKit EngineerDavid Duncan UIKit Engineer
App Frameworks #WWDC15
Session 229
Recommended Sessions
Getting Started with UIKit Dynamics WWDC13
Advanced Techniques with UIKit Dynamics WWDC13
Creating Custom iOS User Interfaces WWDC14
AgendaWhat we will cover
AgendaWhat we will cover
A basic overview
AgendaWhat we will cover
A basic overviewWhat’s new in UIKit Dynamics
AgendaWhat we will cover
A basic overviewWhat’s new in UIKit DynamicsUtilizing UIVisualEffectView in your app
AgendaWhat we will cover
A basic overviewWhat’s new in UIKit DynamicsUtilizing UIVisualEffectView in your appBest practices for working with UIKit Dynamics and Auto Layout
UIKit Dynamics
UIKit Dynamics
2D Physics-inspired animation system
UIKit Dynamics
2D Physics-inspired animation systemComposable and declarative
UIKit Dynamics
2D Physics-inspired animation systemComposable and declarative Not a replacement for Core Animation or UIView animations
UIKit DynamicsSliding example
UIKit DynamicsSliding example
UIKit DynamicsSliding example
UIKit DynamicsSliding example
Define the coordinate system
UIKit DynamicsSliding example
Define the coordinate system Provide the overall context for animation
UIDynamicAnimator
UIKit DynamicsSliding example
Define the coordinate system Provide the overall context for animationKeep track of behaviors
UIDynamicAnimator
SlidingBehavior
UIKit DynamicsSliding example
Define the coordinate system Provide the overall context for animationKeep track of behaviors
UIDynamicAnimator
SlidingBehavior
UIGravityBehavior
UICollisionBehavior
UIAttachmentBehavior
UIKit DynamicsSliding example
Define the coordinate system Provide the overall context for animationKeep track of behaviorsUIDynamicItems are associatedwith one or more behaviors
UIView
UIDynamicAnimator
SlidingBehavior
UIGravityBehavior
UICollisionBehavior
UIAttachmentBehavior
UIKit DynamicsWhat’s new
UIKit DynamicsWhat’s new
Support for non-rectangular collision bounds
UIKit DynamicsWhat’s new
Support for non-rectangular collision boundsUIDynamicItemGroup
UIKit DynamicsWhat’s new
Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fields
UIKit DynamicsWhat’s new
Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehavior
UIKit DynamicsWhat’s new
Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehaviorUISnapBehavior
UIKit DynamicsWhat’s new
Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehaviorUISnapBehaviorUIAttachmentBehavior
UIKit DynamicsWhat’s new
Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehaviorUISnapBehaviorUIAttachmentBehaviorNew ways to debug dynamic animations
Collision BoundsUIDynamicItem
Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {
}
Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {
}
case Rectangle
Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {
}
case Rectanglecase Ellipse
Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {
}
case Rectanglecase Ellipsecase Path
Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {
}
case Rectanglecase Ellipsecase Path
protocol UIDynamicItem : NSObjectProtocol { var center: CGPoint { get set } var bounds: CGRect { get } var transform: CGAffineTransform { get set }
}
Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {
}
case Rectanglecase Ellipsecase Path
protocol UIDynamicItem : NSObjectProtocol { var center: CGPoint { get set } var bounds: CGRect { get } var transform: CGAffineTransform { get set }
}
optional var collisionBoundsType: UIDynamicItemCollisionBoundsType { get } optional var collisionBoundingPath: UIBezierPath { get }
Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {
}
case Rectanglecase Ellipsecase Path
protocol UIDynamicItem : NSObjectProtocol { var center: CGPoint { get set } var bounds: CGRect { get } var transform: CGAffineTransform { get set }
}
optional var collisionBoundsType: UIDynamicItemCollisionBoundsType { get } optional var collisionBoundingPath: UIBezierPath { get }
UIDynamicItemCollisionBoundsTypePath
ConvexCounter-clockwise woundNon-self intersecting
Convex
Concave
UIDynamicItemGroup
Individual Items UIDynamicItemGroup
UIDynamicItemGroup
Makes multiple dynamic items behave as one Individual Items UIDynamicItemGroup
UIDynamicItemGroup
Makes multiple dynamic items behave as onePreserves the individual collision bounds
Individual Items UIDynamicItemGroup
UIDynamicItemGroup
Makes multiple dynamic items behave as onePreserves the individual collision boundsDynamic items in a group must notbe added to behaviors individually
Individual Items UIDynamicItemGroup
UIDynamicItemGroup
Makes multiple dynamic items behave as onePreserves the individual collision boundsDynamic items in a group must notbe added to behaviors individuallyA group cannot contain other groups
Individual Items UIDynamicItemGroup
UIDynamicItemGroup
Makes multiple dynamic items behave as onePreserves the individual collision boundsDynamic items in a group must notbe added to behaviors individuallyA group cannot contain other groupsConcave or other complex shapes are possible
Individual Items UIDynamicItemGroup
UIKit DynamicsForce example
UIKit DynamicsForce example
UIKit DynamicsForce example
A force is modeled as a vector
UIKit DynamicsForce example
A force is modeled as a vector• Length and direction
UIKit DynamicsForce example
A force is modeled as a vector• Length and direction
UIPushBehavior applies a force
UIKit DynamicsForce example
A force is modeled as a vector• Length and direction
UIPushBehavior applies a force• Continuous
UIKit DynamicsForce example
A force is modeled as a vector• Length and direction
UIPushBehavior applies a force• Continuous• Instantaneous
UIKit DynamicsForce example
A force is modeled as a vector• Length and direction
UIPushBehavior applies a force• Continuous• Instantaneous
UIKit DynamicsForce example
UIKit DynamicsForce example
Vertical motion over time of the sliding view
UIKit Dynamics
Time
y
Force example
Vertical motion over time of the sliding viewInitial Impulse applied
UIKit Dynamics
Time
y
Force example
Vertical motion over time of the sliding viewInitial Impulse appliedGravity causes the view’s velocity to slow and eventually reverse direction
UIKit Dynamics
Time
y
Force example
Physics FieldsLinear Gravity as a field
Linear Gravity Field
Physics FieldsLinear Gravity as a field
A function that assigns a vector to each point in a domain
Linear Gravity Field
UIFieldBehavior
UIFieldBehavior
UIFieldBehavior can be added to a region of your view
Lines of force
UIRegion
UIFieldBehavior
UIFieldBehavior can be added to a region of your viewThe field is evaluated at each point within the region
Lines of force
UIRegion
UIFieldBehavior
UIFieldBehavior can be added to a region of your viewThe field is evaluated at each point within the regionResulting forces are applied by the animator
Lines of force
UIRegion
UIFieldBehavior
UIFieldBehavior can be added to a region of your viewThe field is evaluated at each point within the regionResulting forces are applied by the animatorUIGravityBehavior is a field already!
Lines of force
UIRegion
UIFieldBehavior
UIFieldBehavior can be added to a region of your viewThe field is evaluated at each point within the regionResulting forces are applied by the animatorUIGravityBehavior is a field already!Simplified physics, well-tuned for performance; not useful for building interstellar space stations
Lines of force
UIRegion
UIFieldBehavior
Linear Gravity Radial Gravity Noise Custom
Drag and Velocity, Vortex, Turbulence, Spring, Electric and Magnetic
UIFieldBehaviorLinear Gravity
UIFieldBehaviorLinear Gravity
Field propertiesvar region: UIRegion var direction: CGVector var strength: CGFloat
UIFieldBehaviorRadial Gravity
UIFieldBehaviorRadial Gravity
Field propertiesvar position: CGPoint var region: UIRegion var strength: CGFloat var falloff: CGFloat var minimumRadius: CGFloat
UIFieldBehaviorNoise
UIFieldBehaviorNoise
Field propertiesvar region: UIRegion var strength: CGFloat var smoothness: CGFloat var animationSpeed: CGFloat
UIFieldBehaviorCustom
UIFieldBehaviorCustom
Field Sampleposition velocity mass charge time
DemoUIKit Dynamics—StickyCorners
Debugging UIKit Dynamics
Debugging UIKit Dynamics
Overlay to show Physics
Debugging UIKit Dynamics
Overlay to show PhysicsVisualize fields, collision bounds, and attachments
Debugging UIKit Dynamics
Overlay to show PhysicsVisualize fields, collision bounds, and attachments Not API, but accessible in lldb
Debugging UIKit Dynamics
Overlay to show PhysicsVisualize fields, collision bounds, and attachments Not API, but accessible in lldb
debugEnabled
Debugging UIKit Dynamics
Overlay to show PhysicsVisualize fields, collision bounds, and attachments Not API, but accessible in lldb
debugEnableddebugInterval
Debugging UIKit Dynamics
Overlay to show PhysicsVisualize fields, collision bounds, and attachments Not API, but accessible in lldb
debugEnableddebugIntervaldebugAnimationSpeed
UIDynamicItemBehavior
UIDynamicItemBehavior
Customize physical properties
UIDynamicItemBehavior
Customize physical propertiesApplied to one or more items
var elasticity: CGFloat var friction: CGFloat var density: CGFloat var resistance: CGFloat var angularResistance: CGFloat
UIDynamicItemBehavior
Customize physical propertiesApplied to one or more items
var charge: CGFloat var anchored: Bool
var var var var var
UIDynamicItemBehavior
Customize physical propertiesApplied to one or more items
UIAttachmentBehavior
Distance attachment
UIAttachmentBehavior
Distance attachmentCustomizable Damping and Frequency
UIAttachmentBehavior
UIAttachmentBehavior
UIAttachmentBehavior
Limit Attachment
UIAttachmentBehavior
Limit AttachmentBehaves like a rope between items
UIAttachmentBehavior
Limit AttachmentBehaves like a rope between itemsAttachment point offset from each item’s center
UIAttachmentBehavior
UIAttachmentBehavior
Fixed Attachment
UIAttachmentBehavior
Attachment anchor
Fixed AttachmentItems positioned with respect to the attachment anchor point
UIAttachmentBehavior
Attachment anchor
Fixed AttachmentItems positioned with respect to the attachment anchor pointNo relative movement
UIAttachmentBehavior
UIAttachmentBehavior
Pin Attachment
UIAttachmentBehavior
Attachment anchor
Pin AttachmentItems positioned with respect to the attachment anchor point
UIAttachmentBehavior
Attachment anchor
Range
Pin AttachmentItems positioned with respect to the attachment anchor pointSpecify a rotatable range
UIAttachmentBehavior
Attachment anchor
Range
Pin AttachmentItems positioned with respect to the attachment anchor pointSpecify a rotatable range
UIAttachmentBehavior
UIAttachmentBehavior
Sliding Attachment
UIAttachmentBehavior
Attachment anchor
Sliding AttachmentItems positioned with respect to the attachment anchor point
UIAttachmentBehavior
Axis of translation
Attachment anchor
Sliding AttachmentItems positioned with respect to the attachment anchor pointAllows only relative translation along a specified axis
UIAttachmentBehavior
Axis of translation
Attachment anchor
Sliding AttachmentItems positioned with respect to the attachment anchor pointAllows only relative translation along a specified axisPrevents relative rotation of the dynamic items
UIAttachmentBehavior
Axis of translation
Attachment anchor
Sliding AttachmentItems positioned with respect to the attachment anchor pointAllows only relative translation along a specified axisPrevents relative rotation of the dynamic itemsSpecify a translatable range
Range
UIAttachmentBehavior
Axis of translation
Attachment anchor
Sliding AttachmentItems positioned with respect to the attachment anchor pointAllows only relative translation along a specified axisPrevents relative rotation of the dynamic itemsSpecify a translatable range
Range
UISnapBehavior
UISnapBehavior
Snap a view in place
UISnapBehavior
Snap a view in placeCustomizable damping
UISnapBehavior
Snap a view in placeCustomizable dampingCustomizable snapPoint
UISnapBehavior
Snap a view in placeCustomizable dampingCustomizable snapPoint
Visual EffectsAdding style to your app
David DuncanUIKit Engineer
UIVisualEffectViewStylish Overlays
UIVisualEffectViewUIBlurEffect
enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark }
let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurView = UIVisualEffectView(effect: blurEffect)
UIVisualEffectViewUIBlurEffect
enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark }
let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurView = UIVisualEffectView(effect: blurEffect)
UIVisualEffectViewUIBlurEffect
enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark }
let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurView = UIVisualEffectView(effect: blurEffect)
UIVisualEffectViewUIBlurEffect
enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark }
let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurView = UIVisualEffectView(effect: blurEffect)
UIVisualEffectViewUIVibrancyEffect
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)
blurView.contentView.addSubview(vibrancyView)
vibrancyView.contentView.addSubview(label)
UIVisualEffectViewUIVibrancyEffect
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)
blurView.contentView.addSubview(vibrancyView)
vibrancyView.contentView.addSubview(label)
UIVisualEffectViewUIVibrancyEffect
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)
blurView.contentView.addSubview(vibrancyView)
vibrancyView.contentView.addSubview(label)
UIVisualEffectViewUIVibrancyEffect
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)
blurView.contentView.addSubview(vibrancyView)
vibrancyView.contentView.addSubview(label)
UIVisualEffectViewUIVibrancyEffect
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)
blurView.contentView.addSubview(vibrancyView)
vibrancyView.contentView.addSubview(label)
UIVisualEffectViewAnd action!
UIVisualEffectViewAnd action!
Bounds
UIVisualEffectViewAnd action!
BoundsEffect
UIVisualEffectViewAnatomy of an effect
UIVisualEffectViewAnatomy of an effect
Capture Area
UIVisualEffectViewAnatomy of an effect
Capture Area
UIVisualEffectViewAnatomy of an effect
Capture Area
Apply Effect
UIVisualEffectViewAnatomy of an effect
Capture Area
UIVisualEffectViewAnatomy of an effect
Apply EffectCapture Area
UIVisualEffectViewAnatomy of an effect
Apply EffectCapture Area Copy Back
UIVisualEffectViewAnatomy of an effect
Apply Effect Offscreen PassCapture Area Copy Back
UIVisualEffectViewOffscreen Passes
AlphaMaskingBlurVibrancySnapshotting
UIVisualEffectViewOffscreen Passes
AlphaMaskingBlurVibrancySnapshottingUIView.snapshotViewAfterScreenUpdates(afterUpdates:) UIView.drawViewHierarchyInRect(rect:, afterScreenUpdates:) UIScreen.snapshotViewAfterScreenUpdates()
UIVisualEffectViewOffscreen Passes
AlphaMaskingBlurVibrancySnapshottingUIView.snapshotViewAfterScreenUpdates(afterUpdates:) UIView.drawViewHierarchyInRect(rect:, afterScreenUpdates:) UIScreen.snapshotViewAfterScreenUpdates()
UIVisualEffectViewAnatomy of a broken effect
VisualEffectView/Blur
UIVisualEffectViewAnatomy of a broken effect
Capture Area
UIVisualEffectViewAnatomy of a broken effect
Capture Area
UIVisualEffectViewAnatomy of a broken effect
Capture Area
UIVisualEffectViewAnatomy of a broken effect
Capture Area Nothing!
UIVisualEffectViewFixing broken effects
UIVisualEffectViewFixing broken effects
For help in lldb- (NSString *)_whatsWrongWithThisEffect
UIVisualEffectViewFixing broken effects
For help in lldb- (NSString *)_whatsWrongWithThisEffect
(lldb) po [myEffectView _whatsWrongWithThisEffect]
UIVisualEffectViewFixing broken effects
For help in lldb- (NSString *)_whatsWrongWithThisEffect
(lldb) po [myEffectView _whatsWrongWithThisEffect]
ISSUE: One or more masking superviews have been found.
<UIView: 0x7fa030518810; frame = (0 0; 0 0); layer = <CALayer: 0x7fa03050b190>>
UIVisualEffectView cannot be masked, you will need to isolate this effect view into a hierarchy that is not masked or not use masks.
UIVisualEffectViewFixing broken effects
Rearrange view hierarchy• Effective for Alpha and Masking
Blur
Content
apply alpha or masking
Root
Container
UIVisualEffectViewFixing broken effects
Rearrange view hierarchy• Effective for Alpha and Masking
ContainerBlur
Content
apply alpha or masking
Root
UIVisualEffectViewFixing broken effects
Rearrange view hierarchy• Effective for Alpha and Masking
ContainerBlur
Content
apply alpha or masking
Root
UIVisualEffectViewFixing broken effects
Mask views individually
Blur ContentContent
mask addedContainer
UIVisualEffectViewFixing broken effects
Mask views individually
Blur ContentContent
Container
UIVisualEffectViewFixing broken effects
Mask views individually
Blur ContentContent
mask added
Container
UIVisualEffectViewFixing broken effects
Snapshot the window or screen
View Snapshot requested
Content
Content
Blur
Window
Screen
UIVisualEffectViewFixing broken effects
Snapshot the window or screen
View Snapshot requested
Content
Content
Blur
Window
Screen
UIVisualEffectViewFixing broken effects
Snapshot the window or screen
Content
Content
Blur
Window
Screen
View Snapshot requested
UIVisualEffectViewFixing broken effects
Snapshot the window or screen
Screen Snapshot requested
Content
Content
Blur
Window
Screen View Snapshot requested
UIKit Dynamics and Auto Layout
UIKit Dynamics and Auto Layout
UIKit Dynamics outside• dynamicsView.translatesAutoresizingMaskIntoConstraints = true
Auto Layout inside• innerView.leadingAnchor.constraintEqualToAnchor(dynamicsView.leadingAnchor)
Follow via Auto Layout
UIKit Dynamics and Auto LayoutFollow via Auto Layout
Lola 011.jpg
UIKit Dynamics and Auto LayoutFollow via Auto Layout
Lola 011.jpg
UIKit Dynamics and Auto LayoutCustom UIDynamicItem
UIKit Dynamics and Auto LayoutCustom UIDynamicItem
Subclass NSObject
UIKit Dynamics and Auto LayoutCustom UIDynamicItem
Subclass NSObjectConform to UIDynamicItem
UIKit Dynamics and Auto LayoutCustom UIDynamicItem
Subclass NSObjectConform to UIDynamicItemProvide .bounds
UIKit Dynamics and Auto LayoutCustom UIDynamicItem
Subclass NSObjectConform to UIDynamicItemProvide .boundsUpdate constraints when .center and .transform change
DemoUIKit Dynamics and Auto Layout
Summary
Focus on the user experience Always consider performance impact when adding advanced effects
Related Sessions and Labs
Getting Started with Multitasking on iPad in iOS 9 Presidio Tuesday 4:30PM
Multitasking Essentials for Media-Based Apps oniPad in iOS 9 Pacific Heights Wednesday 2:30PM
Optimizing Your App for Multitasking on iPad in iOS 9 Presidio Wednesday 3:30PM
Mysteries of Auto Layout, Part 1 Presidio Thursday 11:00AM
Mysteries of Auto Layout, Part 2 Presidio Thursday 1:30PM
Building Responsive and Efficient Apps with GCD Nob Hill Friday 10:00AM
UIKit and UIKit Dynamics Lab Frameworks Lab C Friday 11:00AM
More Information
DocumentationUIDynamicAnimator Class ReferenceUIFieldBehavior Class ReferenceUIDynamicBehavior Class ReferenceUIAttachmentBehavior Class ReferenceSample CodeStickyCorners
http://developer.apple.com/library
Technical SupportApple Developer ForumsDeveloper Technical Support
Curt RothertApp Frameworks Evangelistrothert@apple.com