Animation & Interaction Design

Why do we put animations into our apps? This talk goes through the principals of animation and interaction design. Discover when animations are appropriate and examine the animations in the app Facebook Pop for a real world example.

Transcript

1. Animation & Interaction Design @_ryannystrom
2. What is this about?
3. Who am I?
6. What are Animations?
7. 4 Life 4 Emotion 4 Attention
11. The Illusion of Life
14. Squash & Stretch
16. Anticipation
18. Staging
20. Straight-ahead Pose-to-pose
22. Follow Through
24. Arcs
26. Secondary Action
28. Timing
30. Exageration
32. Appeal
34. Facebook Paper
40. Timing Functions
46. Write your own! - (void)calculateKeyFramesWithEvaluationObject:(NSObject<evaluate> *)evaluationObject startValue:(double)startValue endValue:(double)endValue interstitialSteps:(NSUInteger)steps { NSUInteger count = steps + 2; NSMutableArray *valueArray = [NSMutableArray arrayWithCapacity:count]; double progress = 0.0; double increment = 1.0 / (double)(count - 1); NSUInteger i; for (i = 0; i < count; i++) { double value = startValue + [evaluationObject evaluateAt:progress] * (endValue - startValue); [valueArray addObject:[NSNumber numberWithDouble:value]]; progress += increment; } [self setValues:valueArray]; }
47. What's in an Interface?
48. Why UI/UX?
49. Apple HIG Beautiful, subtle animation pervades the iOS UI and makes the app experience more engaging and dynamic. Appropriate animation can: 4 Communicate status and provide feedback 4 Enhance the sense of direct manipulation 4 Help people visualize the results of their actions
52. How do I animate my app?
53. Transitional Animations
58. Maintaining Context
64. Continuity
67. Combining Animations
70. Prototyping Animations What's the best tool?
77. Code Demo Using Facebook Pop
78. Springs pre-iOS 7 [UIView animateWithDuration:0.2 animations:^{ view.frame = wayPastFrame; } completion:^(BOOL finished) { [UIView animateWithDuration:0.2 animations:^{ view.frame = backABitFrame; } completion:^(BOOL finished) { [UIView animateWithDuration:0.2 animations:^{ view.frame = finalFrame; }]; }]; }];
79. Springs iOS 7 [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.5 // 0.0-1.0 initialSpringVelocity:0.5 // 0.0-1.0 options:kNilOptions animations:^{ view.frame = frame; } completion:nil];
80. Springs with Pop POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame]; spring.toValue = [NSValue valueWithCGRect:frame]; spring.springBounciness = 15; spring.springSpeed = 20; [view pop_addAnimation:spring forKey:@"spring"];
81. Demo
82. github.com/rnystrom/PopDemos
83. Background Tip
84. Custom vs. System
88. Summing Up 4 Follow animation principals 4 Know why you are animating your interface 4 Animate transitions 4 Maintain context throughout your app 4 Prototype however you like 4 Facebook Pop
89. Thank You @_ryannystrom