Smartface IDE
Smartface Native Framework
TUTORIALS
LIFECYCLE MANAGEMENT
KNOWLEDGE BASE
Hello Animation
​UI.Animator is used to perform transform animations inside a layout. All you have to do is to pass functions setting the final condition of the UI objects and let Animator execute those functions with animation. In this tutorial, we will be creating a basic animation step by step so that we will know the basics of the animations with Animator.
Initial Setup
Let's say we have a view inside a flex layout in a page with the setup below:
Initial Setup
1
import View from '@smartface/native/ui/view';
2
​
3
const animatedView = new View({
4
left:1, top:1, width: 100, height: 100,
5
positionType: FlexLayout.PositionType.ABSOLUTE,
6
backgroundColor: Color.create("#00A1F1")
7
});
8
​
9
function onLoad(superOnLoad: () => void) {
10
superOnLoad();
11
this.headerBar.visible = false;
12
Application.statusBar.visible = false;
13
​
14
flexLayout.borderWidth = 1;
15
flexLayout.addChild(animatedView);
16
};
Copied!
​
​​
UI.Animator Functions
Let's say we want to expand the button and then shrink it to the initial size.
To do that, we must start with the first step, growing.
Animate
1
function onShow(superOnShow: () => void) {
2
superOnShow();
3
// animate is the initial function to start an animation
4
// @param layout having the animating object
5
// @param duration in milliseconds
6
// @param function having the final condition of the objects
7
Animator.animate(flexLayout, 1000, function() {
8
animatedView.width = 300;
9
animatedView.height = 300;
10
});
11
};
Copied!
​
​​
Note that:
Put the animation inside onShow method if you want to animate things right after the page is ready so that we can observe the animation.
Now we add the shrink animation. However, this time we will be using another method to continue our animation.
Then
1
function onShow(superOnShow: () => void) {
2
superOnShow();
3
// then is used to create a sequence of animations
4
// @param duration in milliseconds
5
// @param function having the final condition of the objects in each then
6
Animator.animate(flexLayout, 1000, function() {
7
animatedView.width = 300;
8
animatedView.height = 300;
9
}).then(3000, function() {
10
animatedView.width = 5;
11
animatedView.height = 5;
12
}).then(1000, function() {
13
animatedView.width = 100;
14
animatedView.height = 100;
15
});
16
};
Copied!
​
​​
Finally, we conclude our animation by giving color to the view object.
Complete
1
function onShow(superOnShow: () => void) {
2
// complete is used to indicate the animation is finished
3
Animator.animate(flexLayout, 1000, function() {
4
animatedView.width = 300;
5
animatedView.height = 300;
6
}).then(3000, function() {
7
animatedView.width = 5;
8
animatedView.height = 5;
9
}).then(1000, function() {
10
animatedView.width = 100;
11
animatedView.height = 100;
12
}).complete(function() {
13
animatedView.backgroundColor = Color.GREEN;
14
});
15
};
Copied!
​
​​
Do Not Forget:
Complete does not perform any animations but indicates that the all animation sequences are finished.
Try Yourself
Page Code
Page UI
scripts/pages/page1.ts
1
import Page1Design from 'generated/pages/page1';
2
import Animator from '@smartface/native/ui/animator';
3
import Application from '@smartface/native/application';
4
​
5
export default class Page extends Page1Design {
6
constructor() {
7
super();
8
this.onShow = onShow.bind(this, this.onShow.bind(this));
9
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
10
}
11
animate() {
12
Animator.animate(this.layout, 1000, () => {
13
this.animatedView.dispatch({
14
type: "updateUserStyle",
15
userStyle: {
16
width: 300,
17
height: 300
18
}
19
});
20
}).then(3000, () => {
21
this.animatedView.dispatch({
22
type: "updateUserStyle",
23
userStyle: {
24
width: 5,
25
height: 5
26
}
27
});
28
}).then(1000, () => {
29
this.animatedView.dispatch({
30
type: "updateUserStyle",
31
userStyle: {
32
width: 100,
33
height: 100
34
}
35
});
36
}).complete(() => {
37
this.animatedView.dispatch({
38
type: "updateUserStyle",
39
userStyle: {
40
backgroundColor: "#00FF00"
41
}
42
});
43
});
44
}
45
}
46
​
47
function onShow(superOnShow: () => void) {
48
superOnShow();
49
this.animate();
50
}
51
​
52
function onLoad(superOnLoad: () => void) {
53
superOnLoad();
54
this.headerBar.visible = false;
55
Application.statusBar.visible = false;
56
this.dispatch({
57
type: 'updateUserStyle',
58
userStyle: {
59
borderWidth: 1
60
}
61
});
62
}
63
​
64
​
Copied!
.ui/page1.cpx
1
{
2
"components": [
3
{
4
"className": ".sf-page",
5
"id": "7761adc8",
6
"initialized": true,
7
"props": {
8
"children": [
9
"a829471c",
10
"35f1c1a1",
11
"a561-cb4d-66a5-719e"
12
],
13
"isRemovable": true,
14
"name": "page1",
15
"orientation": "PORTRAIT",
16
"parent": null,
17
"safeAreaEnabled": true
18
},
19
"type": "Page",
20
"userProps": {
21
"flexProps": {
22
"justifyContent": "SPACE_AROUND"
23
},
24
"orientation": "PORTRAIT",
25
"paddingBottom": 20,
26
"paddingLeft": 16,
27
"paddingRight": 16,
28
"safeAreaEnabled": true
29
},
30
"version": "6.15.1"
31
},
32
{
33
"className": ".sf-statusBar",
34
"id": "a829471c",
35
"props": {
36
"children": [],
37
"isRemovable": false,
38
"name": "statusBar",
39
"parent": "7761adc8"
40
},
41
"type": "StatusBar",
42
"userProps": {
43
"visible": true
44
}
45
},
46
{
47
"className": ".sf-headerBar",
48
"id": "35f1c1a1",
49
"props": {
50
"children": [],
51
"isRemovable": false,
52
"name": "headerBar",
53
"parent": "7761adc8",
54
"title": "page1"
55
},
56
"type": "HeaderBar",
57
"userProps": {
58
"title": "page1",
59
"visible": true
60
}
61
},
62
{
63
"className": ".sf-view",
64
"id": "a561-cb4d-66a5-719e",
65
"props": {
66
"children": [],
67
"name": "animatedView",
68
"parent": "7761adc8",
69
"usePageVariable": true
70
},
71
"type": "View",
72
"userProps": {
73
"backgroundColor": "rgba( 0, 161, 241, 1 )",
74
"flexProps": {
75
"positionType": "ABSOLUTE"
76
},
77
"height": 100,
78
"left": 1,
79
"testId": "IvejM-61a",
80
"top": 1,
81
"usePageVariable": true,
82
"width": 100
83
}
84
}
85
]
86
}
Copied!
Please refer this document for UI Editor and dispatch:
Last modified 4mo ago
Copy link