Page 1
© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
#WWDC15
Layout and Animation Techniques For WatchKit
Miguel Sanchez WatchKit EngineerTom Witkin WatchKit Engineer
App Frameworks
Session 216
Page 3
Agenda
Layout Fundamentals
Page 4
Agenda
Layout FundamentalsUsing Groups
Page 5
Agenda
Layout FundamentalsUsing GroupsExisting Animations in watchOS 1
Page 6
Agenda
Layout FundamentalsUsing GroupsExisting Animations in watchOS 1New Animation API in watchOS 2
Page 7
Layout Fundamentals
Page 8
WatchKit Layout Model
Page 9
WatchKit Layout Model
Same model as WatchKit in watchOS 1
Page 10
WatchKit Layout Model
Same model as WatchKit in watchOS 1Different from UIKit and AppKit
Page 11
WatchKit Layout Model
Same model as WatchKit in watchOS 1Different from UIKit and AppKitFlow-based layout
Page 12
WatchKit Layout ModelFlow-based layout
Page 13
Interface Controller
10:09
WatchKit Layout ModelFlow-based layout
Page 14
Interface Controller
10:09
WatchKit Layout ModelFlow-based layout
Page 15
Interface Controller
10:09
WatchKit Layout ModelFlow-based layout
Image
Page 16
Interface Controller
10:09
WatchKit Layout ModelFlow-based layout
Image
Page 17
Interface Controller
10:09
WatchKit Layout ModelFlow-based layout
Image
Button
Page 18
Interface Controller
10:09
WatchKit Layout ModelFlow-based layout
Image
Button
Page 19
Interface Controller
10:09
WatchKit Layout ModelGroups are containers of elements
Group
Image
Button
Page 20
Interface Controller
10:09
WatchKit Layout ModelGroups are containers of elements
Group
Image
Button
Page 21
Interface Controller
10:09
Label
WatchKit Layout ModelGroups are containers of elements
Image
Button
Image
Page 22
WatchKit Layout Programming Model
Page 23
WatchKit Layout Programming Model
You don’t write object creation code
Page 24
WatchKit Layout Programming Model
You don’t write object creation codeFine tuned control of:
Page 25
WatchKit Layout Programming Model
You don’t write object creation codeFine tuned control of:• Layout hierarchy
Page 26
WatchKit Layout Programming Model
You don’t write object creation codeFine tuned control of:• Layout hierarchy• Alignment and sizing
Page 27
WatchKit Layout Programming Model
You don’t write object creation codeFine tuned control of:• Layout hierarchy• Alignment and sizing• Animation
Page 28
Alignment and Sizing
Page 29
Alignment and SizeProperties on WKInterfaceObject
Page 30
Alignment and SizeProperties on WKInterfaceObject
Page 31
Alignment and SizeProperties on WKInterfaceObject
Alignment in containing object
Page 32
Alignment and SizeProperties on WKInterfaceObject
Alignment in containing object• Horizontal and vertical
Page 33
Alignment and SizeProperties on WKInterfaceObject
Alignment in containing object• Horizontal and vertical• Left, center, or right
Page 34
Alignment and SizeProperties on WKInterfaceObject
Alignment in containing object• Horizontal and vertical• Left, center, or right
Size
Page 35
Alignment and SizeProperties on WKInterfaceObject
Alignment in containing object• Horizontal and vertical• Left, center, or right
Size• Width and height heuristic
Page 36
Alignment and SizeProperties on WKInterfaceObject
Alignment in containing object• Horizontal and vertical• Left, center, or right
Size• Width and height heuristic• Fixed, relative, or sized to fit
Page 37
Alignment APIWKInterfaceObject
func setHorizontalAlignment(WKInterfaceObjectHorizontalAlignment) func setVerticalAlignment(WKInterfaceObjectVerticalAlignment)
enum WKInterfaceObjectHorizontalAlignment { case Left case Center case Right }
enum WKInterfaceObjectVerticalAlignment { case Top case Center case Bottom }
Page 38
Alignment in Containing Element
myObj.setHorizontalAlignment(.Left) myObj.setVerticalAlignment(.Top)
Page 39
myObj.setHorizontalAlignment(.Center) myObj.setVerticalAlignment(.Center)
Alignment in Containing Element
Page 40
myObj.setHorizontalAlignment(.Right) myObj.setVerticalAlignment(.Bottom)
Alignment in Containing Element
Page 41
Sizing APIWKInterfaceObject
func setWidth(CGFloat) func setHeight(CGFloat)
func setRelativeWidth(CGFloat, adjustment : CGFloat) func setRelativeHeight(CGFloat, adjustment : CGFloat)
func sizeToFitWidth() func sizeToFitHeight()
Page 42
Sizing APIWKInterfaceObject
func setWidth(CGFloat) func setHeight(CGFloat)
func setRelativeWidth(CGFloat, adjustment : CGFloat) func setRelativeHeight(CGFloat, adjustment : CGFloat)
func sizeToFitWidth() func sizeToFitHeight()
Page 43
Fixed Width and Height
myObj.setWidth(100) myObj.setHeight(100)
100
100
Page 44
Fixed Width and Height
myObj.setWidth(100) myObj.setHeight(100)
Interpreting values of zero
watchOS 1 - default to storyboard
watchOS 2 - zero value
100
100
Page 45
Relative to Container
Page 46
Relative to Container
myObj.setRelativeWidth(0.75, 0)
Page 47
.25 .50 .75
Relative to Container
myObj.setRelativeWidth(0.75, 0)
Page 48
Relative to Container
.25 .50 .75
.50
myObj.setRelativeHeight(0.50, 0)
myObj.setRelativeWidth(0.75, 0)
Page 49
.25 .50 .75
Adjustment Adds/Subtracts from Size
myObj.setRelativeWidth(0.75, 30)
myObj.setRelativeHeight(0.50, -30)
.50
Page 50
.25 .50 .75
Adjustment Adds/Subtracts from Size
myObj.setRelativeWidth(0.75, 30)
myObj.setRelativeHeight(0.50, -30)
.50
Page 51
Sized-to-Fit Content
myObj.sizeToFitWidth() myObj.sizeToFitHeight()
Page 52
Sized-to-Fit Content
myObj.sizeToFitWidth() myObj.sizeToFitHeight()
Page 53
Sized-to-Fit Content
myObj.sizeToFitWidth() myObj.sizeToFitHeight()
Sample Text
Page 54
Group ElementsFine tuning your layouts
Page 56
WKInterfaceGroup
Container without default content
Page 57
WKInterfaceGroup
Container without default content Tool for arranging elements
Page 58
WKInterfaceGroup
Container without default content Tool for arranging elements • Vertical or horizontal flow
Page 59
WKInterfaceGroup
Container without default content Tool for arranging elements • Vertical or horizontal flow• Nesting (including other groups)
Page 60
WKInterfaceGroup
Container without default content Tool for arranging elements • Vertical or horizontal flow• Nesting (including other groups)• Fine control of alignment and sizing
Page 61
Adding Horizontal Flow
Page 62
Adding Horizontal Flow
Page 63
Adding Horizontal Flow
Page 64
Adding Horizontal Flow
Page 65
Adding Horizontal Flow
Page 66
Adding Horizontal Flow
Page 67
Insets and Spacing
Page 68
Insets and Spacing
Left Inset (10 points)
Page 69
Insets and Spacing
Bottom Inset(10 points)
Page 70
Insets and Spacing
Top Inset(10 points)
Page 71
Insets and Spacing
Right Inset (10 points)
Page 72
Insets and Spacing
Spacing (10 points)
Page 73
Can Also Be Set at Top Level
Page 74
Can Also Be Set at Top Level
Left Inset (10 points)
Page 75
Can Also Be Set at Top LevelTop Inset (10 points)
Page 76
Can Also Be Set at Top Level
Spacing (10 points)
Page 77
Group Nesting for Complex Layouts
Page 78
Group Nesting for Complex Layouts
Page 79
Group Nesting for Complex Layouts
Page 80
Group Nesting for Complex Layouts
Page 81
Layouts in WKRecipes
Page 82
WKRecipesRecipe Viewer
Page 83
WKRecipesIngredients
Page 84
WKRecipesServings
Page 85
Let’s Explore Three Layouts
Page 88
Table Rows
Image Label
Page 89
Layout for Table Row Controller
Image Label
Page 90
Layout for Table Row Controller
Image LabelGroup with horizontal layout
Page 91
Insets and Spacing
Image Label
Page 92
Insets and Spacing
Image LabelLeft Inset(8 points)
Page 93
Insets and Spacing
Image Label
Bottom Inset(8 points)
Page 94
Insets and Spacing
Image Label
Top Inset(8 points)
Page 95
Insets and Spacing
Image LabelSpacing(8 points)
Page 96
Alignment
Image Label
Page 97
Alignment
Image LabelHorizontal: LeftVertical: Center
Horizontal: LeftVertical: Center
Page 98
Sizing
Image Label
Page 99
Sizing
Image LabelFixed SizeWidth 30Height 30
Page 100
Sizing
Image LabelFixed SizeWidth 30Height 30
Size To Fit
Page 101
Table Row Layout
Page 102
Table Row Layout
Groups with horizontal layout
Page 103
Table Row Layout
Groups with horizontal layoutFine tune• Alignment• Insets and spacing• Sizing
Page 104
Layout for Ingredients Controller
Page 105
Layout for Ingredients Controller
Number inside circle Label
Page 106
Layout for Ingredients Controller
Page 107
Layout for Ingredients Controller
Group with horizontal layout
Page 108
Layout for Ingredients Controller
Group with horizontal layoutLabel
Page 109
Layout for Ingredients Controller
Group with horizontal layoutLabel
Page 110
Layout for Ingredients Controller
Nested GroupLabel
Page 111
Groups Can Have Backgrounds
Label
Page 112
Groups Can Have Backgrounds
Group withblue background and radius of 8
Label
Page 113
Alignment of Number Label
10 Label
Page 114
Alignment of Number Label
10Centered in group Label
Page 115
Insets and Spacing
10 Label
Page 116
Insets and Spacing
Left Inset 10 Label
Page 117
Insets and Spacing
Bottom Inset
10 Label
Page 118
Insets and Spacing
Top Inset
10 Label
Page 119
Insets and Spacing
Spacing
10 Label
Page 120
Ingredients Controller Layout
Page 121
Ingredients Controller Layout
Nested groups
Page 122
Ingredients Controller Layout
Nested groupsGroups with background
Page 123
Ingredients Controller Layout
Nested groupsGroups with background • Color• Images
Page 124
Layout for Servings Controller
Page 125
Layout for Servings Controller
Circular layout
Page 126
Layout for Servings Controller
Circular layoutLabel
Page 127
Layout for Servings Controller
4
Page 128
Three Top-Level Groups
Page 129
Three Top-Level Groups
Page 130
Three Top-Level Groups
4
Page 131
Three Top-Level Groups
4
Page 132
Group Alignment and Sizing
4
Page 133
Group Alignment and Sizing
4
Horizontal: CenterFixed Size
Page 134
Group Alignment and Sizing
4
Horizontal: CenterFixed Size
Width relative to100% of container
Page 135
Second Group Has Nested Groups
4
Page 136
Second Group Has Nested Groups
4
Page 137
Second Group Has Nested Groups
4
Page 138
Second Group Has Nested Groups
4
Page 139
Second Group Has Nested Groups
4
Page 140
Alignment Inside Groups
Page 141
Alignment Inside Groups
Page 142
Alignment Inside Groups
Horizontal: RightVertical: Top
Page 143
Alignment Inside Groups
Horizontal: LeftVertical: Center
Horizontal: RightVertical: Top
Page 144
Alignment Inside Groups
Horizontal: RightVertical: Bottom
Horizontal: LeftVertical: Center
Horizontal: RightVertical: Top
Page 145
Ingredients Controller Layout
Page 146
Ingredients Controller Layout
Group nesting for complex layouts
Page 147
Ingredients Controller Layout
Group nesting for complex layoutsDon’t abuse power of groups
Page 148
Implications of Complex Layouts
Page 149
Implications of Complex Layouts
WatchKit has no APIs for direct element creation
Page 150
Implications of Complex Layouts
WatchKit has no APIs for direct element creationWhat you describe in IB is created
Page 151
Implications of Complex Layouts
WatchKit has no APIs for direct element creationWhat you describe in IB is createdHidden objects
Page 152
Implications of Complex Layouts
WatchKit has no APIs for direct element creationWhat you describe in IB is createdHidden objects• Creation cost
Page 153
Implications of Complex Layouts
WatchKit has no APIs for direct element creationWhat you describe in IB is createdHidden objects• Creation cost• Save on layout cost
Page 154
Using Images in Layouts
Page 155
Using Images in Layouts
Don’t ignore transfer costs
Page 156
Using Images in Layouts
Don’t ignore transfer costs• watchOS 1 apps run extension on iPhone
Page 157
Using Images in Layouts
Don’t ignore transfer costs• watchOS 1 apps run extension on iPhone• watchOS 2 apps need to install extension
Page 158
Using Images in Layouts
Don’t ignore transfer costs• watchOS 1 apps run extension on iPhone• watchOS 2 apps need to install extension
Use appropriate sizes
Page 159
Using Images in Layouts
Don’t ignore transfer costs• watchOS 1 apps run extension on iPhone• watchOS 2 apps need to install extension
Use appropriate sizesImage slicing can accommodate various sizes
Page 160
Animations
Tom Witkin WatchKit Engineer
Page 161
Existing Methods of AnimationTables and animated images
Page 162
TablesCertain updates already animate
Page 163
TablesCertain updates already animate
Insert rows
Page 164
TablesCertain updates already animate
Insert rowsRemove rows
Page 165
TablesCertain updates already animate
Insert rowsRemove rowsUpdate row content
Page 167
AlphabeticalRanking
Page 168
AlphabeticalRanking
Page 169
AlphabeticalRanking
Page 170
AlphabeticalRanking
Page 171
Tables
[self.recipeTable insertRowsAtIndexes:[NSIndexSet indexSetWithIndex:0] withRowType:@"status"]; StatusRowController *rc = [self.recipeTable rowControllerAtIndex:0]; [rc setText:text]; self.statusRowTimer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(hideStatusRow) userInfo:nil repeats:NO];
Insert and remove rows
Page 172
TablesInsert and remove rows
[self.recipeTable insertRowsAtIndexes:[NSIndexSet indexSetWithIndex:0] withRowType:@"status"]; StatusRowController *rc = [self.recipeTable rowControllerAtIndex:0]; [rc setText:text]; self.statusRowTimer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(hideStatusRow) userInfo:nil repeats:NO];
Page 173
TablesInsert and remove rows
[self.recipeTable insertRowsAtIndexes:[NSIndexSet indexSetWithIndex:0] withRowType:@"status"]; StatusRowController *rc = [self.recipeTable rowControllerAtIndex:0]; [rc setText:text]; self.statusRowTimer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(hideStatusRow) userInfo:nil repeats:NO];
Page 174
TablesInsert and remove rows
[self.recipeTable insertRowsAtIndexes:[NSIndexSet indexSetWithIndex:0] withRowType:@"status"]; StatusRowController *rc = [self.recipeTable rowControllerAtIndex:0]; [rc setText:text]; self.statusRowTimer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(hideStatusRow) userInfo:nil repeats:NO];
Page 175
TablesInsert and remove rows
Page 176
TablesInsert and remove rows
Insert or remove rows of any type
Page 177
TablesInsert and remove rows
Insert or remove rows of any typeTo avoid animations
setRowTypes() setNumberOfRows(_:, withRowType:)
Page 178
TablesInsert and remove rows
Insert or remove rows of any typeTo avoid animations
setRowTypes() setNumberOfRows(_:, withRowType:)
Page 184
Groups as Spacing Elements
Page 185
Groups as Spacing Elements
Table Cell
Page 186
Groups as Spacing Elements
Page 187
Groups as Spacing Elements
shortDescriptionLabel
Page 188
Groups as Spacing Elements
shortDescriptionLabel
moreLabel
Page 189
Groups as Spacing Elements
shortDescriptionLabel
moreLabel
fullDescriptionLabel
Page 190
Groups as Spacing Elements
shortDescriptionLabel
moreLabel
fullDescriptionLabel
Hidden Objects
Page 191
Groups as Spacing Elements
shortDescriptionLabel
moreLabel
fullDescriptionLabel
Hidden Objects
Page 192
TablesReload row content
DescriptionRowController *rc = [self.table rowControllerAtIndex:0]; [rc.fullDescriptionLabel setHidden:NO]; [rc.shortDescriptionLabel setHidden:YES]; [rc.moreLabel setHidden:YES];
Page 193
TablesReload row content
Page 194
TablesReload row content
Rows reload when content changes in height
Page 195
TablesReload row content
Rows reload when content changes in heightMake sure rows have size to fit height
Page 196
TablesReload row content
Rows reload when content changes in heightMake sure rows have size to fit height
Page 204
Animated Images
Cycle through a series of images
Page 205
Animated Images
Cycle through a series of imagesRepeat and reverse animations
Page 206
Animated Images
Cycle through a series of imagesRepeat and reverse animationsOptimizing images is important• Reduce size and number of images
Page 207
WKInterfacePicker
0%10%20%30%
Page 208
WKInterfacePicker
0%10%20%30%40%50%60%70%
Page 209
Related Session
WatchKit In-Depth, Part 2 WWDC15 Videos
Page 211
Animatable Properties
Page 212
Animatable Properties
Opacity
Page 213
Animatable Properties
OpacityWidth / height
Page 214
Animatable Properties
OpacityWidth / heightAlignment
Page 215
Animatable Properties
OpacityWidth / heightAlignmentBackground color
Page 216
Animatable Properties
OpacityWidth / heightAlignmentBackground colorColor / tint color
Page 217
Animatable Properties
OpacityWidth / heightAlignmentBackground colorColor / tint colorGroup insets
Page 218
New APIWKInterfaceController
func animateWithDuration(duration: NSTimeInterval, animations: () -> Void)
Page 219
Animation Examples
Page 226
Sequential Animations
for (NSInteger i = 0; i < self.outerGroups.count; i++) { WKInterfaceGroup *group = self.outerGroups[i]; dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, (int64_t)delay); dispatch_after(time, dispatch_get_main_queue(), ^{
[self animateWithDuration:duration animations:^{ [group setAlpha:alpha]; }];
}); }
Page 227
Sequential Animations
for (NSInteger i = 0; i < self.outerGroups.count; i++) { WKInterfaceGroup *group = self.outerGroups[i]; dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, (int64_t)delay); dispatch_after(time, dispatch_get_main_queue(), ^{
[self animateWithDuration:duration animations:^{ [group setAlpha:alpha]; }];
}); }
Page 228
Sequential Animations
for (NSInteger i = 0; i < self.outerGroups.count; i++) { WKInterfaceGroup *group = self.outerGroups[i]; dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, (int64_t)delay); dispatch_after(time, dispatch_get_main_queue(), ^{
[self animateWithDuration:duration animations:^{ [group setAlpha:alpha]; }];
}); }
Page 229
Sequential Animations
for (NSInteger i = 0; i < self.outerGroups.count; i++) { WKInterfaceGroup *group = self.outerGroups[i]; dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, (int64_t)delay); dispatch_after(time, dispatch_get_main_queue(), ^{
[self animateWithDuration:duration animations:^{ [group setAlpha:alpha]; }];
}); }
Page 230
New APIWKInterfaceController
- (void)didAppear; - (void)willDisappear;
Page 231
New APIWKInterfaceController
- (void)didAppear; - (void)willDisappear;
*Coming in a future watchOS 2 seed
Page 232
Sequential Animations
Page 233
Sequential Animations
Page 234
Use -didAppear, not -willActivate
Sequential Animations
Page 235
Use -didAppear, not -willActivateStagger animations using timers or GCD
Sequential Animations
Page 236
Use -didAppear, not -willActivateStagger animations using timers or GCD• Interface controller must be active
Sequential Animations
Page 237
Use -didAppear, not -willActivateStagger animations using timers or GCD• Interface controller must be active• Keep total duration short
Sequential Animations
Page 238
Use -didAppear, not -willActivateStagger animations using timers or GCD• Interface controller must be active• Keep total duration short
Set initial animation values in storyboard
Sequential Animations
Page 239
Use -didAppear, not -willActivateStagger animations using timers or GCD• Interface controller must be active• Keep total duration short
Set initial animation values in storyboard
Sequential Animations
Page 245
Groups as Spacing Elements
Page 246
Groups as Spacing Elements
Page 247
Groups as Spacing Elements
numberBackground
Page 248
Groups as Spacing Elements
numberBackground textLabel
Page 249
Groups as Spacing Elements
numberBackgroundspacerGroup
textLabel
Page 250
Groups as Spacing Elements
spacerGroup
Page 251
Groups as Spacing Elements
Page 252
Groups as Spacing Elements
Page 253
Groups as Spacing Elements
textLabelnumberBackground
Page 254
Groups as Spacing Elements
[self animateWithDuration:0.3 animations:^{
for (NSInteger i = 0 ; i < self.instructionsTable.numberOfRows; i++) {
IngredientRowController *rowController = [self.instructionsTable rowControllerAtIndex:i];
[rowController.numberBackground setAlpha:1.0]; [rowController.textLabel setAlpha:1.0]; [rowController.spacerGroup setWidth:0.0];
}];
}
Page 255
Groups as Spacing Elements
[self animateWithDuration:0.3 animations:^{
for (NSInteger i = 0 ; i < self.instructionsTable.numberOfRows; i++) {
IngredientRowController *rowController = [self.instructionsTable rowControllerAtIndex:i];
[rowController.numberBackground setAlpha:1.0]; [rowController.textLabel setAlpha:1.0]; [rowController.spacerGroup setWidth:0.0];
}];
}
Page 256
Groups as Spacing Elements
[self animateWithDuration:0.3 animations:^{
for (NSInteger i = 0 ; i < self.instructionsTable.numberOfRows; i++) {
IngredientRowController *rowController = [self.instructionsTable rowControllerAtIndex:i];
[rowController.numberBackground setAlpha:1.0]; [rowController.textLabel setAlpha:1.0]; [rowController.spacerGroup setWidth:0.0];
}];
}
Page 257
Groups as Spacing Elements
[self animateWithDuration:0.3 animations:^{
for (NSInteger i = 0 ; i < self.instructionsTable.numberOfRows; i++) {
IngredientRowController *rowController = [self.instructionsTable rowControllerAtIndex:i];
[rowController.numberBackground setAlpha:1.0]; [rowController.textLabel setAlpha:1.0]; [rowController.spacerGroup setWidth:0.0];
}];
}
Page 258
Groups as Spacing Elements
Page 259
Groups as Spacing Elements
Page 260
Groups as Spacing Elements
Invisible spacer groups
Page 261
Groups as Spacing Elements
Invisible spacer groupsAdjust width, height, or alignment
Page 262
Groups as Spacing Elements
Invisible spacer groupsAdjust width, height, or alignmentAnimating will re-layout entire interface
Page 263
Groups as Spacing Elements
Invisible spacer groupsAdjust width, height, or alignmentAnimating will re-layout entire interface
Page 275
Complex Interface Transitions
Page 276
Complex Interface Transitions
textContainer
Page 277
Complex Interface Transitions
textContainer
textBubble
Page 278
Complex Interface Transitions
textContainer
textBubble
confirmationButton
Page 279
Complex Interface Transitions
textContainer
Page 280
textContainer
Complex Interface Transitions
Page 281
textBubble
confirmationButton
Complex Interface Transitions
Page 282
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textBubble setRelativeWidth:1.0 withAdjustment:0.0]; [self.textBubble sizeToFitHeight]; [self.textBubble setAlpha:1.0];
[self.confirmationButton setAlpha:1.0];
[self.textContainer sizeToFitHeight];
}];
Page 283
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textBubble setRelativeWidth:1.0 withAdjustment:0.0]; [self.textBubble sizeToFitHeight]; [self.textBubble setAlpha:1.0];
[self.confirmationButton setAlpha:1.0];
[self.textContainer sizeToFitHeight];
}];
Page 284
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textBubble setRelativeWidth:1.0 withAdjustment:0.0]; [self.textBubble sizeToFitHeight]; [self.textBubble setAlpha:1.0];
[self.confirmationButton setAlpha:1.0];
[self.textContainer sizeToFitHeight];
}];
Page 285
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textBubble setRelativeWidth:1.0 withAdjustment:0.0]; [self.textBubble sizeToFitHeight]; [self.textBubble setAlpha:1.0];
[self.confirmationButton setAlpha:1.0];
[self.textContainer sizeToFitHeight];
}];
Page 286
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textBubble setRelativeWidth:1.0 withAdjustment:0.0]; [self.textBubble sizeToFitHeight]; [self.textBubble setAlpha:1.0];
[self.confirmationButton setAlpha:1.0];
[self.textContainer sizeToFitHeight];
}];
Page 289
Complex Interface Transitions
Page 290
Complex Interface Transitions
textContainer
Page 291
Complex Interface Transitions
textContainer
confirmationContainer
Page 292
Complex Interface Transitions
confirmationContainer
textContainer
Page 293
Complex Interface Transitions
textContainer
confirmationContainer
Page 294
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textContainer setAlpha:0.0]; [self.textContainer setHeight:0.0];
[self.confirmationContainer setRelativeHeight:1.0 withAdjustment:0.0];
}];
Page 295
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textContainer setAlpha:0.0]; [self.textContainer setHeight:0.0];
[self.confirmationContainer setRelativeHeight:1.0 withAdjustment:0.0];
}];
Page 296
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textContainer setAlpha:0.0]; [self.textContainer setHeight:0.0];
[self.confirmationContainer setRelativeHeight:1.0 withAdjustment:0.0];
}];
Page 297
Complex Interface Transitions
[self animateWithDuration:duration animations:^{
[self.textContainer setAlpha:0.0]; [self.textContainer setHeight:0.0];
[self.confirmationContainer setRelativeHeight:1.0 withAdjustment:0.0];
}];
Page 298
AnimationA few notes
Page 299
AnimationA few notes
Any update that affects sizing can animate layout
Page 300
AnimationA few notes
Any update that affects sizing can animate layout• Example—WKInterfaceLabel text
Page 301
AnimationA few notes
Any update that affects sizing can animate layout• Example—WKInterfaceLabel text
Concurrent animations and complex layouts affect performance
Page 302
AnimationA few notes
Any update that affects sizing can animate layout• Example—WKInterfaceLabel text
Concurrent animations and complex layouts affect performance• Test on hardware!
Page 303
AnimationA few notes
Any update that affects sizing can animate layout• Example—WKInterfaceLabel text
Concurrent animations and complex layouts affect performance• Test on hardware!
API functions within apps, not Glances or dynamic notifications
Page 304
AnimationA few more notes
Page 305
AnimationA few more notes
Use with restraint
Page 306
AnimationA few more notes
Use with restraintShould never be the focus
Page 307
AnimationA few more notes
Use with restraintShould never be the focusKeep duration short
Page 308
Related Session
Designing with Animation Presidio Thursday 3:30PM
Page 311
Summary
Layout• Specified at design time
Page 312
Summary
Layout• Specified at design time• Flow-based
Page 313
Summary
Layout• Specified at design time• Flow-based• Groups are powerful
Page 314
Summary
Layout• Specified at design time• Flow-based• Groups are powerful
Animation
Page 315
Summary
Layout• Specified at design time• Flow-based• Groups are powerful
Animation• Add liveliness and feedback to your app
Page 316
Summary
Layout• Specified at design time• Flow-based• Groups are powerful
Animation• Add liveliness and feedback to your app• Tables and images can already animate
Page 317
Summary
Layout• Specified at design time• Flow-based• Groups are powerful
Animation• Add liveliness and feedback to your app• Tables and images can already animate• New API in watchOS 2
Page 318
More Information
DocumentationwatchOS 2 Transition GuideWatchKit Programming Guide
Sample CodeWKRecipesWatchKit Cataloghttp://developer.apple.com/watchOS
Technical SupportApple Developer ForumsDeveloper Technical Support
General InquiriesJake Behrens,watchOS Frameworks [email protected]
Page 319
Related Sessions
Introducing WatchKit for watchOS 2 WWDC15 Videos
Building Watch Apps WWDC15 Videos
WatchKit In-Depth, Part 1 WWDC15 Videos
WatchKit In-Depth, Part 2 WWDC15 Videos
Designing for Apple Watch WWDC15 Videos
WatchKit Tips and Tricks Presidio Friday 10:00AM
Apple Watch Design Tips and Tricks Presidio Friday 3:30PM
Page 320
Labs
WatchKit Layout and Animation Lab Frameworks Lab B Thursday 3:30PM
WatchKit and ClockKit Complications Lab Frameworks Lab A Friday 1:30PM