Skip to content
This repository was archived by the owner on Nov 17, 2022. It is now read-only.

Commit 246472e

Browse files
committed
Switching up Playground links with some updates
For details on changes see https://github.com/NativeScript/docs/pull/1012
1 parent e5020f1 commit 246472e

File tree

1 file changed

+4
-8
lines changed

1 file changed

+4
-8
lines changed

docs/ui/animation.md

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ view.backgroundColor = new Color("red");
4040
view.animate({ backgroundColor: new Color("green"), duration: 2000 });
4141
```
4242

43-
[Try this animation in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=5)
43+
[Try this animation in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=18)
4444

4545
As _Example 2_ shows, you can express the same animation in CSS with the following definition:
4646

@@ -64,7 +64,7 @@ __Example 2: Changing background color animation with CSS.__
6464

6565
> CSS animations apply with lower precedence, like any other CSS settings, so any local values set in your element will cancel the animation.
6666
67-
[Try this animation in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=2)
67+
[Try this animation in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=19)
6868

6969
NativeScript lets you animate the following properties:
7070

@@ -133,11 +133,11 @@ view.animate({
133133
}
134134
```
135135

136-
[Experiment with the different animation timing functions in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=6)
136+
[Experiment with the different animation timing functions in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=16)
137137

138138
It is easy to create your own animation curve by passing in the X and Y components of two control points of a cubic Bezier curve (as shown in __Example 4__). Using Bezier curves is a common technique to create smooth curves in computer graphics and they are widely used in vector-based drawing tools. The values passed to the cubicBezier method control the curve shape. The animation speed will be adjusted based on the resulting path.
139139

140-
For help finding the `cubicBezier` values you need for your custom animation timing function, use the visual tools on [cubic-bezier.com](http://cubic-bezier.com). Once you find an animation path you like, simply copy and paste the cubic bezier values and paste them in the `AnimationCurve.cubicBezier` function. Their should be four numbers (X,Y coordinates for each of the two points in the animation).
140+
For help finding the `cubicBezier` values you need for your custom animation timing function, use the visual tools on [cubic-bezier.com](http://cubic-bezier.com). Once you find an animation path you like, simply copy and paste the cubic bezier values and paste them in the `AnimationCurve.cubicBezier` function. There should be four numbers (X,Y coordinates for each of the two points in the animation).
141141

142142
__Example 4: How to create own animation curve via cubic Bezier__
143143

@@ -170,8 +170,4 @@ view.animate({
170170

171171
![bezier](../img/modules/animation/bezier.gif "Bezier")
172172

173-
174-
175-
176173
More detailed examples are available on the [Animation Examples](./animation-examples.md) page.
177-

0 commit comments

Comments
 (0)