Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Behind scene of delightful experience, letswift 2019

199 views

Published on

http://letswift.kr/2019/
LetSwift 2019, The largest Swift Conference in Korea

Behind scene of delightful experience

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Behind scene of delightful experience, letswift 2019

  1. 1. 백성 욱 Behind Scene of Delightful Experience
  2. 2. Seamless User Experience • 12 Principle of Animation • Easing and Timing Modern UI 4 Patterns • Launch Animation • Loading Animation • UIViewController Animation • Interrupt an Animation Agenda
  3. 3. Seamless User eXperience
  4. 4. 예제 이미지 예제 이미지
  5. 5. Frame, Timing and Easing
  6. 6. 12 Principle of Animation 1981년 The Illusion of Life: Disney Animation Ollie Johnston Frank Thomas https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation
  7. 7. 4 Principle of Animation [1/ 4] Straight ahead action and pose to pose https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
  8. 8. 4 Principle of Animation [2/ 4] Slow in slow out https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
  9. 9. 4 Principle of Animation [3/ 4] Timing https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
  10. 10. 4 Principle of Animation [4/ 4] Secondary Action https://www.creativebloq.com/advice/understand-the-12-principles-of-animation
  11. 11. Easing and Timing
  12. 12. Easing Function Animation의 Timing과 Easing 특성 이해하고 사용하기
  13. 13. Easing Function Animation의 Timing과 Easing 특성 이해하고 사용하기
  14. 14. Easing Function View가 나타날 때는? Ease Out [150 - 350 ms] View가 사라지는 경우는? Linear or Ease In [100 - 150 ms] Timing 가이드 UI Component: 150 - 350ms 화면전환: 350 - 1000ms 일반적으로 사용하는 규칙
  15. 15. Modern UI
  16. 16. [1 / 4] Launch Animation
  17. 17. [1 / 4] Launch Animation Core Animation • UIBezierPath <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 36" version="1.1" height="36px"> <defs> <linearGradient id="a" x2="50%" x1="50%" y2="100%"> <stop stop-color="#F88A36" offset="0"/> <stop stop-color="#FD2020" offset="1"/> </linearGradient> </defs> <path d="m29.885 33.047c-4.667 2.696-11.084 2.973-17.54 0.206-5.2273-2.224-9.5646-6.117-12.345- 10.565 1.3346 1.112 2.8916 2.002 4.5598 2.78 6.6672 3.125 13.333 2.911 18.024 0.008-0.003-0.003-0.005-0.005- 0.007-0.008-6.673-5.116-12.345-11.789-16.571-17.238-0.8901-0.8898-1.5574-2.002-2.2247-3.0029 5.1159 4.671 13.235 10.565 16.126 12.234-6.116-6.451-11.566-14.458-11.344-14.236 9.676 9.787 18.685 15.348 18.685 15.348 0.298 0.168 0.528 0.308 0.713 0.433 0.195-0.496 0.366-1.011 0.51-1.545 1.557-5.672-0.222-12.123-4.115-17.461 9.008 5.4495 14.347 15.681 12.122 24.245-0.058 0.231-0.121 0.459-0.189 0.683 0.026 0.031 0.052 0.063 0.078
  18. 18. Cubic Bezier Curve Timing Function, CGPath 등 Animation에 다양하게 활용 Bezier Curve (Control Point에 따라 Cubic / Quadratic 으로 분류됨)
  19. 19. [1 / 4] Launch Animation Core Animation • UIBezierPath • CoreAnimation • strokeEnd, colors, fillColor, opacity • Clipping CAAnimationGroup CABasicAnimation "fillColor" beginTime CACurrentMediaTime + 2
  20. 20. [1 / 4] Launch Animation Core Animation • UIBezierPath • CoreAnimation • strokeEnd, colors, fillColor, opacity • Clipping
  21. 21. [2 / 4] Loading Animation
  22. 22. [2 / 4] Loading Animation Core Animation • Gradient Layer locations Gradient의 각 Color의 위치 값을 세팅
  23. 23. [2 / 4] Loading Animation Core Animation • Gradient Layer locations Gradient의 각 Color의 위치 값을 세팅
  24. 24. [2 / 4] Loading Animation Core Animation • Gradient Layer Gradient의 방향을 좌 -> 우 로 변경 Animation 반복 효과
  25. 25. [3 / 4] UIViewController Animation UIViewControllerAnimatedTransitioning
  26. 26. [3 / 4] UIViewController Animation UIViewControllerAnimatedTransitioning forPresented forDismissed
  27. 27. [4 / 4] Interrupt an Animation UIPropertyAnimator iOS 10 이상 사용 가능 reverse Animation pause, continue WWDC 2017 Advances in UIKit Animations and Transitions
  28. 28. [4 / 4] Interrupt an Animation UIPropertyAnimator fractionComplete - 0: Start Animation, 1: End Animation WWDC 2017 Advances in UIKit Animations and Transitions continueAnimation - timing과 durationFactor 변경 가능
  29. 29. Reference Sites Google Fundamentals Design and UX Apple Core Animation Guide Disney 12 Principle Animations https://easings.net Books Raywenderlich iOS Animation Book iOS Core Animation: Advanced Techniques Youtube Coding Math WWDC 2017 Advances in UIKit Animations and Transitions

×