Skip to content

Commit

Permalink
fix(md): Easing curves images on a new line
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander Vakrilov authored Jun 28, 2018
1 parent dc25564 commit f6bf32d
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion docs/ui/animation.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,18 +87,23 @@ In every animation, you can control the following properties:
By default, an animation moves with a linear speed without acceleration or deceleration. This might look unnatural and different from the real world where objects need time to reach their top speed and can't stop immediately. The animation curve (sometimes called an easing function) is used to give animations an illusion of inertia. It controls the animation speed by modifying the fraction of the duration. NativeScript comes with a number of predefined animation curves.

- **linear**: The simplest animation curve is linear. It maintains a constant speed while the animation is running:

![linear](./img/modules/animation/linear.gif "Linear")

- **Ease-in**: The ease-in curve causes the animation to begin slowly, and then speed up as it progresses.

![easein](./img/modules/animation/easein.gif "EaseIn")

- **Ease-out**: An ease-out curve causes the animation to begin quickly, and then slow down as it completes.

![easeout](./img/modules/animation/easeout.gif "EaseOut")

- **Ease-in-out**: An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.

![easeinout](./img/modules/animation/easeinout.gif "EaseInOut")

- **Spring**: A spring animation curve causes an animation to produce a spring (bounce) effect.

![spring](./img/modules/animation/spring.gif "Spring")

In NativeScript, the animation curve is represented by the AnimationCurve enumeration and can be specified with the curve property of the animation. In CSS, the animation curve is defined by using the animation-timing-function property (see __Example 3__):
Expand Down Expand Up @@ -197,4 +202,4 @@ view.animate({
});
```

> Note: The properties `originX` and `originY` are JavaScript properties and can be assigned via code-behind only via a given `View` reference. We can still use them along with CSS animations, but the values for `originX` and `originY` must be set in the code-behind logic.
> Note: The properties `originX` and `originY` are JavaScript properties and can be assigned via code-behind only via a given `View` reference. We can still use them along with CSS animations, but the values for `originX` and `originY` must be set in the code-behind logic.

0 comments on commit f6bf32d

Please sign in to comment.