refactor: animation app (#5968)

e2e/animation/app/App_Resources/Android/app.gradle

@@ -8,7 +8,7 @@
 android {  
   defaultConfig {  
     generatedDensities = []
-    applicationId = "org.nativescript.modalnavigation"
+    applicationId = "org.nativescript.animation"
   }  
   aaptOptions {  
     additionalParameters "--no-version-vectors"  

e2e/animation/app/chaining-with-animation-set/page.ts

@@ -0,0 +1,54 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { Animation, AnimationDefinition } from "tns-core-modules/ui/animation";
+import { Label } from "tns-core-modules/ui/label";
+
+let view1: Label;
+let view2: Label;
+let view3: Label;
+let view4: Label;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view1 = page.getViewById<Label>("view1");
+    view2 = page.getViewById<Label>("view2");
+    view3 = page.getViewById<Label>("view3");
+    view4 = page.getViewById<Label>("view4");
+}
+
+export function onAnimateSequentially(args: EventData) {
+    animate(true);
+}
+
+export function onAnimateSimultaneously(args: EventData) {
+    animate(false);
+}
+
+export function onReset(args: EventData) {
+    view1.translateX = 0;
+    view1.translateY = 0;
+    view2.translateX = 0;
+    view2.translateY = 0;
+    view3.translateX = 0;
+    view3.translateY = 0;
+    view4.translateX = 0;
+    view4.translateY = 0;
+
+    view4.text = "{N4}";
+}
+
+function animate(playSequentially: boolean) {
+    const definitions = new Array<AnimationDefinition>();
+    definitions.push({ target: view1, translate: { x: 200, y: 0 }, duration: 500 });
+    definitions.push({ target: view2, translate: { x: 0, y: 200 }, duration: 500 });
+    definitions.push({ target: view3, translate: { x: -200, y: 0 }, duration: 500 });
+    definitions.push({ target: view4, translate: { x: 0, y: -200 }, duration: 500 });
+
+    const animationSet = new Animation(definitions, playSequentially);
+    animationSet.play().then(() => {
+        view4.text = "{{N4}}";
+        console.log("Animation finished");
+    })
+    .catch((e) => {
+        console.log(e.message);
+    });
+}

e2e/animation/app/chaining-with-animation-set/page.xml

@@ -0,0 +1,16 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <Page.actionBar>
+      <ActionBar title="Chaining with Animation set" />
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="Animate Sequentially" tap="onAnimateSequentially" />
+    <Button text="Animate Simultaneously" tap="onAnimateSimultaneously" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Label id="view1" text="{N1}" width="100" height="100" left="0" top="0" style.textAlignment="center" backgroundColor="Red" style.fontSize="30" />
+      <Label id="view2" text="{N2}" width="100" height="100" left="200" top="0" style.textAlignment="center" backgroundColor="Yellow" style.fontSize="30" />
+      <Label id="view3" text="{N3}" width="100" height="100" left="200" top="200" style.textAlignment="center" backgroundColor="Green" style.fontSize="30" />
+      <Label id="view4" text="{N4}" width="100" height="100" left="0" top="200" style.textAlignment="center" backgroundColor="Blue" style.fontSize="30" />
+    </AbsoluteLayout>
+  </StackLayout>
+</Page>

e2e/animation/app/home/home-page.ts

@@ -1,36 +1,15 @@
-import { EventData, NavigatedData } from "tns-core-modules/ui/page";
-import { AnimationDefinition, Animation } from "tns-core-modules/ui/animation";
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { Frame } from "tns-core-modules/ui/frame";
+import { Button } from "tns-core-modules/ui/button";
 
-let page;
-let label1;
-let label2;
+let currentFrame: Frame;
 
-export function onNavigatedTo(args: NavigatedData) {
-    page = args.object;
-    label1 = page.getViewById("Label1");
-    label2 = page.getViewById("Label2");
+export function onPageLoaded(args: EventData) {
+    currentFrame = (<Page>args.object).frame;
 }
 
-export function onPlaySequentially(args: EventData) {
-    const definitions = new Array<AnimationDefinition>();
-    definitions.push({ target: label1, translate: { x: 100, y: 0 }, duration: 500 });
-    definitions.push({ target: label1, opacity: 0.1, duration: 500 });
-
-    const animationSet = new Animation(definitions, true);
-    animationSet.play()
-    .then(() => {
-        label1.text = "Label1 animated sequentially!";
-    });
-}
-
-export function onPlaySimultaneously(args: EventData) {
-    const definitions = new Array<AnimationDefinition>();
-    definitions.push({ target: label2, translate: { x: 0, y: 100 }, duration: 500 });
-    definitions.push({ target: label2, opacity: 0.1, duration: 500 });
-
-    const animationSet = new Animation(definitions, true);
-    animationSet.play()
-    .then(() => {
-        label2.text = "Label2 animated simultaneously!";
-    });
+export function onButtonTap(args: EventData) {
+    const clickedButton = <Button>args.object;
+    const destination = "./" + clickedButton.text + "/page";
+    currentFrame.navigate(destination);
 }

e2e/animation/app/home/home-page.xml

@@ -1,16 +1,25 @@
-<Page class="page"
-    navigatedTo="onNavigatedTo"
-    xmlns="http://schemas.nativescript.org/tns.xsd">
-    
-    <ActionBar class="action-bar">
-        <Label class="action-bar-title" text="Home"></Label>
-    </ActionBar>
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onPageLoaded">
+
+    <ActionBar title="Animations" />
+
+    <ScrollView>
+        <StackLayout>
+            <Label text="Home" />
+            <!-- <Button text="opacity" tap="onButtonTap" />
+            <Button text="background-color" tap="onButtonTap" />
+            <Button text="translate" tap="onButtonTap" />
+            <Button text="scale" tap="onButtonTap" />
+            <Button text="rotate" tap="onButtonTap" />
+            <Button text="multiple-properties" tap="onButtonTap" />
+            <Button text="chaining-with-promises" tap="onButtonTap" /> -->
+            <Button text="chaining-with-animation-set" tap="onButtonTap" />
+            <!-- <Button text="multiple-views" tap="onButtonTap" />
+            <Button text="reusing" tap="onButtonTap" />
+            <Button text="slide-in-effect" tap="onButtonTap" />
+            <Button text="infinite" tap="onButtonTap" />
+            <Button text="animation-curves" tap="onButtonTap" />
+            <Button text="css-animations" tap="onButtonTap" /> -->
+        </StackLayout>
+    </ScrollView>
 
-    <StackLayout>
-        <Label text="Home loaded!" />
-        <Button text="Play Sequential Animation With Translate" tap="onPlaySequentially" />
-        <Button text="Play Simultaneous Animation With Translate" tap="onPlaySimultaneously" />
-        <Label id="Label1" text="Label1" backgroundColor="hotpink" horizontalAlignment="left" />
-        <Label id="Label2" text="Label2" backgroundColor="beige" horizontalAlignment="left" />
-    </StackLayout>
 </Page>

e2e/animation/e2e/animation.e2e-spec.ts

@@ -26,23 +26,32 @@ describe("animation:", () => {
         }
     });
 
-    it("should play sequentially", async () => {
+    it("should navigate to chaining with animation set example", async () => {
         await screen.loadedHome();
-
-        const button = await driver.findElementByText("Play Sequential Animation With Translate", SearchOptions.exact);
-        await button.click();
-
-        const label = await driver.findElementByText("Label1 animated sequentially!", SearchOptions.exact);
-        assert.isTrue(await label.isDisplayed()); 
+        await screen.loadedChainingWithAnimationSet();
     });
 
-    it("should play simultaneously", async () => {
-        await screen.loadedHome();
+    it("should play animation sequentially", async () => {    
+        const buttonAnimate = await driver.findElementByText("Animate Sequentially", SearchOptions.exact);
+        await buttonAnimate.click();
 
-        const button = await driver.findElementByText("Play Simultaneous Animation With Translate", SearchOptions.exact);
+        const label = await driver.findElementByText("{{N4}}", SearchOptions.exact);
+        assert.isTrue(await label.isDisplayed());
+    });
+
+    it ("should reset example", async() => {
+        const buttonReset = await driver.findElementByText("Reset", SearchOptions.exact);
+        await buttonReset.click();
+
+        const label = await driver.findElementByText("{N4}", SearchOptions.exact);
+        assert.isTrue(await label.isDisplayed());
+    });
+
+    it("should play animation simultaneously", async () => {
+        const button = await driver.findElementByText("Animate Simultaneously", SearchOptions.exact);
         await button.click();
 
-        const label = await driver.findElementByText("Label2 animated simultaneously!", SearchOptions.exact);
-        assert.isTrue(await label.isDisplayed()); 
+        const label = await driver.findElementByText("{{N4}}", SearchOptions.exact);
+        assert.isTrue(await label.isDisplayed());
     });
 });

e2e/animation/e2e/screen.ts

@@ -2,6 +2,8 @@ import { AppiumDriver } from "nativescript-dev-appium";
 import { assert } from "chai";
 
 const home = "Home"
+const chainingWithAnimationSet = "chaining-with-animation-set";
+const animateSequentially = "Animate Sequentially";
 
 export class Screen {
 
@@ -12,8 +14,20 @@ export class Screen {
     }
 
     loadedHome = async () => {
-        const lblHome = await this._driver.findElementByText(home);
-        assert.isTrue(await lblHome.isDisplayed());
+        const labelHome = await this._driver.findElementByText(home);
+        assert.isTrue(await labelHome.isDisplayed());
         console.log(home + " loaded!");
     }
+
+    loadedChainingWithAnimationSet = async () => {
+        const buttonChainingWithAnimationSet = await this._driver.findElementByText(chainingWithAnimationSet);
+        assert.isTrue(await buttonChainingWithAnimationSet.isDisplayed());
+
+        await buttonChainingWithAnimationSet.click();
+
+        const buttonAnimateSequentially = await this._driver.findElementByText(animateSequentially);
+        assert.isTrue(await buttonAnimateSequentially.isDisplayed());
+
+        console.log(chainingWithAnimationSet + " loaded!");
+    }
 }

e2e/animation/package.json

@@ -17,6 +17,10 @@
     "tns-core-modules": "next"
   },
   "devDependencies": {
+    "babel-traverse": "6.26.0",
+    "babel-types": "6.26.0",
+    "babylon": "6.18.0",
+    "lazy": "1.0.11",
     "nativescript-dev-appium": "next",
     "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "next"