Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Practical animation

  1. 1. Unit 5—Lesson 3: Practical Animation
  2. 2. Animations
  3. 3. How do the pieces fit together? Animations
  4. 4. Conveying an app’s personality Animations
  5. 5. Direct the user’s attention Why animate?
  6. 6. Keep the user oriented Why animate?
  7. 7. Connect user behaviors Why animate?
  8. 8. UIView • frame • bounds • center • transform • alpha • backgroundColor What can be animated?
  9. 9. animate(withDuration:animations:) animate(withDuration:animations:completion:) animate(withDuration:delay:options:animations:completion:) UIView animation methods
  10. 10. animate(withDuration:animations:completion:) UIView.animate(withDuration: 2.0, animations: { //animation closure viewA.alpha = 0.0 }) { (_: Bool) in //completion closure UIView.animate(withDuration: 2.0, animations: { //second animation closure viewB.alpha = 1.0 }) } Animation closures
  11. 11. animate(withDuration:delay:options:animations:completion:) Animation closures UIView.animate(withDuration: 2.0, delay: 5.0, options: [.repeat], animations: { aView.center = CGPoint(x: aView.center.x + 10, y: aView.center.y) }, completion: nil)
  12. 12. The transform property Type Initializer Parameter Description Scale init(scaleX: CGFloat, y: CGFloat) The factors by which to scale your view Rotate init(rotationAngle: CGFloat) The angle (in radians) by which to rotate your view. Positive value = counterclockwise Translate init(translationX: CGFloat, y: CGFloat) The value by which to move (shift) your view
  13. 13. Identity The transform property aView.transform = CGAffineTransform.identity
  14. 14. Combining transform instances The transform property let scaleTransform = CGAffineTransform(scaleX: 2.0, y: 2.0) let rotateTransform = CGAffineTransform(rotationAngle: .pi) let combinedTransform = scaleTransform.concatenating(rotateTransform)
  15. 15. Use animation and motion effects judiciously Strive for realism and credibility Use consistent animation Make animations optional Animation in practice
  16. 16. Practical Animation Unit 5—Lesson 3 Learn how to use the UIView class and closures to add animations that improve the presentation and the functionality of your apps. Create a wireframe— just the views, without actual functionality—of the Now Playing screen in the Music app
  17. 17. Lab: Enter to win a Contest Unit 5—Lesson 3 Better understand when is a good time to use an animation by creating an animation that will help your app be more user intuitive
  18. 18. © 2017 Apple Inc. This work is licensed by Apple Inc. under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.

×