Animate your users

Basicly the precursor to my re-animate your users talk. Given in March 2013.

Transcript

1. Animate you users
2. Agenda • Intro • Who are you? • While we got time: • Theory • Hands-on • The end
8. Why you need animations http://commons.wikimedia.org/wiki/File:Mad_scientist_caricature.png
9. Why you need animations • To be consistent with the platform • Movement attracts eyes, requests focus on screen items you want the user to focus on • People like to see where their stuff is going • Teaches your users • http://www.centigrade.de/en/blog/article/animations-in-user-interface- design-essential-nutrient-instead-of-eye-candy/
10. Turns
    good Apps
    into
    great Apps...
11. ...but will not turn crap into greatness.
12. I will not list
    good vs. bad Apps.
13. Well I could name one “good” App... ;)
14. iOS Graphics and stuff
15. Graphics on iOS • Cocoa Touch • Core Animation • Core Image • Core Graphics/Quartz 2D • Open GL
16. Animations in iOS • Lots of small animations “embedded” in the platform • Most ubiquitous:
 Push VC on a UINavigationController
17. You get a lot for “free” • Just say “YES” please. • [self.navigationController
 pushViewController:controllerToPush animated:YES];
18. Architecture UIKit Core Animation Open GL ES Hardware Core Graphics
19. Architecture UIKit Core Animation Open GL ES Hardware Core Graphics
20. What we will do • 3.5 hours • Several sample projects • Just play with it • Ask a lot, really anything goes • Lots of hands on • iNVASIVECODE tutorials • I’m just here to give help you on your way
21. Subject matter • UIView based animation • Implicit animations • Explicit animations • Some Core Image (if time allows) • Performance (profiling, tuning, tips)
22. View based animation • What can be animated:
 frame bounds center
 transform backgroundColor
 alpha contentStretch
23. View Geometry
24. Frame vs. Bounds
25. Demo
26. If you deal with
    layout constraints • You’ll love this ! ! ! ! ! • Yes, your change is now animated... [[self buttonEdgeConstraint]! ! ! ! setConstant:200];! [UIView animateWithDuration:0.5! ! ! animations:^{! ! ! ! ! [[self button] layoutIfNeeded];! }];
27. Core animation • What can be animated
 anchorPoint, backgroundColor, backgroundFilters, borderColor, borderWidth, bounds, contents, contentsRect, cornerRadius, doubleSided, filters, hidden, mask, masksToBounds, opacity, position, shadowColor, shadowOffset, shadowOpacity, shadowPath, shadowRadius, sublayers, sublayerTransform, transform, zPosition
    

28. Core animation • Let’s just say CALayer level animations are more powerful ! • But frame on CALayer is not animatable.
 Use bounds and position
 properties instead
29. CALayer Geometry
32. Implicit animations • Changing property triggers implicit animation • Duration 0.25s, linear interpolation • Multiple changes during one Runloop cycle get batched into one transaction • Let’s demo that...
33. Implicit animations self.whiteImageView.layer
 .shadowOpacity = 1.0f; Yup, that’s all.
34. Well not really • All animatable property changes are put into an implicit CATransaction • This has all the defaults
35. CATransaction • If you want to influence implicit transaction, make it explicit by calling:
 [CATransaction begin];
 [CATransaction commit];
36. Lab • Open up the “implicit” project • Do you understand how everything works? • Can you add something interesting on your own? • Ask questions.
37. Explicit animations
38. Explicit animations • Grouped by using CAAnimationGroup
 (important for timing) • CATransition is used for entire layer transitions • CAPropertyAnimations animate properties by interpolating
39. Explicit animations CABasicAnimation *animation =
 [CABasicAnimation new]; ! animation.fromValue = @0.0f; animation.toValue = @1.0f; animation.duration = 0.25; ! [self.whiteImageView.layer addAnimation:animation forKey:@"shadowOpacity"];
40. Grouping // Animation 1 CAKeyframeAnimation* widthAnim = [CAKeyframeAnimation
 animationWithKeyPath:@"borderWidth"]; widthAnim.values =
 @[@1.0, @10.0, @5.0, @30.0, @0.5, @15.0, @2.0, @50.0, @0.0]; widthAnim.calculationMode = kCAAnimationPaced; ! // Animation 2 CAKeyframeAnimation* colorAnim = [CAKeyframeAnimation
 animationWithKeyPath:@"borderColor"]; colorAnim.values = @[(id)[UIColor greenColor].CGColor, (id)[UIColor redColor].CGColor,
 (id)[UIColor blueColor].CGColor]; colorAnim.calculationMode = kCAAnimationPaced; // Animation group CAAnimationGroup* group = [CAAnimationGroup animation]; group.animations = @[colorAnim, widthAnim]; group.duration = 5.0; [myLayer addAnimation:group forKey:@"BorderChanges"];
41. Grouping • Play with beginTime and duration of grouped animations relative to each other • Do use CACurrentMediaTime() when doing this
42. CATransition • Use these if there is animation from one layer state to another layer state is possible • A transition gives you fade, move-in, push or reveal effects.
43. CAAnimation delegate • Important: The CAAnimation delegate object is retained by the receiver. This is a rare exception to the memory management rules described in Advanced Memory Management Programming Guide.
44. Lab • Open up the “explicit” project • Do you understand how everything works? • Can you add something interesting on your own? • Ask questions
45. Important gotcha • Changing things on a view’s backing layer (view.layer) are not animated unless you perform the changes on said layer within a UIView animation block. • This only applies to the view’s layer itself. Not to sublayers added to the view’s layer. • (Link against QuartzCore framework)
46. Performance • Pixel alignment • Magenta == misaligned (not ok at all) • Yellow == stretched (ok) • Limit blending • Green == not blended (ok) • Red == Blended (ok if you have a reason)
47. TODO • Fill mode • Timing with CACurrentMediaTime() • UIView project