You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 17, 2022. It is now read-only.
[Try this animation in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=5)
44
+
37
45
As _Example 2_ shows, you can express the same animation in CSS with the following definition:
38
46
39
47
__Example 2: Changing background color animation with CSS.__
@@ -49,9 +57,15 @@ __Example 2: Changing background color animation with CSS.__
49
57
animation-fill-mode: forwards;
50
58
}
51
59
```
60
+
```XML
61
+
<!-- Apply CSS class to element to trigger CSS animation -->
62
+
<Labelclass="view"text="{N}"></Label>
63
+
```
52
64
53
65
> CSS animations apply with lower precedence, like any other CSS settings, so any local values set in your element will cancel the animation.
54
66
67
+
[Try this animation in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=2)
68
+
55
69
NativeScript lets you animate the following properties:
56
70
57
71
-**opacity**
@@ -119,7 +133,11 @@ view.animate({
119
133
}
120
134
```
121
135
122
-
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.
136
+
[Experiment with the different animation timing functions in the NativeScript Playground](https://play.nativescript.org/?template=play-tsc&id=RE7NqF&v=6)
137
+
138
+
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.
139
+
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).
123
141
124
142
__Example 4: How to create own animation curve via cubic Bezier__
0 commit comments