mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat(animation): support animating width/height properties (WIP) (#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
This commit is contained in:
Justin DuJardin
committed by
Svetoslav
Svetoslav
parent
4bcb9840c1
commit
57ed0cf405
114
apps/app/ui-tests-app/animation/animation-army-100.ts
Normal file
114
apps/app/ui-tests-app/animation/animation-army-100.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import * as view from 'tns-core-modules/ui/core/view';
|
||||
import {View} from 'tns-core-modules/ui/core/view';
|
||||
import * as pages from 'tns-core-modules/ui/page';
|
||||
import {Button} from 'tns-core-modules/ui/button';
|
||||
import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
|
||||
import {Label} from 'tns-core-modules/ui/label';
|
||||
import {Animation, AnimationDefinition} from 'tns-core-modules/ui/animation';
|
||||
import * as fpsMeter from 'tns-core-modules/fps-meter';
|
||||
|
||||
let fpsCallbackId;
|
||||
export function onLoaded(args) {
|
||||
const page = args.object;
|
||||
const fpsLabel = view.getViewById(page, 'fps') as Label;
|
||||
fpsCallbackId = fpsMeter.addCallback((fps: number, minFps: number) => {
|
||||
fpsLabel.text = `${fps.toFixed(2)}/${minFps.toFixed(2)}`;
|
||||
});
|
||||
fpsMeter.start();
|
||||
}
|
||||
|
||||
export function onUnloaded() {
|
||||
fpsMeter.removeCallback(fpsCallbackId);
|
||||
fpsMeter.stop();
|
||||
}
|
||||
|
||||
export function getBoxPropertyAnimationData(property: string,
|
||||
animateEase: string,
|
||||
target: View,
|
||||
extentX: number = 128,
|
||||
extentY: number = 128) {
|
||||
let animateKey;
|
||||
let animateValueTo;
|
||||
let animateValueFrom;
|
||||
let animateDuration = animateEase === 'spring' ? 800 : 500;
|
||||
let animateReturnDelay = animateEase === 'spring' ? 0 : 200;
|
||||
|
||||
// Determine the full animation property name (some are shortened in UI), and the demo to/from values
|
||||
switch (property) {
|
||||
case 'height':
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = 'height';
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extentY;
|
||||
break;
|
||||
case 'width':
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = 'width';
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extentX;
|
||||
break;
|
||||
case 'opacity':
|
||||
animateKey = 'opacity';
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = 1;
|
||||
break;
|
||||
case 'color':
|
||||
animateKey = 'backgroundColor';
|
||||
animateValueTo = 'blue';
|
||||
animateValueFrom = 'purple';
|
||||
break;
|
||||
case 'rotate':
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = 'rotate';
|
||||
animateValueTo = 180;
|
||||
animateValueFrom = 0;
|
||||
break;
|
||||
case 'scale':
|
||||
target.originX = target.originY = 0.5;
|
||||
animateKey = 'scale';
|
||||
animateValueTo = {x: 0.1, y: 0.1};
|
||||
animateValueFrom = {x: 1, y: 1};
|
||||
break;
|
||||
default:
|
||||
throw new Error(`demo animation for '${property}' is not implemented`);
|
||||
}
|
||||
|
||||
return {
|
||||
animateEase,
|
||||
animateKey,
|
||||
animateValueTo,
|
||||
animateValueFrom,
|
||||
animateReturnDelay,
|
||||
animateDuration
|
||||
};
|
||||
}
|
||||
|
||||
export function easeAnimate(args) {
|
||||
const clicked = args.object as Button;
|
||||
const page: pages.Page = clicked.page;
|
||||
const select = view.getViewById(page, 'select') as SegmentedBar;
|
||||
const item: SegmentedBarItem = select.items[select.selectedIndex];
|
||||
const animsIn: AnimationDefinition[] = [];
|
||||
const animsOut: AnimationDefinition[] = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const box = view.getViewById(page, 'el-' + i) as Label;
|
||||
const prop = getBoxPropertyAnimationData(item.title, clicked.text, box, 32, 24);
|
||||
animsIn.push({
|
||||
[prop.animateKey]: prop.animateValueTo,
|
||||
delay: 15 * i,
|
||||
target: box,
|
||||
duration: prop.animateDuration,
|
||||
curve: prop.animateEase
|
||||
});
|
||||
animsOut.push({
|
||||
[prop.animateKey]: prop.animateValueFrom,
|
||||
target: box,
|
||||
delay: prop.animateReturnDelay + (5 * (Math.abs(i - 100))),
|
||||
duration: prop.animateDuration,
|
||||
curve: prop.animateEase
|
||||
});
|
||||
}
|
||||
new Animation(animsIn, false).play()
|
||||
.then(() => new Animation(animsOut, false).play())
|
||||
.catch((e) => console.log(e));
|
||||
}
|
||||
157
apps/app/ui-tests-app/animation/animation-army-100.xml
Normal file
157
apps/app/ui-tests-app/animation/animation-army-100.xml
Normal file
@@ -0,0 +1,157 @@
|
||||
<Page loaded="onLoaded" unloaded="onUnloaded">
|
||||
<AbsoluteLayout>
|
||||
<GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
|
||||
|
||||
<Label row="0" colSpan="3" text="Animate"/>
|
||||
<SegmentedBar row="1" colSpan="3" id="select">
|
||||
<SegmentedBar.items>
|
||||
<SegmentedBarItem title="height"/>
|
||||
<SegmentedBarItem title="width"/>
|
||||
<SegmentedBarItem title="opacity"/>
|
||||
<SegmentedBarItem title="color"/>
|
||||
<SegmentedBarItem title="rotate"/>
|
||||
<SegmentedBarItem title="scale"/>
|
||||
</SegmentedBar.items>
|
||||
</SegmentedBar>
|
||||
|
||||
<Label row="2" colSpan="3" text="Easing"/>
|
||||
<Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
|
||||
<Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
|
||||
<Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
|
||||
<Button row="4" col="0" text="spring" tap="easeAnimate"/>
|
||||
<Button row="4" col="1" text="linear" tap="easeAnimate"/>
|
||||
<Button row="4" col="2" text="ease" tap="easeAnimate"/>
|
||||
</GridLayout>
|
||||
|
||||
<StackLayout top="20" left="200" orientation="horizontal">
|
||||
<Label text="FPS: "></Label>
|
||||
<Label id="fps"></Label>
|
||||
</StackLayout>
|
||||
|
||||
<GridLayout top="256" left="20" width="100%"
|
||||
rows="24,24,24,24,24,24,24,24,24,24"
|
||||
columns="32,32,32,32,32,32,32,32,32,32">
|
||||
<!-- 0 -->
|
||||
<Label row="0" col="0" height="24" width="32" id="el-0" backgroundColor="purple"/>
|
||||
<Label row="0" col="1" height="24" width="32" id="el-1" backgroundColor="purple"/>
|
||||
<Label row="0" col="2" height="24" width="32" id="el-2" backgroundColor="purple"/>
|
||||
<Label row="0" col="3" height="24" width="32" id="el-3" backgroundColor="purple"/>
|
||||
<Label row="0" col="4" height="24" width="32" id="el-4" backgroundColor="purple"/>
|
||||
<Label row="0" col="5" height="24" width="32" id="el-5" backgroundColor="purple"/>
|
||||
<Label row="0" col="6" height="24" width="32" id="el-6" backgroundColor="purple"/>
|
||||
<Label row="0" col="7" height="24" width="32" id="el-7" backgroundColor="purple"/>
|
||||
<Label row="0" col="8" height="24" width="32" id="el-8" backgroundColor="purple"/>
|
||||
<Label row="0" col="9" height="24" width="32" id="el-9" backgroundColor="purple"/>
|
||||
|
||||
<!-- 1 -->
|
||||
<Label row="1" col="0" height="24" width="32" id="el-10" backgroundColor="purple"/>
|
||||
<Label row="1" col="1" height="24" width="32" id="el-11" backgroundColor="purple"/>
|
||||
<Label row="1" col="2" height="24" width="32" id="el-12" backgroundColor="purple"/>
|
||||
<Label row="1" col="3" height="24" width="32" id="el-13" backgroundColor="purple"/>
|
||||
<Label row="1" col="4" height="24" width="32" id="el-14" backgroundColor="purple"/>
|
||||
<Label row="1" col="5" height="24" width="32" id="el-15" backgroundColor="purple"/>
|
||||
<Label row="1" col="6" height="24" width="32" id="el-16" backgroundColor="purple"/>
|
||||
<Label row="1" col="7" height="24" width="32" id="el-17" backgroundColor="purple"/>
|
||||
<Label row="1" col="8" height="24" width="32" id="el-18" backgroundColor="purple"/>
|
||||
<Label row="1" col="9" height="24" width="32" id="el-19" backgroundColor="purple"/>
|
||||
|
||||
<!-- 2 -->
|
||||
<Label row="2" col="0" height="24" width="32" id="el-20" backgroundColor="purple"/>
|
||||
<Label row="2" col="1" height="24" width="32" id="el-21" backgroundColor="purple"/>
|
||||
<Label row="2" col="2" height="24" width="32" id="el-22" backgroundColor="purple"/>
|
||||
<Label row="2" col="3" height="24" width="32" id="el-23" backgroundColor="purple"/>
|
||||
<Label row="2" col="4" height="24" width="32" id="el-24" backgroundColor="purple"/>
|
||||
<Label row="2" col="5" height="24" width="32" id="el-25" backgroundColor="purple"/>
|
||||
<Label row="2" col="6" height="24" width="32" id="el-26" backgroundColor="purple"/>
|
||||
<Label row="2" col="7" height="24" width="32" id="el-27" backgroundColor="purple"/>
|
||||
<Label row="2" col="8" height="24" width="32" id="el-28" backgroundColor="purple"/>
|
||||
<Label row="2" col="9" height="24" width="32" id="el-29" backgroundColor="purple"/>
|
||||
|
||||
<!-- 3 -->
|
||||
<Label row="3" col="0" height="24" width="32" id="el-30" backgroundColor="purple"/>
|
||||
<Label row="3" col="1" height="24" width="32" id="el-31" backgroundColor="purple"/>
|
||||
<Label row="3" col="2" height="24" width="32" id="el-32" backgroundColor="purple"/>
|
||||
<Label row="3" col="3" height="24" width="32" id="el-33" backgroundColor="purple"/>
|
||||
<Label row="3" col="4" height="24" width="32" id="el-34" backgroundColor="purple"/>
|
||||
<Label row="3" col="5" height="24" width="32" id="el-35" backgroundColor="purple"/>
|
||||
<Label row="3" col="6" height="24" width="32" id="el-36" backgroundColor="purple"/>
|
||||
<Label row="3" col="7" height="24" width="32" id="el-37" backgroundColor="purple"/>
|
||||
<Label row="3" col="8" height="24" width="32" id="el-38" backgroundColor="purple"/>
|
||||
<Label row="3" col="9" height="24" width="32" id="el-39" backgroundColor="purple"/>
|
||||
|
||||
<!-- 4 -->
|
||||
<Label row="4" col="0" height="24" width="32" id="el-40" backgroundColor="purple"/>
|
||||
<Label row="4" col="1" height="24" width="32" id="el-41" backgroundColor="purple"/>
|
||||
<Label row="4" col="2" height="24" width="32" id="el-42" backgroundColor="purple"/>
|
||||
<Label row="4" col="3" height="24" width="32" id="el-43" backgroundColor="purple"/>
|
||||
<Label row="4" col="4" height="24" width="32" id="el-44" backgroundColor="purple"/>
|
||||
<Label row="4" col="5" height="24" width="32" id="el-45" backgroundColor="purple"/>
|
||||
<Label row="4" col="6" height="24" width="32" id="el-46" backgroundColor="purple"/>
|
||||
<Label row="4" col="7" height="24" width="32" id="el-47" backgroundColor="purple"/>
|
||||
<Label row="4" col="8" height="24" width="32" id="el-48" backgroundColor="purple"/>
|
||||
<Label row="4" col="9" height="24" width="32" id="el-49" backgroundColor="purple"/>
|
||||
|
||||
<!-- 5 -->
|
||||
<Label row="5" col="0" height="24" width="32" id="el-50" backgroundColor="purple"/>
|
||||
<Label row="5" col="1" height="24" width="32" id="el-51" backgroundColor="purple"/>
|
||||
<Label row="5" col="2" height="24" width="32" id="el-52" backgroundColor="purple"/>
|
||||
<Label row="5" col="3" height="24" width="32" id="el-53" backgroundColor="purple"/>
|
||||
<Label row="5" col="4" height="24" width="32" id="el-54" backgroundColor="purple"/>
|
||||
<Label row="5" col="5" height="24" width="32" id="el-55" backgroundColor="purple"/>
|
||||
<Label row="5" col="6" height="24" width="32" id="el-56" backgroundColor="purple"/>
|
||||
<Label row="5" col="7" height="24" width="32" id="el-57" backgroundColor="purple"/>
|
||||
<Label row="5" col="8" height="24" width="32" id="el-58" backgroundColor="purple"/>
|
||||
<Label row="5" col="9" height="24" width="32" id="el-59" backgroundColor="purple"/>
|
||||
|
||||
<!-- 6 -->
|
||||
<Label row="6" col="0" height="24" width="32" id="el-60" backgroundColor="purple"/>
|
||||
<Label row="6" col="1" height="24" width="32" id="el-61" backgroundColor="purple"/>
|
||||
<Label row="6" col="2" height="24" width="32" id="el-62" backgroundColor="purple"/>
|
||||
<Label row="6" col="3" height="24" width="32" id="el-63" backgroundColor="purple"/>
|
||||
<Label row="6" col="4" height="24" width="32" id="el-64" backgroundColor="purple"/>
|
||||
<Label row="6" col="5" height="24" width="32" id="el-65" backgroundColor="purple"/>
|
||||
<Label row="6" col="6" height="24" width="32" id="el-66" backgroundColor="purple"/>
|
||||
<Label row="6" col="7" height="24" width="32" id="el-67" backgroundColor="purple"/>
|
||||
<Label row="6" col="8" height="24" width="32" id="el-68" backgroundColor="purple"/>
|
||||
<Label row="6" col="9" height="24" width="32" id="el-69" backgroundColor="purple"/>
|
||||
|
||||
<!-- 7 -->
|
||||
<Label row="7" col="0" height="24" width="32" id="el-70" backgroundColor="purple"/>
|
||||
<Label row="7" col="1" height="24" width="32" id="el-71" backgroundColor="purple"/>
|
||||
<Label row="7" col="2" height="24" width="32" id="el-72" backgroundColor="purple"/>
|
||||
<Label row="7" col="3" height="24" width="32" id="el-73" backgroundColor="purple"/>
|
||||
<Label row="7" col="4" height="24" width="32" id="el-74" backgroundColor="purple"/>
|
||||
<Label row="7" col="5" height="24" width="32" id="el-75" backgroundColor="purple"/>
|
||||
<Label row="7" col="6" height="24" width="32" id="el-76" backgroundColor="purple"/>
|
||||
<Label row="7" col="7" height="24" width="32" id="el-77" backgroundColor="purple"/>
|
||||
<Label row="7" col="8" height="24" width="32" id="el-78" backgroundColor="purple"/>
|
||||
<Label row="7" col="9" height="24" width="32" id="el-79" backgroundColor="purple"/>
|
||||
|
||||
<!-- 8 -->
|
||||
<Label row="8" col="0" height="24" width="32" id="el-80" backgroundColor="purple"/>
|
||||
<Label row="8" col="1" height="24" width="32" id="el-81" backgroundColor="purple"/>
|
||||
<Label row="8" col="2" height="24" width="32" id="el-82" backgroundColor="purple"/>
|
||||
<Label row="8" col="3" height="24" width="32" id="el-83" backgroundColor="purple"/>
|
||||
<Label row="8" col="4" height="24" width="32" id="el-84" backgroundColor="purple"/>
|
||||
<Label row="8" col="5" height="24" width="32" id="el-85" backgroundColor="purple"/>
|
||||
<Label row="8" col="6" height="24" width="32" id="el-86" backgroundColor="purple"/>
|
||||
<Label row="8" col="7" height="24" width="32" id="el-87" backgroundColor="purple"/>
|
||||
<Label row="8" col="8" height="24" width="32" id="el-88" backgroundColor="purple"/>
|
||||
<Label row="8" col="9" height="24" width="32" id="el-89" backgroundColor="purple"/>
|
||||
|
||||
<!-- 9 -->
|
||||
<Label row="9" col="0" height="24" width="32" id="el-90" backgroundColor="purple"/>
|
||||
<Label row="9" col="1" height="24" width="32" id="el-91" backgroundColor="purple"/>
|
||||
<Label row="9" col="2" height="24" width="32" id="el-92" backgroundColor="purple"/>
|
||||
<Label row="9" col="3" height="24" width="32" id="el-93" backgroundColor="purple"/>
|
||||
<Label row="9" col="4" height="24" width="32" id="el-94" backgroundColor="purple"/>
|
||||
<Label row="9" col="5" height="24" width="32" id="el-95" backgroundColor="purple"/>
|
||||
<Label row="9" col="6" height="24" width="32" id="el-96" backgroundColor="purple"/>
|
||||
<Label row="9" col="7" height="24" width="32" id="el-97" backgroundColor="purple"/>
|
||||
<Label row="9" col="8" height="24" width="32" id="el-98" backgroundColor="purple"/>
|
||||
<Label row="9" col="9" height="24" width="32" id="el-99" backgroundColor="purple"/>
|
||||
|
||||
</GridLayout>
|
||||
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
72
apps/app/ui-tests-app/animation/animation-curves.ts
Normal file
72
apps/app/ui-tests-app/animation/animation-curves.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import * as view from 'tns-core-modules/ui/core/view';
|
||||
import * as pages from 'tns-core-modules/ui/page';
|
||||
import {Button} from 'tns-core-modules/ui/button';
|
||||
import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
|
||||
import {Label} from 'tns-core-modules/ui/label';
|
||||
|
||||
export function easeAnimate(args) {
|
||||
const clicked = args.object as Button;
|
||||
const page: pages.Page = clicked.page;
|
||||
const target = view.getViewById(page, 'target') as Label;
|
||||
const select = view.getViewById(page, 'select') as SegmentedBar;
|
||||
const item: SegmentedBarItem = select.items[select.selectedIndex];
|
||||
const easeType: string = clicked.text;
|
||||
const extent = 128;
|
||||
let duration = easeType === 'spring' ? 800 : 500;
|
||||
let delay = easeType === 'spring' ? 0 : 200;
|
||||
let animateKey: string = null;
|
||||
let animateValueTo: any = null;
|
||||
let animateValueFrom: any = null;
|
||||
|
||||
switch (item.title) {
|
||||
case 'height':
|
||||
animateKey = 'height';
|
||||
target.originX = target.originY = 0;
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extent;
|
||||
break;
|
||||
case 'width':
|
||||
animateKey = 'width';
|
||||
target.originX = target.originY = 0;
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = extent;
|
||||
break;
|
||||
case 'opacity':
|
||||
animateKey = 'opacity';
|
||||
animateValueTo = 0;
|
||||
animateValueFrom = 1;
|
||||
break;
|
||||
case 'color':
|
||||
animateKey = 'backgroundColor';
|
||||
animateValueTo = 'blue';
|
||||
animateValueFrom = 'purple';
|
||||
break;
|
||||
case 'rotate':
|
||||
animateKey = 'rotate';
|
||||
target.originX = target.originY = 0.5;
|
||||
animateValueTo = 180;
|
||||
animateValueFrom = 0;
|
||||
break;
|
||||
case 'scale':
|
||||
animateKey = 'scale';
|
||||
target.originX = target.originY = 0.5;
|
||||
animateValueTo = {x: 1.5, y: 1.5};
|
||||
animateValueFrom = {x: 1, y: 1};
|
||||
break;
|
||||
}
|
||||
target
|
||||
.animate({
|
||||
[animateKey]: animateValueTo,
|
||||
duration,
|
||||
curve: easeType
|
||||
})
|
||||
.then(() => {
|
||||
return target.animate({
|
||||
[animateKey]: animateValueFrom,
|
||||
delay,
|
||||
duration,
|
||||
curve: easeType
|
||||
});
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
}
|
||||
31
apps/app/ui-tests-app/animation/animation-curves.xml
Normal file
31
apps/app/ui-tests-app/animation/animation-curves.xml
Normal file
@@ -0,0 +1,31 @@
|
||||
<Page>
|
||||
<AbsoluteLayout>
|
||||
<GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
|
||||
|
||||
<Label row="0" colSpan="3" text="Animate"/>
|
||||
<SegmentedBar row="1" colSpan="3" id="select">
|
||||
<SegmentedBar.items>
|
||||
<SegmentedBarItem title="height"/>
|
||||
<SegmentedBarItem title="width"/>
|
||||
<SegmentedBarItem title="opacity"/>
|
||||
<SegmentedBarItem title="color"/>
|
||||
<SegmentedBarItem title="rotate"/>
|
||||
<SegmentedBarItem title="scale"/>
|
||||
</SegmentedBar.items>
|
||||
</SegmentedBar>
|
||||
|
||||
<Label row="2" colSpan="3" text="Easing"/>
|
||||
<Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
|
||||
<Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
|
||||
<Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
|
||||
<Button row="4" col="0" text="spring" tap="easeAnimate"/>
|
||||
<Button row="4" col="1" text="linear" tap="easeAnimate"/>
|
||||
<Button row="4" col="2" text="ease" tap="easeAnimate"/>
|
||||
</GridLayout>
|
||||
|
||||
<Label top="300" left="96" height="128" width="128"
|
||||
borderColor="purple" borderWidth="1"/>
|
||||
<Label top="300" left="96" height="128" width="128"
|
||||
id="target" backgroundColor="purple"/>
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
79
apps/app/ui-tests-app/animation/effect-summary-details.ts
Normal file
79
apps/app/ui-tests-app/animation/effect-summary-details.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import * as view from 'tns-core-modules/ui/core/view';
|
||||
import * as pages from 'tns-core-modules/ui/page';
|
||||
import * as platform from 'tns-core-modules/platform';
|
||||
import {Animation} from 'tns-core-modules/ui/animation';
|
||||
import {TextView} from 'tns-core-modules/ui/text-view';
|
||||
import {isIOS} from 'tns-core-modules/platform';
|
||||
|
||||
let toggle = false;
|
||||
|
||||
export function pageLoaded(args) {
|
||||
const page = args.object;
|
||||
const screenHeight = platform.screen.mainScreen.heightDIPs;
|
||||
const screenYCenter = (screenHeight / 2);
|
||||
page.bindingContext = {
|
||||
screenHeight,
|
||||
screenYCenter,
|
||||
detailsHeight: 96,
|
||||
summary: 'Space! 🌌',
|
||||
ipsum: `Houston, Tranquillity Base here. The Eagle has landed.
|
||||
|
||||
For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.
|
||||
|
||||
As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.
|
||||
|
||||
What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.
|
||||
|
||||
Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.
|
||||
|
||||
NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.
|
||||
|
||||
Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next 10.
|
||||
|
||||
Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.
|
||||
|
||||
Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind.
|
||||
|
||||
When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!
|
||||
|
||||
http://spaceipsum.com`
|
||||
};
|
||||
}
|
||||
|
||||
export function theFinalFrontier(args) {
|
||||
const clicked = args.object as view.View;
|
||||
const page: pages.Page = clicked.page;
|
||||
const details = view.getViewById(page, 'details') as TextView;
|
||||
const ctx = page.bindingContext;
|
||||
const detailHeaderHeight: number = ctx.detailsHeight;
|
||||
|
||||
let statusBar = 0;
|
||||
if(isIOS) {
|
||||
const {ios} = require('tns-core-modules/ui/utils');
|
||||
statusBar = ios.getStatusBarHeight();
|
||||
}
|
||||
|
||||
const textViewHeight: number = ctx.screenHeight - statusBar - detailHeaderHeight;
|
||||
const transitions = [
|
||||
{
|
||||
target: clicked,
|
||||
height: toggle ? '100%' : detailHeaderHeight,
|
||||
duration: 200,
|
||||
curve: 'ease'
|
||||
},
|
||||
{
|
||||
target: details,
|
||||
opacity: toggle ? 0 : 1,
|
||||
height: textViewHeight,
|
||||
translate: {
|
||||
x: 0,
|
||||
y: toggle ? 50 : 0,
|
||||
},
|
||||
duration: 200,
|
||||
curve: 'easeIn'
|
||||
}
|
||||
];
|
||||
const animationSet = new Animation(transitions, false);
|
||||
animationSet.play();
|
||||
toggle = !toggle;
|
||||
}
|
||||
13
apps/app/ui-tests-app/animation/effect-summary-details.xml
Normal file
13
apps/app/ui-tests-app/animation/effect-summary-details.xml
Normal file
@@ -0,0 +1,13 @@
|
||||
<Page loaded="pageLoaded">
|
||||
<AbsoluteLayout height="100%">
|
||||
<TextView id="details"
|
||||
padding="12" paddingBottom="24"
|
||||
top="{{ detailsHeight }}" width="100%"
|
||||
text="{{ ipsum }}" fontSize="20"
|
||||
opacity="0" translateY="50" editable="false"/>
|
||||
<Label originY="0" height="100%" width="100%" fontSize="42"
|
||||
backgroundColor="MidnightBlue" color="white"
|
||||
textAlignment="center" verticalAlignment="center"
|
||||
tap="theFinalFrontier" text="{{ summary }}"/>
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
17
apps/app/ui-tests-app/animation/height-basic.ts
Normal file
17
apps/app/ui-tests-app/animation/height-basic.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import {Label} from 'tns-core-modules/ui/label';
|
||||
|
||||
let toggle = false;
|
||||
|
||||
export function animateHeight(args) {
|
||||
const clicked = args.object as Label;
|
||||
clicked
|
||||
.animate({
|
||||
height: toggle ? 128 : '100%',
|
||||
duration: 200,
|
||||
curve: 'easeInOut'
|
||||
})
|
||||
.then(() => {
|
||||
clicked.text = toggle ? "Cool." : "Tap here";
|
||||
});
|
||||
toggle = !toggle;
|
||||
}
|
||||
10
apps/app/ui-tests-app/animation/height-basic.xml
Normal file
10
apps/app/ui-tests-app/animation/height-basic.xml
Normal file
@@ -0,0 +1,10 @@
|
||||
<Page>
|
||||
<AbsoluteLayout>
|
||||
<Label originX="0" originY="0" top="0" left="0"
|
||||
height="128" fontSize="64px" color="white"
|
||||
textAlignment="center"
|
||||
text="Tap here"
|
||||
width="100%" backgroundColor="purple"
|
||||
tap="animateHeight"/>
|
||||
</AbsoluteLayout>
|
||||
</Page>
|
||||
12
apps/app/ui-tests-app/animation/layout-stack-height.ts
Normal file
12
apps/app/ui-tests-app/animation/layout-stack-height.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import * as view from 'tns-core-modules/ui/core/view';
|
||||
|
||||
export function tapLabel(args) {
|
||||
const clicked: view.View = args.object;
|
||||
const graffiti = clicked as any;
|
||||
clicked.animate({
|
||||
height: graffiti.toggle ? 64 : 128,
|
||||
duration: 200,
|
||||
curve: 'easeOut'
|
||||
});
|
||||
graffiti.toggle = !graffiti.toggle;
|
||||
}
|
||||
16
apps/app/ui-tests-app/animation/layout-stack-height.xml
Normal file
16
apps/app/ui-tests-app/animation/layout-stack-height.xml
Normal file
@@ -0,0 +1,16 @@
|
||||
<Page>
|
||||
<StackLayout row="1" verticalAlignment="top">
|
||||
<Label backgroundColor="darkblue" originY="0"
|
||||
tap="tapLabel"
|
||||
height="64" fontSize="32" color="skyblue" textAlignment="center"
|
||||
text="Click here"/>
|
||||
<Label backgroundColor="darkgreen" originY="0"
|
||||
tap="tapLabel"
|
||||
height="64" fontSize="32" color="lime" textAlignment="center"
|
||||
text="Or here"/>
|
||||
<Label backgroundColor="darkred" originY="0"
|
||||
tap="tapLabel"
|
||||
height="64" fontSize="32" color="pink" textAlignment="center"
|
||||
text="But NOT here"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
20
apps/app/ui-tests-app/animation/main-page.ts
Normal file
20
apps/app/ui-tests-app/animation/main-page.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { SubMainPageViewModel } from "../sub-main-page-view-model";
|
||||
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
|
||||
import { Page } from "tns-core-modules/ui/page";
|
||||
|
||||
export function pageLoaded(args: EventData) {
|
||||
const page = <Page>args.object;
|
||||
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
|
||||
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
|
||||
}
|
||||
|
||||
export function loadExamples() {
|
||||
const examples = new Map<string, string>();
|
||||
examples.set("animation-curves", "animation/animation-curves");
|
||||
examples.set("animation-army-100", "animation/animation-army-100");
|
||||
examples.set("height-basic", "animation/height-basic");
|
||||
examples.set("layout-stack-height", "animation/layout-stack-height");
|
||||
examples.set("effect-summary-details", "animation/effect-summary-details");
|
||||
return examples;
|
||||
}
|
||||
6
apps/app/ui-tests-app/animation/main-page.xml
Normal file
6
apps/app/ui-tests-app/animation/main-page.xml
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<ScrollView orientation="vertical" row="1">
|
||||
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
@@ -8,6 +8,7 @@ export function pageLoaded(args: EventData) {
|
||||
const page = <Page>args.object;
|
||||
const wrapLayout = page.getViewById<WrapLayout>("wrapLayoutWithExamples");
|
||||
const examples: Map<string, string> = new Map<string, string>();
|
||||
examples.set("animation", "animation/main-page");
|
||||
examples.set("action-bar", "action-bar/main-page");
|
||||
examples.set("bindings", "bindings/main-page");
|
||||
examples.set("button", "button/main-page");
|
||||
@@ -46,4 +47,4 @@ export function pageLoaded(args: EventData) {
|
||||
}else{
|
||||
parent.style.marginBottom=10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,6 +35,7 @@ export class TestPageMainViewModel extends Observable {
|
||||
try {
|
||||
frame.topmost().navigate(TestPageMainViewModel.APP_NAME + "/" + exampleFullPath);
|
||||
} catch (error) {
|
||||
console.log("EXAMPLE LOAD FAILED:" + error);
|
||||
alert("Cannot find example: " + exampleFullPath);
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user