Skip to content

Commit 6ab01de

Browse files
author
Vasil Chimev
authored
Revert "Revert "feat(animation): support animating width/height properties (WIP) (NativeScript#4917)" (NativeScript#5136)"
This reverts commit 8973a6f.
1 parent 8973a6f commit 6ab01de

25 files changed

+942
-57
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy