Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Power Up Your Animations! — Marin Todorov

1fa9cb8c7997c8c4d3d251fb5e41f749?s=47 Realm
June 12, 2015

Power Up Your Animations! — Marin Todorov

Everyone knows how to put together a simple animation for their iOS app. Most know how to scavenge StackOverflow and find the code to do something more complex they figured out they’d need. But how about if you want awesomely fantastically beautiful animations? This is a demo session of what you can achieve if you really know your layers and use of GitHub and 3rd party animation libraries. There won’t be any magic in this presentation - just powerful, impressive animations! This live session will show how to use vibrancy, particle effects, advanced text transitions and more.

This talk was presented at AltConf in June 2015.

1fa9cb8c7997c8c4d3d251fb5e41f749?s=128

Realm

June 12, 2015
Tweet

Transcript

  1. Power up your animations Marin Todorov

  2. None
  3. New in iOS 9 (beta 1) struct UIViewAnimationOptions : OptionSetType

    {
 …
 }
  4. iOS 8 iOS 9

  5. iOS 8 iOS 9

  6. iOS 8 iOS 9

  7. Spring Animations in UIKit

  8. class CASpringAnimation : CABasicAnimation { var mass: CGFloat var stiffness:

    CGFloat var damping: CGFloat var initialVelocity: CGFloat var settlingDuration: CFTimeInterval { get } } New in iOS 9 (beta 1)
  9. Power up your animations Marin Todorov

  10. Marin Todorov Underplot Apps www.raywenderlich.com

  11. None
  12. None
  13. redSquare.center.x += 200.0

  14. Stack Overflow ^$@&^&#%$ Q: How to do this one animation

    thing in my app?
 
 A: Include Bloated.framework by Super Awesome Ninja Dev 
 and paste:
 createANM().move().byX(20).byY(10).fadeWithTint().etc().etc() 
 Q: Accepted! Works!
  15. Experiment Photo by Tim Pierce: https://www.flickr.com/photos/qwrrty/14424550165/

  16. Experiment Photo by Tim Pierce: https://www.flickr.com/photos/qwrrty/14424550165/ 1. Try different properties

    2. Try new layers 3. Think out of the box
  17. Easy Animation https://github.com/icanzilb/EasyAnimation

  18. Demo… https://github.com/icanzilb/EasyAnimation

  19. 1. Experiment with properties CALayer shadowOpacity, shadowOffset, shadowColor cornerRadius borderWidth,

    borderColor
  20. Demo… https://github.com/icanzilb/PowerUpYourAnimations

  21. 1. Experiment with properties CAShapeLayer lineDashPattern lineDashPhase

  22. Demo… https://github.com/icanzilb/PowerUpYourAnimations

  23. 2. Experiment with layers • AVCaptureVideoPreviewLayer • AVPlayerLayer • AVSampleBufferDisplayLayer

    • AVSynchronizedLayer • CAEAGLLayer • CAEmitterLayer • CAGradientLayer • CAMetalLayer • CAReplicatorLayer • CAScrollLayer • CAShapeLayer • CATextLayer • CATiledLayer • CATransformLayer CALayer
  24. 2. Experiment with layers CAReplicatorLayer CALayer

  25. Demo… http://www.ios-animations-by-emails.com/posts/2015-march

  26. 3. Experiment with … anything? Kenji Yamamoto: https://www.flickr.com/photos/kenjiys/3735200285/

  27. None
  28. View snapshots Table Cell > Table Cell > Table Cell

    > flat copy
  29. Demo… https://github.com/icanzilb/PowerUpYourAnimations

  30. Core Image Filters

  31. Core Image Transitions Mask Source Target

  32. Core Image Transitions

  33. Masks

  34. Demo… http://www.ios-animations-by-emails.com/posts/2015-may

  35. None
  36. Marin Todorov Thank you! www.underplot.com