Skip to content

Commit cd96687

Browse files
Vasil ChimevVladimirAmiorkov
Vasil Chimev
authored and
VladimirAmiorkov
committed
Revert "Revert "feat(animation): support animating width/height properties (WIP) (#4917)" (#5136)"
This reverts commit 8973a6f.
1 parent f5fd979 commit cd96687

24 files changed

+944
-48
lines changed

‎apps/app/ui-tests-app/animation/animation-army-100.ts

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import * as view from 'tns-core-modules/ui/core/view';
2+
import {View} from 'tns-core-modules/ui/core/view';
3+
import * as pages from 'tns-core-modules/ui/page';
4+
import {Button} from 'tns-core-modules/ui/button';
5+
import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
6+
import {Label} from 'tns-core-modules/ui/label';
7+
import {Animation, AnimationDefinition} from 'tns-core-modules/ui/animation';
8+
import * as fpsMeter from 'tns-core-modules/fps-meter';
9+
10+
let fpsCallbackId;
11+
export function onLoaded(args) {
12+
const page = args.object;
13+
const fpsLabel = view.getViewById(page, 'fps') as Label;
14+
fpsCallbackId = fpsMeter.addCallback((fps: number, minFps: number) => {
15+
fpsLabel.text = `${fps.toFixed(2)}/${minFps.toFixed(2)}`;
16+
});
17+
fpsMeter.start();
18+
}
19+
20+
export function onUnloaded() {
21+
fpsMeter.removeCallback(fpsCallbackId);
22+
fpsMeter.stop();
23+
}
24+
25+
export function getBoxPropertyAnimationData(property: string,
26+
animateEase: string,
27+
target: View,
28+
extentX: number = 128,
29+
extentY: number = 128) {
30+
let animateKey;
31+
let animateValueTo;
32+
let animateValueFrom;
33+
let animateDuration = animateEase === 'spring' ? 800 : 500;
34+
let animateReturnDelay = animateEase === 'spring' ? 0 : 200;
35+
36+
// Determine the full animation property name (some are shortened in UI), and the demo to/from values
37+
switch (property) {
38+
case 'height':
39+
target.originX = target.originY = 0.5;
40+
animateKey = 'height';
41+
animateValueTo = 0;
42+
animateValueFrom = extentY;
43+
break;
44+
case 'width':
45+
target.originX = target.originY = 0.5;
46+
animateKey = 'width';
47+
animateValueTo = 0;
48+
animateValueFrom = extentX;
49+
break;
50+
case 'opacity':
51+
animateKey = 'opacity';
52+
animateValueTo = 0;
53+
animateValueFrom = 1;
54+
break;
55+
case 'color':
56+
animateKey = 'backgroundColor';
57+
animateValueTo = 'blue';
58+
animateValueFrom = 'purple';
59+
break;
60+
case 'rotate':
61+
target.originX = target.originY = 0.5;
62+
animateKey = 'rotate';
63+
animateValueTo = 180;
64+
animateValueFrom = 0;
65+
break;
66+
case 'scale':
67+
target.originX = target.originY = 0.5;
68+
animateKey = 'scale';
69+
animateValueTo = {x: 0.1, y: 0.1};
70+
animateValueFrom = {x: 1, y: 1};
71+
break;
72+
default:
73+
throw new Error(`demo animation for '${property}' is not implemented`);
74+
}
75+
76+
return {
77+
animateEase,
78+
animateKey,
79+
animateValueTo,
80+
animateValueFrom,
81+
animateReturnDelay,
82+
animateDuration
83+
};
84+
}
85+
86+
export function easeAnimate(args) {
87+
const clicked = args.object as Button;
88+
const page: pages.Page = clicked.page;
89+
const select = view.getViewById(page, 'select') as SegmentedBar;
90+
const item: SegmentedBarItem = select.items[select.selectedIndex];
91+
const animsIn: AnimationDefinition[] = [];
92+
const animsOut: AnimationDefinition[] = [];
93+
for (let i = 0; i < 100; i++) {
94+
const box = view.getViewById(page, 'el-' + i) as Label;
95+
const prop = getBoxPropertyAnimationData(item.title, clicked.text, box, 32, 24);
96+
animsIn.push({
97+
[prop.animateKey]: prop.animateValueTo,
98+
delay: 15 * i,
99+
target: box,
100+
duration: prop.animateDuration,
101+
curve: prop.animateEase
102+
});
103+
animsOut.push({
104+
[prop.animateKey]: prop.animateValueFrom,
105+
target: box,
106+
delay: prop.animateReturnDelay + (5 * (Math.abs(i - 100))),
107+
duration: prop.animateDuration,
108+
curve: prop.animateEase
109+
});
110+
}
111+
new Animation(animsIn, false).play()
112+
.then(() => new Animation(animsOut, false).play())
113+
.catch((e) => console.log(e));
114+
}

‎apps/app/ui-tests-app/animation/animation-army-100.xml

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<Page loaded="onLoaded" unloaded="onUnloaded">
2+
<AbsoluteLayout>
3+
<GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
4+
5+
<Label row="0" colSpan="3" text="Animate"/>
6+
<SegmentedBar row="1" colSpan="3" id="select">
7+
<SegmentedBar.items>
8+
<SegmentedBarItem title="height"/>
9+
<SegmentedBarItem title="width"/>
10+
<SegmentedBarItem title="opacity"/>
11+
<SegmentedBarItem title="color"/>
12+
<SegmentedBarItem title="rotate"/>
13+
<SegmentedBarItem title="scale"/>
14+
</SegmentedBar.items>
15+
</SegmentedBar>
16+
17+
<Label row="2" colSpan="3" text="Easing"/>
18+
<Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
19+
<Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
20+
<Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
21+
<Button row="4" col="0" text="spring" tap="easeAnimate"/>
22+
<Button row="4" col="1" text="linear" tap="easeAnimate"/>
23+
<Button row="4" col="2" text="ease" tap="easeAnimate"/>
24+
</GridLayout>
25+
26+
<StackLayout top="20" left="200" orientation="horizontal">
27+
<Label text="FPS: "></Label>
28+
<Label id="fps"></Label>
29+
</StackLayout>
30+
31+
<GridLayout top="256" left="20" width="100%"
32+
rows="24,24,24,24,24,24,24,24,24,24"
33+
columns="32,32,32,32,32,32,32,32,32,32">
34+
<!-- 0 -->
35+
<Label row="0" col="0" height="24" width="32" id="el-0" backgroundColor="purple"/>
36+
<Label row="0" col="1" height="24" width="32" id="el-1" backgroundColor="purple"/>
37+
<Label row="0" col="2" height="24" width="32" id="el-2" backgroundColor="purple"/>
38+
<Label row="0" col="3" height="24" width="32" id="el-3" backgroundColor="purple"/>
39+
<Label row="0" col="4" height="24" width="32" id="el-4" backgroundColor="purple"/>
40+
<Label row="0" col="5" height="24" width="32" id="el-5" backgroundColor="purple"/>
41+
<Label row="0" col="6" height="24" width="32" id="el-6" backgroundColor="purple"/>
42+
<Label row="0" col="7" height="24" width="32" id="el-7" backgroundColor="purple"/>
43+
<Label row="0" col="8" height="24" width="32" id="el-8" backgroundColor="purple"/>
44+
<Label row="0" col="9" height="24" width="32" id="el-9" backgroundColor="purple"/>
45+
46+
<!-- 1 -->
47+
<Label row="1" col="0" height="24" width="32" id="el-10" backgroundColor="purple"/>
48+
<Label row="1" col="1" height="24" width="32" id="el-11" backgroundColor="purple"/>
49+
<Label row="1" col="2" height="24" width="32" id="el-12" backgroundColor="purple"/>
50+
<Label row="1" col="3" height="24" width="32" id="el-13" backgroundColor="purple"/>
51+
<Label row="1" col="4" height="24" width="32" id="el-14" backgroundColor="purple"/>
52+
<Label row="1" col="5" height="24" width="32" id="el-15" backgroundColor="purple"/>
53+
<Label row="1" col="6" height="24" width="32" id="el-16" backgroundColor="purple"/>
54+
<Label row="1" col="7" height="24" width="32" id="el-17" backgroundColor="purple"/>
55+
<Label row="1" col="8" height="24" width="32" id="el-18" backgroundColor="purple"/>
56+
<Label row="1" col="9" height="24" width="32" id="el-19" backgroundColor="purple"/>
57+
58+
<!-- 2 -->
59+
<Label row="2" col="0" height="24" width="32" id="el-20" backgroundColor="purple"/>
60+
<Label row="2" col="1" height="24" width="32" id="el-21" backgroundColor="purple"/>
61+
<Label row="2" col="2" height="24" width="32" id="el-22" backgroundColor="purple"/>
62+
<Label row="2" col="3" height="24" width="32" id="el-23" backgroundColor="purple"/>
63+
<Label row="2" col="4" height="24" width="32" id="el-24" backgroundColor="purple"/>
64+
<Label row="2" col="5" height="24" width="32" id="el-25" backgroundColor="purple"/>
65+
<Label row="2" col="6" height="24" width="32" id="el-26" backgroundColor="purple"/>
66+
<Label row="2" col="7" height="24" width="32" id="el-27" backgroundColor="purple"/>
67+
<Label row="2" col="8" height="24" width="32" id="el-28" backgroundColor="purple"/>
68+
<Label row="2" col="9" height="24" width="32" id="el-29" backgroundColor="purple"/>
69+
70+
<!-- 3 -->
71+
<Label row="3" col="0" height="24" width="32" id="el-30" backgroundColor="purple"/>
72+
<Label row="3" col="1" height="24" width="32" id="el-31" backgroundColor="purple"/>
73+
<Label row="3" col="2" height="24" width="32" id="el-32" backgroundColor="purple"/>
74+
<Label row="3" col="3" height="24" width="32" id="el-33" backgroundColor="purple"/>
75+
<Label row="3" col="4" height="24" width="32" id="el-34" backgroundColor="purple"/>
76+
<Label row="3" col="5" height="24" width="32" id="el-35" backgroundColor="purple"/>
77+
<Label row="3" col="6" height="24" width="32" id="el-36" backgroundColor="purple"/>
78+
<Label row="3" col="7" height="24" width="32" id="el-37" backgroundColor="purple"/>
79+
<Label row="3" col="8" height="24" width="32" id="el-38" backgroundColor="purple"/>
80+
<Label row="3" col="9" height="24" width="32" id="el-39" backgroundColor="purple"/>
81+
82+
<!-- 4 -->
83+
<Label row="4" col="0" height="24" width="32" id="el-40" backgroundColor="purple"/>
84+
<Label row="4" col="1" height="24" width="32" id="el-41" backgroundColor="purple"/>
85+
<Label row="4" col="2" height="24" width="32" id="el-42" backgroundColor="purple"/>
86+
<Label row="4" col="3" height="24" width="32" id="el-43" backgroundColor="purple"/>
87+
<Label row="4" col="4" height="24" width="32" id="el-44" backgroundColor="purple"/>
88+
<Label row="4" col="5" height="24" width="32" id="el-45" backgroundColor="purple"/>
89+
<Label row="4" col="6" height="24" width="32" id="el-46" backgroundColor="purple"/>
90+
<Label row="4" col="7" height="24" width="32" id="el-47" backgroundColor="purple"/>
91+
<Label row="4" col="8" height="24" width="32" id="el-48" backgroundColor="purple"/>
92+
<Label row="4" col="9" height="24" width="32" id="el-49" backgroundColor="purple"/>
93+
94+
<!-- 5 -->
95+
<Label row="5" col="0" height="24" width="32" id="el-50" backgroundColor="purple"/>
96+
<Label row="5" col="1" height="24" width="32" id="el-51" backgroundColor="purple"/>
97+
<Label row="5" col="2" height="24" width="32" id="el-52" backgroundColor="purple"/>
98+
<Label row="5" col="3" height="24" width="32" id="el-53" backgroundColor="purple"/>
99+
<Label row="5" col="4" height="24" width="32" id="el-54" backgroundColor="purple"/>
100+
<Label row="5" col="5" height="24" width="32" id="el-55" backgroundColor="purple"/>
101+
<Label row="5" col="6" height="24" width="32" id="el-56" backgroundColor="purple"/>
102+
<Label row="5" col="7" height="24" width="32" id="el-57" backgroundColor="purple"/>
103+
<Label row="5" col="8" height="24" width="32" id="el-58" backgroundColor="purple"/>
104+
<Label row="5" col="9" height="24" width="32" id="el-59" backgroundColor="purple"/>
105+
106+
<!-- 6 -->
107+
<Label row="6" col="0" height="24" width="32" id="el-60" backgroundColor="purple"/>
108+
<Label row="6" col="1" height="24" width="32" id="el-61" backgroundColor="purple"/>
109+
<Label row="6" col="2" height="24" width="32" id="el-62" backgroundColor="purple"/>
110+
<Label row="6" col="3" height="24" width="32" id="el-63" backgroundColor="purple"/>
111+
<Label row="6" col="4" height="24" width="32" id="el-64" backgroundColor="purple"/>
112+
<Label row="6" col="5" height="24" width="32" id="el-65" backgroundColor="purple"/>
113+
<Label row="6" col="6" height="24" width="32" id="el-66" backgroundColor="purple"/>
114+
<Label row="6" col="7" height="24" width="32" id="el-67" backgroundColor="purple"/>
115+
<Label row="6" col="8" height="24" width="32" id="el-68" backgroundColor="purple"/>
116+
<Label row="6" col="9" height="24" width="32" id="el-69" backgroundColor="purple"/>
117+
118+
<!-- 7 -->
119+
<Label row="7" col="0" height="24" width="32" id="el-70" backgroundColor="purple"/>
120+
<Label row="7" col="1" height="24" width="32" id="el-71" backgroundColor="purple"/>
121+
<Label row="7" col="2" height="24" width="32" id="el-72" backgroundColor="purple"/>
122+
<Label row="7" col="3" height="24" width="32" id="el-73" backgroundColor="purple"/>
123+
<Label row="7" col="4" height="24" width="32" id="el-74" backgroundColor="purple"/>
124+
<Label row="7" col="5" height="24" width="32" id="el-75" backgroundColor="purple"/>
125+
<Label row="7" col="6" height="24" width="32" id="el-76" backgroundColor="purple"/>
126+
<Label row="7" col="7" height="24" width="32" id="el-77" backgroundColor="purple"/>
127+
<Label row="7" col="8" height="24" width="32" id="el-78" backgroundColor="purple"/>
128+
<Label row="7" col="9" height="24" width="32" id="el-79" backgroundColor="purple"/>
129+
130+
<!-- 8 -->
131+
<Label row="8" col="0" height="24" width="32" id="el-80" backgroundColor="purple"/>
132+
<Label row="8" col="1" height="24" width="32" id="el-81" backgroundColor="purple"/>
133+
<Label row="8" col="2" height="24" width="32" id="el-82" backgroundColor="purple"/>
134+
<Label row="8" col="3" height="24" width="32" id="el-83" backgroundColor="purple"/>
135+
<Label row="8" col="4" height="24" width="32" id="el-84" backgroundColor="purple"/>
136+
<Label row="8" col="5" height="24" width="32" id="el-85" backgroundColor="purple"/>
137+
<Label row="8" col="6" height="24" width="32" id="el-86" backgroundColor="purple"/>
138+
<Label row="8" col="7" height="24" width="32" id="el-87" backgroundColor="purple"/>
139+
<Label row="8" col="8" height="24" width="32" id="el-88" backgroundColor="purple"/>
140+
<Label row="8" col="9" height="24" width="32" id="el-89" backgroundColor="purple"/>
141+
142+
<!-- 9 -->
143+
<Label row="9" col="0" height="24" width="32" id="el-90" backgroundColor="purple"/>
144+
<Label row="9" col="1" height="24" width="32" id="el-91" backgroundColor="purple"/>
145+
<Label row="9" col="2" height="24" width="32" id="el-92" backgroundColor="purple"/>
146+
<Label row="9" col="3" height="24" width="32" id="el-93" backgroundColor="purple"/>
147+
<Label row="9" col="4" height="24" width="32" id="el-94" backgroundColor="purple"/>
148+
<Label row="9" col="5" height="24" width="32" id="el-95" backgroundColor="purple"/>
149+
<Label row="9" col="6" height="24" width="32" id="el-96" backgroundColor="purple"/>
150+
<Label row="9" col="7" height="24" width="32" id="el-97" backgroundColor="purple"/>
151+
<Label row="9" col="8" height="24" width="32" id="el-98" backgroundColor="purple"/>
152+
<Label row="9" col="9" height="24" width="32" id="el-99" backgroundColor="purple"/>
153+
154+
</GridLayout>
155+
156+
</AbsoluteLayout>
157+
</Page>

‎apps/app/ui-tests-app/animation/animation-curves.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as view from 'tns-core-modules/ui/core/view';
2+
import * as pages from 'tns-core-modules/ui/page';
3+
import {Button} from 'tns-core-modules/ui/button';
4+
import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
5+
import {Label} from 'tns-core-modules/ui/label';
6+
7+
export function easeAnimate(args) {
8+
const clicked = args.object as Button;
9+
const page: pages.Page = clicked.page;
10+
const target = view.getViewById(page, 'target') as Label;
11+
const select = view.getViewById(page, 'select') as SegmentedBar;
12+
const item: SegmentedBarItem = select.items[select.selectedIndex];
13+
const easeType: string = clicked.text;
14+
const extent = 128;
15+
let duration = easeType === 'spring' ? 800 : 500;
16+
let delay = easeType === 'spring' ? 0 : 200;
17+
let animateKey: string = null;
18+
let animateValueTo: any = null;
19+
let animateValueFrom: any = null;
20+
21+
switch (item.title) {
22+
case 'height':
23+
animateKey = 'height';
24+
target.originX = target.originY = 0;
25+
animateValueTo = 0;
26+
animateValueFrom = extent;
27+
break;
28+
case 'width':
29+
animateKey = 'width';
30+
target.originX = target.originY = 0;
31+
animateValueTo = 0;
32+
animateValueFrom = extent;
33+
break;
34+
case 'opacity':
35+
animateKey = 'opacity';
36+
animateValueTo = 0;
37+
animateValueFrom = 1;
38+
break;
39+
case 'color':
40+
animateKey = 'backgroundColor';
41+
animateValueTo = 'blue';
42+
animateValueFrom = 'purple';
43+
break;
44+
case 'rotate':
45+
animateKey = 'rotate';
46+
target.originX = target.originY = 0.5;
47+
animateValueTo = 180;
48+
animateValueFrom = 0;
49+
break;
50+
case 'scale':
51+
animateKey = 'scale';
52+
target.originX = target.originY = 0.5;
53+
animateValueTo = {x: 1.5, y: 1.5};
54+
animateValueFrom = {x: 1, y: 1};
55+
break;
56+
}
57+
target
58+
.animate({
59+
[animateKey]: animateValueTo,
60+
duration,
61+
curve: easeType
62+
})
63+
.then(() => {
64+
return target.animate({
65+
[animateKey]: animateValueFrom,
66+
delay,
67+
duration,
68+
curve: easeType
69+
});
70+
})
71+
.catch((e) => console.log(e));
72+
}

‎apps/app/ui-tests-app/animation/animation-curves.xml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<Page>
2+
<AbsoluteLayout>
3+
<GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
4+
5+
<Label row="0" colSpan="3" text="Animate"/>
6+
<SegmentedBar row="1" colSpan="3" id="select">
7+
<SegmentedBar.items>
8+
<SegmentedBarItem title="height"/>
9+
<SegmentedBarItem title="width"/>
10+
<SegmentedBarItem title="opacity"/>
11+
<SegmentedBarItem title="color"/>
12+
<SegmentedBarItem title="rotate"/>
13+
<SegmentedBarItem title="scale"/>
14+
</SegmentedBar.items>
15+
</SegmentedBar>
16+
17+
<Label row="2" colSpan="3" text="Easing"/>
18+
<Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
19+
<Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
20+
<Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
21+
<Button row="4" col="0" text="spring" tap="easeAnimate"/>
22+
<Button row="4" col="1" text="linear" tap="easeAnimate"/>
23+
<Button row="4" col="2" text="ease" tap="easeAnimate"/>
24+
</GridLayout>
25+
26+
<Label top="300" left="96" height="128" width="128"
27+
borderColor="purple" borderWidth="1"/>
28+
<Label top="300" left="96" height="128" width="128"
29+
id="target" backgroundColor="purple"/>
30+
</AbsoluteLayout>
31+
</Page>

0 commit comments

Comments
 (0)