Vamo a curvarno
0 likes174 views
1) The document discusses using animations in iOS applications, specifically animating Bezier curves. 2) It provides information on what animations are, why they should be used, and when and how to implement them. This includes using animations for onboarding, loading, microinteractions, screen transitions, and visualizing action results. 3) It then demonstrates how to animate Bezier curves in iOS using the UIBezierPath class and methods like addQuadCurve and addCurve to define the curve paths and animate motion along them.
Vamo a curvarno
- 1. Vamo a curvarno Animaciones con curvas de Bézier en iOS @FelipeDev Felipe Hernández R. iOS {Dev}signer
- 3. - What’s an animation? - Why should we use ‘em? - When, how & where use ‘em - Animating a bezier curve Let’s talk about:
- 4. What’s an animation? An animation is a story
- 5. They help the user to understand what’s going on. Why should we use ‘em?
- 6. “We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view?content.” Zurb Co. Why should we use ‘em?
- 7. Because the detail matters! Why should we use ‘em?
- 8. How do you feel today? Normal Fun Why should we use ‘em?: Cuz detail matters!
- 9. How do you feel today? Why should we use ‘em?: Cuz detail matters!
- 10. Back to the old days…
- 11. Back to the old days…
- 12. Back to the old days…
- 13. When should we use ‘em? 1.- System status 2.- Navigation & transitions 3.- Visual feedback
- 14. On boarding (splash): Create an entire experience before enter the app itself. When?: On OnBoarding
- 16. Loading: We cant’ shorten the line, but we can de?nitively make the wait more pleasant. When?: Loading
- 17. When?: Loading
- 18. MicroInteractions: Mobile objects immediately catch user attention. When?: MicroInteractions
- 19. - Create an habit. - According to the main app theme. - Avoid unnecessary interactions. When?: MicroInteractions
- 21. Screen transitions: The most basic mobile animation. When?: Transitions
- 22. - Transportar al usuario entre contextos de navegación. - Jerarquía visual y conexión entre elementos When?: Transitions
- 26. Visualize an action result. An animation can improve every interaction point and reenforce any user action. When?: Visualize an action result.
- 27. When?: Visualize an action result.
- 28. Bezier curves
- 29. UX/UI Challenge
- 30. P1 P2 Rect line
- 32. A Bezier curve is a mathematically de?ned curve type in bi-dimensional graphical applications, which requires at least 3 points to de?ne itself. Bezier curve
- 33. Cuadratic bezier curves Cubic bezier curves Bezier curve
- 34. Demo web
- 36. UIBezierPath
- 37. let bezierPath = UIBezierPath() The UIBezierPath class
- 38. // Moves the receiver’s current point to the specified location open func move(to point: CGPoint) // Appends a straight line to the receiver’s path. open func addLine(to point: CGPoint) // Appends an arc to the receiver’s path. open func addCurve(to endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint) // Appends a cubic Bézier curve to the receiver’s path. open func addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint) // Appends a quadratic Bézier curve to the receiver’s path. open func addArc(withCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool) // Closes the most recently added subpath. open func close() // Removes all points from the receiver, effectively deleting all subpaths. open func removeAllPoints() The UIBezierPath class
- 39. Showtime!
- 40. Where can I use this?
- 41. Where can I use this?
- 42. Where can I use this?
- 43. Where can I use this?
- 44. Thanks for coming! 狠狠撸s available in: www.slideshare.net/felipedev/vamoacurvarno Code available in: www.github.com/felipedev/BezierCurveDemo