NSBudapest - Animations

Transcript

1. animations it’s not black magic
3. Agenda ▪ what? why? ▪ example ▪ core animation ▪ take away
4. what? why?
5. What is animation? ▪ Animation is just a property of view that is change over time
6. What is it good for? ▪ Direct Attention ▪ Keep people oriented ▪ Connect behaviour ▪ Keep the user engaged ▪ Make lasting impression
7. Animation types ▪ UIKit Animation ▪ UIViewPropertyAnimator (iOS10) ▪ View Controller Transitioning (iOS7) ▪ UIKit Dynamics (iOS7) ▪ Core Animation
8. example
9. The requirement ▪ Implement login with PIN ▪ Custom NumberPad ▪ Secured inputField with dots ▪ Red error text if the PIN is wrong ▪ Custom loading animation
11. Our solution
13. core animation
15. Architecture
16. CALayer ▪ Every UIView has a CALayer ▪ Very similar to UIView but more lightweight ▪ It’s main job is to manage the visual content ▪ Visual attributes ▪ Information about the geometry of it’s content ▪ You can also transform it in 3D
17. Presentation vs Model ▪ Layer properties do not reflect active animations ▪ Core Animation maintains two parallel layer hierarchies ▪ Model layer tree (state of the layer) ▪ Presentation layer tree (screen values) ▪ Switch between the two layer hierarchy ▪ layer.presentation() ▪ layer.model() ▪ Presentation layer useful to interact with layers while animation is taking place ▪ Get real time values ▪ Hit testing
18. Core Animation styles ▪ Implicit Animation ▪ Explicit Animation
19. Implicit animation
20. Implicit animation ▪ It uses the default timing - 1s ▪ It updates your model ▪ When is it good ▪ If you don’t want to write a lot of code ▪ The default timing works for you ▪ eg: Changing layer’s opacity from 1.0 to 0.0 ▪ CALayers that are associated with a UIView do NOT participate in implicit animations (view.layer)
21. Implicit animation
22. What type of things can be animated ▪ Animatable CALayer properties ▪ position ▪ size ▪ opacity ▪ transition ▪ color ▪ shape ▪ shadow ▪ Etc
23. CATransaction ▪ Mechanism for batching operations into atomic updates to the render tree ▪ Every modification to a layer must be part of a transaction ▪ Nested transactions are supported ▪ All implicit animation applied together as a single transaction in the next run loop ▪ You can change ▪ Duration ▪ Timing functions (easeIn, easeOut) ▪ Disable action
24. Explicit animation ▪ It creates animation but leaves you model unchanged ▪ When is it good ▪ When you want more customized animations ▪ Types ▪ CABasicAnimation ▪ CAAnimationGroup ▪ CAKeyframeAnimation
25. Basic animation ▪ fromValue ▪ toValue ▪ byValue
26. Basic animation - position
27. Basic animation - opacity
28. Basic animation - scale
29. Group animation ▪ Collection of animations ▪ Timings clipped to group timing
30. Group animation
31. Group animation
32. Keyframe Animation ▪ Use either ▪ Path ▪ Values
33. Keyframe Animation
34. Timing ▪ CAMediaTiming protocol adopted by CAAnimation ▪ beginTime ▪ repeatCount, repeatDuration ▪ duration ▪ autoreverses ▪ fillMode (eg: kCAFillModeRemoved, kCAFillModeForwards) ▪ Explicit animations have delegate ▪ animationDidStart: ▪ animationDidStop: ▪ Implicit animations have completionBlock ▪ CATransaction.completionBlock()
35. take away
36. Take away ▪ Don’t be afraid to use CoreAnimation ▪ Try it out to be more comfortable with it ▪ A few lines of code can make a huge difference ▪ It’s little bit your responsibility as a developer
38. thank you for your attention. David Horvath david.horvath@supercharge.io