what's new in uikit dynamics and visual eﬀects - apple inc. · 2016. 7. 8. ·...

© 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


A basic overview


A basic overviewWhat’s new in UIKit Dynamics


A basic overviewWhat’s new in UIKit DynamicsUtilizing UIVisualEffectView in your app


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


Define the coordinate system


Define the coordinate system Provide the overall context for animation

UIDynamicAnimator


Define the coordinate system Provide the overall context for animationKeep track of behaviors

UIDynamicAnimator

SlidingBehavior


Define the coordinate system Provide the overall context for animationKeep track of behaviors

UIDynamicAnimator

SlidingBehavior

UIGravityBehavior

UICollisionBehavior

UIAttachmentBehavior


Define the coordinate system Provide the overall context for animationKeep track of behaviorsUIDynamicItems are associatedwith one or more behaviors

UIView

UIDynamicAnimator

SlidingBehavior

UIGravityBehavior

UICollisionBehavior


UIKit DynamicsWhat’s new


Support for non-rectangular collision bounds


Support for non-rectangular collision boundsUIDynamicItemGroup


Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fields


Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehavior


Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehaviorUISnapBehavior


Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehaviorUISnapBehaviorUIAttachmentBehavior


Support for non-rectangular collision boundsUIDynamicItemGroupUIFieldBehavior—models vector force fieldsUIDynamicItemBehaviorUISnapBehaviorUIAttachmentBehaviorNew ways to debug dynamic animations

Collision BoundsUIDynamicItem

Collision BoundsUIDynamicItemenum UIDynamicItemCollisionBoundsType : UInt {

}


}

case Rectangle


}

case Rectanglecase Ellipse


}

case Rectanglecase Ellipsecase Path


}


protocol UIDynamicItem : NSObjectProtocol { var center: CGPoint { get set } var bounds: CGRect { get } var transform: CGAffineTransform { get set }

}


}


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


UIDynamicItemGroup

Makes multiple dynamic items behave as onePreserves the individual collision boundsDynamic items in a group must notbe added to behaviors individually


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


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


UIKit DynamicsForce example

A force is modeled as a vector


A force is modeled as a vector• Length and direction



UIPushBehavior applies a force



UIPushBehavior applies a force• Continuous



UIPushBehavior applies a force• Continuous• Instantaneous


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


Overlay to show Physics


Overlay to show PhysicsVisualize fields, collision bounds, and attachments


Overlay to show PhysicsVisualize fields, collision bounds, and attachments Not API, but accessible in lldb



debugEnabled



debugEnableddebugInterval



debugEnableddebugIntervaldebugAnimationSpeed

UIDynamicItemBehavior


Customize physical properties


Customize physical propertiesApplied to one or more items

var elasticity: CGFloat var friction: CGFloat var density: CGFloat var resistance: CGFloat var angularResistance: CGFloat



var charge: CGFloat var anchored: Bool

var var var var var



Distance attachment


Distance attachmentCustomizable Damping and Frequency



Limit Attachment


Limit AttachmentBehaves like a rope between items


Limit AttachmentBehaves like a rope between itemsAttachment point offset from each item’s center


Fixed Attachment


Attachment anchor

Fixed AttachmentItems positioned with respect to the attachment anchor point


Attachment anchor

Fixed AttachmentItems positioned with respect to the attachment anchor pointNo relative movement


Pin Attachment


Attachment anchor

Pin AttachmentItems positioned with respect to the attachment anchor point


Attachment anchor

Range

Pin AttachmentItems positioned with respect to the attachment anchor pointSpecify a rotatable range


Sliding Attachment


Attachment anchor

Sliding AttachmentItems positioned with respect to the attachment anchor point


Axis of translation

Attachment anchor

Sliding AttachmentItems positioned with respect to the attachment anchor pointAllows only relative translation along a specified axis


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


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

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)

UIVisualEffectViewUIVibrancyEffect

let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)

let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)

blurView.contentView.addSubview(vibrancyView)

vibrancyView.contentView.addSubview(label)

UIVisualEffectViewAnd action!


Bounds


BoundsEffect

UIVisualEffectViewAnatomy of an effect


Capture Area

Apply Effect


Capture Area


Apply EffectCapture Area


Apply EffectCapture Area Copy Back


Apply Effect Offscreen PassCapture Area Copy Back

UIVisualEffectViewOffscreen Passes

AlphaMaskingBlurVibrancySnapshotting

UIVisualEffectViewOffscreen Passes

AlphaMaskingBlurVibrancySnapshottingUIView.snapshotViewAfterScreenUpdates(afterUpdates:) UIView.drawViewHierarchyInRect(rect:, afterScreenUpdates:) UIScreen.snapshotViewAfterScreenUpdates()

UIVisualEffectViewAnatomy of a broken effect

VisualEffectView/Blur


Capture Area


Capture Area Nothing!

UIVisualEffectViewFixing broken effects


For help in lldb- (NSString *)_whatsWrongWithThisEffect



(lldb) po [myEffectView _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.


Rearrange view hierarchy• Effective for Alpha and Masking

Blur

Content

apply alpha or masking

Root

Container


Rearrange view hierarchy• Effective for Alpha and Masking

ContainerBlur

Content

apply alpha or masking

Root


Mask views individually

Blur ContentContent

mask addedContainer



Blur ContentContent

Container



Blur ContentContent

mask added

Container


Snapshot the window or screen

View Snapshot requested

Content

Content

Blur

Window

Screen



Content

Content

Blur

Window

Screen

View Snapshot requested



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 LayoutCustom UIDynamicItem


Subclass NSObject


Subclass NSObjectConform to UIDynamicItem


Subclass NSObjectConform to UIDynamicItemProvide .bounds


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 [email protected]

what's new in uikit dynamics and visual eﬀects - apple inc. · 2016. 7. 8. ·...

Documents