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.

1. Vamo a curvarno
Animaciones con curvas de Bézier en iOS
@FelipeDev
Felipe Hernández R.
iOS {Dev}signer

2. Intro animaciones

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

15. When?: On OnBoarding

16. Loading:
We cant’ shorten the line,
but we can definitively 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

20. 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

23. When?: Transitions

24. When?: Transitions

25. 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

31. P1
P2
PC1
PC2
Curve line

32. A Bezier curve
is a mathematically defined curve type
in bi-dimensional graphical applications,
which requires at least 3 points to define 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!
Slides available in:
www.slideshare.net/felipedev/vamoacurvarno
Code available in:
www.github.com/felipedev/BezierCurveDemo