What's New in UIKit Dynamics and Visual Effects Session 229

Transcription

1 App Frameworks #WWDC15 What's New in UIKit Dynamics and Visual Effects Session 229 Michael Turner UIKit Engineer David Duncan UIKit Engineer 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Recommended Sessions Getting Started with UIKit Dynamics Advanced Techniques with UIKit Dynamics Creating Custom ios User Interfaces WWDC13 WWDC13 WWDC14

3 Agenda What we will cover

4 Agenda What we will cover A basic overview

5 Agenda What we will cover A basic overview What s new in UIKit Dynamics

6 Agenda What we will cover A basic overview What s new in UIKit Dynamics Utilizing UIVisualEffectView in your app

7 Agenda What we will cover A basic overview What s new in UIKit Dynamics Utilizing UIVisualEffectView in your app Best practices for working with UIKit Dynamics and Auto Layout

8 UIKit Dynamics

9 UIKit Dynamics 2D Physics-inspired animation system

10 UIKit Dynamics 2D Physics-inspired animation system Composable and declarative

11 UIKit Dynamics 2D Physics-inspired animation system Composable and declarative Not a replacement for Core Animation or UIView animations

12 UIKit Dynamics Sliding example

13 UIKit Dynamics Sliding example

14 UIKit Dynamics Sliding example

15 UIKit Dynamics Sliding example Define the coordinate system

16 UIKit Dynamics Sliding example Define the coordinate system Provide the overall context for animation UIDynamicAnimator

17 UIKit Dynamics Sliding example Define the coordinate system Provide the overall context for animation Keep track of behaviors UIDynamicAnimator SlidingBehavior

18 UIKit Dynamics Sliding example Define the coordinate system Provide the overall context for animation Keep track of behaviors UIDynamicAnimator SlidingBehavior UIGravityBehavior UICollisionBehavior UIAttachmentBehavior

19 UIKit Dynamics Sliding example Define the coordinate system Provide the overall context for animation Keep track of behaviors UIDynamicItems are associated with one or more behaviors UIDynamicAnimator SlidingBehavior UIGravityBehavior UICollisionBehavior UIAttachmentBehavior UIView

20 UIKit Dynamics What s new

21 UIKit Dynamics What s new Support for non-rectangular collision bounds

22 UIKit Dynamics What s new Support for non-rectangular collision bounds UIDynamicItemGroup

23 UIKit Dynamics What s new Support for non-rectangular collision bounds UIDynamicItemGroup UIFieldBehavior models vector force fields

24 UIKit Dynamics What s new Support for non-rectangular collision bounds UIDynamicItemGroup UIFieldBehavior models vector force fields UIDynamicItemBehavior

25 UIKit Dynamics What s new Support for non-rectangular collision bounds UIDynamicItemGroup UIFieldBehavior models vector force fields UIDynamicItemBehavior UISnapBehavior

26 UIKit Dynamics What s new Support for non-rectangular collision bounds UIDynamicItemGroup UIFieldBehavior models vector force fields UIDynamicItemBehavior UISnapBehavior UIAttachmentBehavior

27 UIKit Dynamics What s new Support for non-rectangular collision bounds UIDynamicItemGroup UIFieldBehavior models vector force fields UIDynamicItemBehavior UISnapBehavior UIAttachmentBehavior New ways to debug dynamic animations

28 Collision Bounds UIDynamicItem

29 Collision Bounds UIDynamicItem enum UIDynamicItemCollisionBoundsType : UInt { }

30 Collision Bounds UIDynamicItem enum UIDynamicItemCollisionBoundsType : UInt { case Rectangle }

31 Collision Bounds UIDynamicItem enum UIDynamicItemCollisionBoundsType : UInt { case Rectangle case Ellipse }

32 Collision Bounds UIDynamicItem enum UIDynamicItemCollisionBoundsType : UInt { case Rectangle case Ellipse case Path }

33 Collision Bounds UIDynamicItem enum UIDynamicItemCollisionBoundsType : UInt { case Rectangle case Ellipse case Path } protocol UIDynamicItem : NSObjectProtocol { var center: CGPoint { get set } var bounds: CGRect { get } var transform: CGAffineTransform { get set } }

34 Collision Bounds UIDynamicItem enum UIDynamicItemCollisionBoundsType : UInt { case Rectangle case Ellipse case 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 }

35 Collision Bounds UIDynamicItem enum UIDynamicItemCollisionBoundsType : UInt { case Rectangle case Ellipse case 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 }

36 UIDynamicItemCollisionBoundsType Path Convex Convex Counter-clockwise wound Non-self intersecting Concave

37 UIDynamicItemGroup Individual Items UIDynamicItemGroup

38 UIDynamicItemGroup Makes multiple dynamic items behave as one Individual Items UIDynamicItemGroup

39 UIDynamicItemGroup Makes multiple dynamic items behave as one Individual Items UIDynamicItemGroup Preserves the individual collision bounds

40 UIDynamicItemGroup Makes multiple dynamic items behave as one Individual Items UIDynamicItemGroup Preserves the individual collision bounds Dynamic items in a group must not be added to behaviors individually

41 UIDynamicItemGroup Makes multiple dynamic items behave as one Individual Items UIDynamicItemGroup Preserves the individual collision bounds Dynamic items in a group must not be added to behaviors individually A group cannot contain other groups

42 UIDynamicItemGroup Makes multiple dynamic items behave as one Individual Items UIDynamicItemGroup Preserves the individual collision bounds Dynamic items in a group must not be added to behaviors individually A group cannot contain other groups Concave or other complex shapes are possible

43 UIKit Dynamics Force example

44 UIKit Dynamics Force example

45 UIKit Dynamics Force example

46 UIKit Dynamics Force example A force is modeled as a vector

47 UIKit Dynamics Force example A force is modeled as a vector Length and direction

48 UIKit Dynamics Force example A force is modeled as a vector Length and direction UIPushBehavior applies a force

49 UIKit Dynamics Force example A force is modeled as a vector Length and direction UIPushBehavior applies a force Continuous

50 UIKit Dynamics Force example A force is modeled as a vector Length and direction UIPushBehavior applies a force Continuous Instantaneous

51 UIKit Dynamics Force example A force is modeled as a vector Length and direction UIPushBehavior applies a force Continuous Instantaneous

52 UIKit Dynamics Force example

53 UIKit Dynamics Force example Vertical motion over time of the sliding view y Time

54 UIKit Dynamics Force example Vertical motion over time of the sliding view Initial Impulse applied y Time

55 UIKit Dynamics Force example Vertical motion over time of the sliding view Initial Impulse applied Gravity causes the view s velocity to slow y and eventually reverse direction Time

56 Physics Fields Linear Gravity as a field Linear Gravity Field

57 Physics Fields Linear Gravity as a field A function that assigns a vector to each point in a domain Linear Gravity Field

58 UIFieldBehavior

59 UIFieldBehavior UIFieldBehavior can be added to a region of your view UIRegion Lines of force

60 UIFieldBehavior UIFieldBehavior can be added to a region of your view UIRegion The field is evaluated at each point within the region Lines of force

61 UIFieldBehavior UIFieldBehavior can be added to a region of your view UIRegion The field is evaluated at each point within the region Resulting forces are applied by the animator Lines of force

62 UIFieldBehavior UIFieldBehavior can be added to a region of your view UIRegion The field is evaluated at each point within the region Resulting forces are applied by the animator UIGravityBehavior is a field already! Lines of force

63 UIFieldBehavior UIFieldBehavior can be added to a region of your view UIRegion The field is evaluated at each point within the region Resulting forces are applied by the animator UIGravityBehavior is a field already! Simplified physics, well-tuned for performance; not useful for building interstellar space stations Lines of force

64 UIFieldBehavior Linear Gravity Radial Gravity Noise Custom Drag and Velocity, Vortex, Turbulence, Spring, Electric and Magnetic

65 UIFieldBehavior Linear Gravity

66 UIFieldBehavior Linear Gravity Field properties var region: UIRegion var direction: CGVector var strength: CGFloat

67 UIFieldBehavior Radial Gravity

68 UIFieldBehavior Radial Gravity Field properties var position: CGPoint var region: UIRegion var strength: CGFloat var falloff: CGFloat var minimumradius: CGFloat

69 UIFieldBehavior Noise

70 UIFieldBehavior Noise Field properties var region: UIRegion var strength: CGFloat var smoothness: CGFloat var animationspeed: CGFloat

71 UIFieldBehavior Custom

72 UIFieldBehavior Custom Field Sample position velocity mass charge time

73 Demo UIKit Dynamics StickyCorners

74 Debugging UIKit Dynamics

75 Debugging UIKit Dynamics Overlay to show Physics

76 Debugging UIKit Dynamics Overlay to show Physics Visualize fields, collision bounds, and attachments

77 Debugging UIKit Dynamics Overlay to show Physics Visualize fields, collision bounds, and attachments Not API, but accessible in lldb

78 Debugging UIKit Dynamics Overlay to show Physics Visualize fields, collision bounds, and attachments Not API, but accessible in lldb debugenabled

79 Debugging UIKit Dynamics Overlay to show Physics Visualize fields, collision bounds, and attachments Not API, but accessible in lldb debugenabled debuginterval

80 Debugging UIKit Dynamics Overlay to show Physics Visualize fields, collision bounds, and attachments Not API, but accessible in lldb debugenabled debuginterval debuganimationspeed

81 UIDynamicItemBehavior

82 UIDynamicItemBehavior Customize physical properties

83 UIDynamicItemBehavior Customize physical properties Applied to one or more items

84 UIDynamicItemBehavior Customize physical properties Applied to one or more items var elasticity: CGFloat var friction: CGFloat var density: CGFloat var resistance: CGFloat var angularresistance: CGFloat

85 UIDynamicItemBehavior Customize physical properties Applied to one or more items var var var var var var charge: CGFloat var anchored: Bool

86 UIAttachmentBehavior

87 UIAttachmentBehavior Distance attachment

88 UIAttachmentBehavior Distance attachment Customizable Damping and Frequency

89 UIAttachmentBehavior

90 UIAttachmentBehavior Limit Attachment

91 UIAttachmentBehavior Limit Attachment Behaves like a rope between items

92 UIAttachmentBehavior Limit Attachment Behaves like a rope between items Attachment point offset from each item s center

93 UIAttachmentBehavior

94 UIAttachmentBehavior Fixed Attachment

95 UIAttachmentBehavior Fixed Attachment Items positioned with respect to the attachment anchor point Attachment anchor

96 UIAttachmentBehavior Fixed Attachment Items positioned with respect to the attachment anchor point No relative movement Attachment anchor

97 UIAttachmentBehavior

98 UIAttachmentBehavior Pin Attachment

99 UIAttachmentBehavior Pin Attachment Items positioned with respect to the attachment anchor point Attachment anchor

100 UIAttachmentBehavior Pin Attachment Items positioned with respect to the attachment anchor point Specify a rotatable range Range Attachment anchor

101 UIAttachmentBehavior Pin Attachment Items positioned with respect to the attachment anchor point Specify a rotatable range Range Attachment anchor

102 UIAttachmentBehavior

103 UIAttachmentBehavior Sliding Attachment

104 UIAttachmentBehavior Sliding Attachment Items positioned with respect to the attachment anchor point Attachment anchor

105 UIAttachmentBehavior Axis of translation Sliding Attachment Items positioned with respect to the attachment anchor point Allows only relative translation along a specified axis Attachment anchor

106 UIAttachmentBehavior Axis of translation Sliding Attachment Items positioned with respect to the attachment anchor point Allows only relative translation along a specified axis Prevents relative rotation of the Attachment anchor dynamic items

107 UIAttachmentBehavior Axis of translation Sliding Attachment Items positioned with respect to the attachment anchor point Allows only relative translation Range along a specified axis Prevents relative rotation of the Attachment anchor dynamic items Specify a translatable range

108 UIAttachmentBehavior Axis of translation Sliding Attachment Items positioned with respect to the attachment anchor point Allows only relative translation Range along a specified axis Prevents relative rotation of the Attachment anchor dynamic items Specify a translatable range

109

110

111 UISnapBehavior

112 UISnapBehavior Snap a view in place

113 UISnapBehavior Snap a view in place Customizable damping

114 UISnapBehavior Snap a view in place Customizable damping Customizable snappoint

115 UISnapBehavior Snap a view in place Customizable damping Customizable snappoint

116 Visual Effects Adding style to your app David Duncan UIKit Engineer

117 UIVisualEffectView Stylish Overlays

118 UIVisualEffectView UIBlurEffect enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark } let blureffect = UIBlurEffect(style:.ExtraLight) let blurview = UIVisualEffectView(effect: blureffect)

119 UIVisualEffectView UIBlurEffect enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark } let blureffect = UIBlurEffect(style:.ExtraLight) let blurview = UIVisualEffectView(effect: blureffect)

120 UIVisualEffectView UIBlurEffect enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark } let blureffect = UIBlurEffect(style:.ExtraLight) let blurview = UIVisualEffectView(effect: blureffect)

121 UIVisualEffectView UIBlurEffect enum UIBlurEffectStyle : Int { case ExtraLight case Light case Dark } let blureffect = UIBlurEffect(style:.ExtraLight) let blurview = UIVisualEffectView(effect: blureffect)

122 UIVisualEffectView UIVibrancyEffect let vibrancyeffect = UIVibrancyEffect(forBlurEffect: blureffect) let vibrancyview = UIVisualEffectView(effect:vibrancyEffect) blurview.contentview.addsubview(vibrancyview) vibrancyview.contentview.addsubview(label)

123 UIVisualEffectView UIVibrancyEffect let vibrancyeffect = UIVibrancyEffect(forBlurEffect: blureffect) let vibrancyview = UIVisualEffectView(effect:vibrancyEffect) blurview.contentview.addsubview(vibrancyview) vibrancyview.contentview.addsubview(label)

124 UIVisualEffectView UIVibrancyEffect let vibrancyeffect = UIVibrancyEffect(forBlurEffect: blureffect) let vibrancyview = UIVisualEffectView(effect:vibrancyEffect) blurview.contentview.addsubview(vibrancyview) vibrancyview.contentview.addsubview(label)

125 UIVisualEffectView UIVibrancyEffect let vibrancyeffect = UIVibrancyEffect(forBlurEffect: blureffect) let vibrancyview = UIVisualEffectView(effect:vibrancyEffect) blurview.contentview.addsubview(vibrancyview) vibrancyview.contentview.addsubview(label)

126 UIVisualEffectView UIVibrancyEffect let vibrancyeffect = UIVibrancyEffect(forBlurEffect: blureffect) let vibrancyview = UIVisualEffectView(effect:vibrancyEffect) blurview.contentview.addsubview(vibrancyview) vibrancyview.contentview.addsubview(label)

127 UIVisualEffectView And action!

128 UIVisualEffectView And action! Bounds

129 UIVisualEffectView And action! Bounds Effect

130 UIVisualEffectView Anatomy of an effect

131 UIVisualEffectView Anatomy of an effect Capture Area

132 UIVisualEffectView Anatomy of an effect Capture Area

133 UIVisualEffectView Anatomy of an effect Capture Area

134 UIVisualEffectView Anatomy of an effect Capture Area Apply Effect

135 UIVisualEffectView Anatomy of an effect Capture Area Apply Effect

136 UIVisualEffectView Anatomy of an effect Capture Area Apply Effect Copy Back

137 UIVisualEffectView Anatomy of an effect Capture Area Apply Effect Copy Back Offscreen Pass

138 UIVisualEffectView Offscreen Passes Alpha Masking Blur Vibrancy Snapshotting

139 UIVisualEffectView Offscreen Passes Alpha Masking Blur Vibrancy Snapshotting UIView.snapshotViewAfterScreenUpdates(afterUpdates:) UIView.drawViewHierarchyInRect(rect:, afterscreenupdates:) UIScreen.snapshotViewAfterScreenUpdates()

140 UIVisualEffectView Offscreen Passes Alpha Masking Blur Vibrancy Snapshotting UIView.snapshotViewAfterScreenUpdates(afterUpdates:) UIView.drawViewHierarchyInRect(rect:, afterscreenupdates:) UIScreen.snapshotViewAfterScreenUpdates()

141 UIVisualEffectView Anatomy of a broken effect VisualEffectView/Blur

142 UIVisualEffectView Anatomy of a broken effect Capture Area

143 UIVisualEffectView Anatomy of a broken effect Capture Area

144 UIVisualEffectView Anatomy of a broken effect Capture Area

145 UIVisualEffectView Anatomy of a broken effect Capture Area Nothing!

146 UIVisualEffectView Fixing broken effects

147 UIVisualEffectView Fixing broken effects For help in lldb - (NSString *)_whatswrongwiththiseffect

148 UIVisualEffectView Fixing broken effects For help in lldb - (NSString *)_whatswrongwiththiseffect (lldb) po [myeffectview _whatswrongwiththiseffect]

149 UIVisualEffectView Fixing broken effects For help in lldb - (NSString *)_whatswrongwiththiseffect (lldb) po [myeffectview _whatswrongwiththiseffect] ISSUE: One or more masking superviews have been found. <UIView: 0x7fa ; 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.

150 UIVisualEffectView Fixing broken effects Rearrange view hierarchy Effective for Alpha and Masking Root Container apply alpha or masking Blur Content

151 UIVisualEffectView Fixing broken effects Rearrange view hierarchy Effective for Alpha and Masking Root Blur Container apply alpha or masking Content

152 UIVisualEffectView Fixing broken effects Rearrange view hierarchy Effective for Alpha and Masking Root Blur Container apply alpha or masking Content

153 UIVisualEffectView Fixing broken effects Mask views individually Container mask added Content Blur Content

154 UIVisualEffectView Fixing broken effects Mask views individually Container Content Blur Content

155 UIVisualEffectView Fixing broken effects Mask views individually Container Content Blur Content mask added

156 UIVisualEffectView Fixing broken effects Snapshot the window or screen Screen Window Content Content View Snapshot requested Blur

157 UIVisualEffectView Fixing broken effects Snapshot the window or screen Screen Window View Snapshot requested Content Content Blur

158 UIVisualEffectView Fixing broken effects Snapshot the window or screen Screen Window View Snapshot requested Content Content Blur

159 UIVisualEffectView Fixing broken effects Snapshot the window or screen Screen View Screen Snapshot requested Window Content Content Blur

160 UIKit Dynamics and Auto Layout

161 UIKit Dynamics and Auto Layout Follow via Auto Layout UIKit Dynamics outside dynamicsview.translatesautoresizingmaskintoconstraints = true Auto Layout inside innerview.leadinganchor.constraintequaltoanchor(dynamicsview.leadinganchor)

162 UIKit Dynamics and Auto Layout Follow via Auto Layout Lola 011.jpg

163 UIKit Dynamics and Auto Layout Follow via Auto Layout Lola 011.jpg

164 UIKit Dynamics and Auto Layout Custom UIDynamicItem

165 UIKit Dynamics and Auto Layout Custom UIDynamicItem Subclass NSObject

166 UIKit Dynamics and Auto Layout Custom UIDynamicItem Subclass NSObject Conform to UIDynamicItem

167 UIKit Dynamics and Auto Layout Custom UIDynamicItem Subclass NSObject Conform to UIDynamicItem Provide.bounds

168 UIKit Dynamics and Auto Layout Custom UIDynamicItem Subclass NSObject Conform to UIDynamicItem Provide.bounds Update constraints when.center and.transform change

169 Demo UIKit Dynamics and Auto Layout

170 Summary Focus on the user experience Always consider performance impact when adding advanced effects

171 Related Sessions and Labs Getting Started with Multitasking on ipad in ios 9 Presidio Tuesday 4:30PM Multitasking Essentials for Media-Based Apps on ipad 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

172 More Information Documentation UIDynamicAnimator Class Reference UIFieldBehavior Class Reference Technical Support Apple Developer Forums Developer Technical Support UIDynamicBehavior Class Reference UIAttachmentBehavior Class Reference Curt Rothert Sample Code StickyCorners App Frameworks Evangelist

173