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

Advanced Animations with UIKit

Advanced Animations with UIKit

Report from WWDC2017

Dc00a8afd9d3773a8fd0a3f415edba73?s=128

Kane Liu

June 19, 2017
Tweet

Transcript

  1. Advanced Animations with UIKit #CA.swift Report from WWDC2017 Ryu Ka,

    @Ameba, iOS/Android Engineer, Manager LBOFMJV
  2. Why do we need “animations” ?

  3. Why do we need “animations” ? “Design is not just

    what it looks like and feels like. Design is how it works” - Steve Jobs
  4. UIView-based Animations

  5. UIView-based Animations ɾDuration ɾDelay ɾAnimation options ɾView animations ɾSpring animation

    ɾCompletion callback
  6. UIView-based Animations ɾDuration ɾDelay ɾAnimation options ɾView animations ɾSpring animation

    ɾCompletion callback
  7. UIView-based Animations

  8. UIView-based Animations ɾMassive source code ɾDifficult to customize animation options

    ɾCan not interact with use’s action or gesture ɾCan not interrupt animations ɾCan not reverse animations ɾComplicated to combine and coordinate multiple animations
  9. UIView-based Animations ɾMassive source code ɾDifficult to customize animation options

    ɾCan not interact with use’s action or gesture ɾCan not interrupt animations ɾCan not reverse animations ɾComplicated to combine and coordinate multiple animations
  10. UIViewPropertyAnimator VS UIView-based Animations

  11. UIViewPropertyAnimator

  12. UIViewPropertyAnimator ɾCustom timing ɾInteractive ɾInterruptible ɾResponsive

  13. UIViewPropertyAnimator ɾCustom timing ɾInteractive ɾInterruptible ɾResponsive But need to change

    “Deployment Target” to iOS10.0 or separate animation by
  14. UIViewPropertyAnimator ɾCustom timing ɾInteractive ɾInterruptible ɾResponsive But need to change

    “Deployment Target” to iOS10.0 or separate animation by
  15. UIViewPropertyAnimator But Some Good News

  16. UIViewPropertyAnimator But Some Good News

  17. UIViewPropertyAnimator Basic

  18. UIViewPropertyAnimator Basic

  19. UIViewPropertyAnimator Basic

  20. UIViewPropertyAnimator WWDC2016 Advances in UIKit Animations and Transitions Basic

  21. UIViewPropertyAnimator Timing Curves % Progress = % Time

  22. UIViewPropertyAnimator Timing Curves % Progress = % Time

  23. UIViewPropertyAnimator Custom Curves

  24. UIViewPropertyAnimator Custom Curves

  25. UIViewPropertyAnimator Custom Curves

  26. UIViewPropertyAnimator Sample

  27. UIViewPropertyAnimator Sample

  28. UIViewPropertyAnimator Sample

  29. UIViewPropertyAnimator Interactive

  30. UIViewPropertyAnimator Interactive

  31. UIViewPropertyAnimator Interactive

  32. UIViewPropertyAnimator Interactive

  33. UIViewPropertyAnimator Interactive

  34. UIViewPropertyAnimator Time Conversion

  35. UIViewPropertyAnimator UIViewPropertyAnimator(duration: 1, curve: .easeOut) Time Conversion

  36. UIViewPropertyAnimator Time Conversion

  37. UIViewPropertyAnimator animator.pauseAnimation() Time Conversion

  38. UIViewPropertyAnimator Time Conversion

  39. UIViewPropertyAnimator animator.fractionComplete = fabs(translation.x) / 100 Time Conversion

  40. UIViewPropertyAnimator Time Conversion

  41. UIViewPropertyAnimator animator.continueAnimation(withTimingParameters: nil, durationFactor: 0) Time Conversion

  42. UIViewPropertyAnimator Time Conversion

  43. UIViewPropertyAnimator animator.continueAnimation(withTimingParameters: nil, durationFactor: 0) Time Conversion

  44. UIViewPropertyAnimator Interruptible

  45. UIViewPropertyAnimator Interruptible

  46. UIViewPropertyAnimator Interruptible

  47. UIViewPropertyAnimator Interruptible

  48. UIViewPropertyAnimator Interruptible

  49. UIViewPropertyAnimator What’s New in iOS 11

  50. UIViewPropertyAnimator What’s New in iOS 11 ɾvar scrubsLinearly: Bool ɾvar

    pauseOnCompletion: Bool ɾCorner radius animation ɾCorner radius mask with “maskedCorners”
  51. UIViewPropertyAnimator .pauseOnCompletion

  52. UIViewPropertyAnimator .pauseOnCompletion

  53. UIViewPropertyAnimator .pauseOnCompletion true false

  54. UIViewPropertyAnimator CACornerMask

  55. UIViewPropertyAnimator CACornerMask

  56. UIViewPropertyAnimator CACornerMask -> topɾleft -> topɾright -> bottomɾleft -> bottomɾright

  57. Demo

  58. Demo UIPanGestureRecognizer UITapGestureRecognizer

  59. Demo UIPanGestureRecognizer UITapGestureRecognizer

  60. Demo Interact with Gestures

  61. Demo Interact with Gestures

  62. Demo Interact with Gestures

  63. Demo Interact with Gestures

  64. Demo Interact with Gestures

  65. Demo Interact with Gestures

  66. Demo Interact with Gestures

  67. Demo Interact with Gestures

  68. Demo Interact with Pan Gesture

  69. Demo Interact with Pan Gesture

  70. Demo Interact with Pan Gesture

  71. Demo Interact with Pan Gesture

  72. Demo Interact with Pan Gesture

  73. Demo Interrupt with Tap Gesture

  74. Demo Interrupt with Tap Gesture

  75. Demo Interrupt with Tap Gesture

  76. Demo Add Multiple Animators

  77. Demo Add Multiple Animators

  78. Demo View Frame Animator

  79. Demo View Frame Animator

  80. Demo Blur Animator

  81. Demo Blur Animator

  82. Demo Blur Animator

  83. Demo Corner Radius Animator

  84. Demo Corner Radius Animator NEW

  85. Demo Corner Radius Animator NEW

  86. Demo Corner Radius Animator NEW

  87. Demo Corner Radius Animator OLD NEW

  88. Demo KeyFrame Animator

  89. Demo KeyFrame Animator

  90. Demo KeyFrame Animator

  91. Download demo source & build with Xcode9

  92. Download demo source & build with Xcode9 IUUQTHJUIVCDPNLBOFMJV"EWBODFE"OJNBUJPOT

  93. Download demo source & build with Xcode9 IUUQTHJUIVCDPNLBOFMJV"EWBODFE"OJNBUJPOT WWDC2017 Advanced

    Animation with UIKit
  94. Thank you for listening!!!

  95. Thank you for listening!!!