Commit 11e14d2
committed
test(ui): add animation curves test page
- verify all built-in animation curve types work as expected.1 parent 9ca50fc commit 11e14d2
4 files changed
Lines changed: 40 additions & 1 deletion
File tree
- apps/app/ui-tests-app/animation
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,20 @@ | |||
| 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 | + | ||
| 5 | + export function easeAnimate(args) { | ||
| 6 | + const clicked = args.object as Button; | ||
| 7 | + const page: pages.Page = clicked.page; | ||
| 8 | + const target: any = view.getViewById(page, 'target'); | ||
| 9 | + const easeType: string = target.text = clicked.text; | ||
| 10 | + target.animate({ | ||
| 11 | + height: 256, | ||
| 12 | + duration: 500, | ||
| 13 | + curve: easeType | ||
| 14 | + }).then(() => target.animate({ | ||
| 15 | + delay: 200, | ||
| 16 | + height: 64, | ||
| 17 | + duration: 500, | ||
| 18 | + curve: easeType | ||
| 19 | + })); | ||
| 20 | + } | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,19 @@ | |||
| 1 | + <Page> | ||
| 2 | + <AbsoluteLayout> | ||
| 3 | + <GridLayout top="0" left="0" width="100%" rows="64, 64" columns="*,*,*"> | ||
| 4 | + <Button row="0" col="0" text="easeIn" tap="easeAnimate"/> | ||
| 5 | + <Button row="0" col="1" text="easeOut" tap="easeAnimate"/> | ||
| 6 | + <Button row="0" col="2" text="easeInOut" tap="easeAnimate"/> | ||
| 7 | + | ||
| 8 | + <Button row="1" col="0" text="spring" tap="easeAnimate"/> | ||
| 9 | + <Button row="1" col="1" text="linear" tap="easeAnimate"/> | ||
| 10 | + <Button row="1" col="2" text="ease" tap="easeAnimate"/> | ||
| 11 | + </GridLayout> | ||
| 12 | + | ||
| 13 | + <Label top="200" left="48" height="256" width="256" | ||
| 14 | + borderColor="purple" borderWidth="1"/> | ||
| 15 | + <Label top="200" left="48" height="64" width="256" fontSize="42" id="target" | ||
| 16 | + backgroundColor="purple" color="white" | ||
| 17 | + textAlignment="center" verticalAlignment="center" text="easeIn"/> | ||
| 18 | + </AbsoluteLayout> | ||
| 19 | + </Page> | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -15,4 +15,3 @@ export function animateHeight(args) { | |||
| 15 | 15 | }); | |
| 16 | 16 | toggle = !toggle; | |
| 17 | 17 | } | |
| 18 | - | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -11,6 +11,7 @@ export function pageLoaded(args: EventData) { | |||
| 11 | 11 | ||
| 12 | 12 | export function loadExamples() { | |
| 13 | 13 | const examples = new Map<string, string>(); | |
| 14 | + examples.set("animation-curves", "animation/animation-curves"); | ||
| 14 | 15 | examples.set("height-basic", "animation/height-basic"); | |
| 15 | 16 | examples.set("layout-stack-height", "animation/layout-stack-height"); | |
| 16 | 17 | examples.set("effect-summary-details", "animation/effect-summary-details"); | |
0 commit comments