Skip to content

Commit 57ed0cf

Browse files
justindujardinSvetoslavTsenov
justindujardin
authored and
SvetoslavTsenov
committed
feat(animation): support animating width/height properties (WIP) (NativeScript#4917)
* feat(animation): support animating width/height properties - width/height can be specified in any valid PercentLength form that can be parsed. - make width/height properties be based on animatable CSS property. TODO: affectsLayout???? - add a few basic tests. Could probably use a few more? - fix a few null pointer exceptions in PercentLength helpers * test(ui): add animation examples to ui-tests-app - basic height animation - height animation in StackLayout - fix an issue where strings were not automatically converted to PercentLength when calling directly into `View.animate` * test(ui): cleanup and add summary/details layout example - use height transition to cover textview content. - when clicking on the summary view, animate the summary height up to a small header and show the text view. - fake animating the height on the textview by very subtly animating its translateY value while shrinking the header height. This tricks your mind into think that the text view is also vertically growing, even thought it's just slightly moving up along the Y axis. * test(ui): add animation curves test page - verify all built-in animation curve types work as expected. * test(ui): update animation curve example for multiple properties - add a segmented bar that allows choosing which properties to animate using the various curves. - interestingly, a whole bunch of properties fail with spring on iOS. - refactor width/height animations handlers to remove duplication on iOS. - implement proper spring animation for width/height on iOS. * test(ui): add stress example with 100 labels animating and fps meter - same curve/property selector as the curves example, but with 10x10 grid of items that stagger animate, and an FPS meter. - sadly it looks like width/height animations are considerably slower than the others when you have a bunch of them. I'm not sure that's entirely surprising since they interact with the layout system. - the better news is that even with the army example, my really old android 4 tablet manages ~30fps. On height/width animations from the curves example, the old tablet does fine with no noticeable FPS hit. * refactor: deduplicate existing droid width/height animations - stash to prep for replacing with LayoutTransition. * test(animation): unit tests for extent animation and PercentLength parse - update animation scaffold to allow specifying the parent stack layout height/width - test basic supported units, px, % - test basic percent length parser behaviors * chore: cleanup cruft and remove noise from diff - undo the import mangling that WebStorm helpfully applied - remove .editorconfig file - clean up in tests, remove cruft * chore: cleanup from review - more import changes * chore: remove .editorconfig
1 parent 4bcb984 commit 57ed0cf

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)