refactor: migrate animation-demo repo content (#5970)

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

@@ -0,0 +1,63 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { AnimationCurve } from "tns-core-modules/ui/enums";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimateLinear(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.linear
+    });
+}
+
+export function onAnimateEaseIn(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.easeIn
+    });
+}
+
+export function onAnimateEaseOut(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.easeOut
+    });
+}
+
+export function onAnimateEaseInEaseOut(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.easeInOut
+    });
+}
+
+export function onAnimateSpring(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.spring
+    });
+}
+
+export function onAnimateCustom(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
+    });
+}
+
+export function onReset(args: EventData) {
+    view.translateX = 0;
+    view.translateY = 0;
+}

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

@@ -0,0 +1,20 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Animation Curves" />
+
+  <ScrollView>
+    <StackLayout>
+      <Button text="Linear" tap="onAnimateLinear" />
+      <Button text="EaseIn" tap="onAnimateEaseIn" />
+      <Button text="EaseOut" tap="onAnimateEaseOut" />
+      <Button text="EaseInEaseOut" tap="onAnimateEaseInEaseOut" />
+      <Button text="Spring" tap="onAnimateSpring" />
+      <Button text="Custom" tap="onAnimateCustom" />
+      <Button text="Reset" tap="onReset" />
+      <AbsoluteLayout width="300" height="200" clipToBounds="true" backgroundColor="LightGray">
+        <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="0" />
+      </AbsoluteLayout>
+    </StackLayout>
+  </ScrollView>
+
+</Page>

e2e/animation/app/background-color/page.ts

@@ -0,0 +1,21 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Color } from "tns-core-modules/color";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        backgroundColor: new Color("#3D5AFE"),
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.backgroundColor = new Color("White");
+}

e2e/animation/app/background-color/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Background Color" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Label id="view" text="{N}" width="100" height="100" left="100" top="100" style.textAlignment="center" backgroundColor="White" style.fontSize="30" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

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

@@ -0,0 +1,34 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+  view.animate({ opacity: 0 })
+      .then(() => view.animate({ opacity: 1 }))
+      .then(() => view.animate({ translate: { x: 100, y: 100 } }))
+      .then(() => view.animate({ translate: { x: 0, y: 0 } }))
+      .then(() => view.animate({ scale: { x: 3, y: 3 } }))
+      .then(() => view.animate({ scale: { x: 1, y: 1 } }))
+      .then(() => view.animate({ rotate: 180 } ))
+      .then(() => view.animate({ rotate: 0 } ))
+      .then(() => {
+      console.log("Animation finished");
+    })
+    .catch((e) => {
+      console.log(e.message);
+    });
+}
+
+export function onReset(args: EventData) {
+    view.translateX = 0;
+    view.translateY = 0;
+    view.scaleX = 1;
+    view.scaleY = 1;
+    view.rotate = 0;
+}

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

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Chaining with Promises" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/css-animations/animate-css/page.css

@@ -0,0 +1,6 @@
+@import '~/css-animations/animate-css/animate.css';
+
+.myRubberBand {
+    animation-name: rubberBand;
+    animation-duration: 1.2s;
+}

e2e/animation/app/css-animations/animate-css/page.ts

@@ -0,0 +1,14 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "";
+    view.className = "myRubberBand";
+}

e2e/animation/app/css-animations/animate-css/page.xml

@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Use Animate.css animation" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+       <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/css-animations/background-color/page.css

@@ -0,0 +1,14 @@
+.button {
+    background-color: green;
+}
+
+.button_selected {
+    animation-name: button_selected;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes button_selected {
+    from { background-color: yellow; }
+    to { background-color: red; }
+}

e2e/animation/app/css-animations/background-color/page.ts

@@ -0,0 +1,18 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onTap(args: EventData) {
+    if (view.className === "button") {
+        view.className = "button_selected";
+    }
+    else {
+        view.className = "button";
+    }
+}

e2e/animation/app/css-animations/background-color/page.xml

@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Background Color" />
+
+  <Button id="view" width="100" class="button" height="100" horisontal-alignment="center" vertical-alignment="center" text="Touch me" tap="onTap" />
+</Page>

e2e/animation/app/css-animations/bounce/page.css

@@ -0,0 +1,23 @@
+.bounce {
+    animation-duration: 1s;
+    animation-name: bounce;
+}
+
+@keyframes bounce {
+    from, 20%, 53%, 80%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        transform: translate3d(0,0,0);
+    }
+    40%, 43% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -30px, 0);
+    }
+    70% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -15px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0,-4px,0);
+        transform: translate3d(0,-4px,0);
+    }
+}

e2e/animation/app/css-animations/bounce/page.ts

@@ -0,0 +1,14 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "";
+    view.className = "bounce";
+}

e2e/animation/app/css-animations/bounce/page.xml

@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+ 
+  <ActionBar title="Bounce" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/css-animations/from-code/page.css

@@ -0,0 +1,18 @@
+@keyframes bounce {
+    from, 20%, 53%, 80%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        transform: translate3d(0,0,0);
+    }
+    40%, 43% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -30px, 0);
+    }
+    70% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -15px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0,-4px,0);
+        transform: translate3d(0,-4px,0);
+    }
+}

e2e/animation/app/css-animations/from-code/page.ts

@@ -0,0 +1,20 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { KeyframeAnimation, KeyframeAnimationInfo } from "tns-core-modules/ui/animation/keyframe-animation";
+
+let view: View;
+let animationInfo: KeyframeAnimationInfo;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+    animationInfo = page.getKeyframeAnimationWithName("bounce");
+    animationInfo.duration = 2000;
+}
+
+export function onAnimate(args: EventData) {
+    let animation = KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
+    animation.play(view).then(() => {
+        console.log("Played with code!");
+    });
+}

e2e/animation/app/css-animations/from-code/page.xml

@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="from code" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+  
+</Page>

e2e/animation/app/css-animations/initial-animation/page.css

@@ -0,0 +1,26 @@
+@keyframes entry {
+    0% {
+        transform: translate(-200, 0);
+        opacity: 0;
+    }
+    30% {
+        transform: translate(-200, 0);
+        opacity: 0;
+    }
+    70% {
+        transform: translate(200, 0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(200, 0);
+        opacity: 1;
+    }
+}
+
+.entry {
+    animation-name: entry;
+    animation-duration: 3;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+}

e2e/animation/app/css-animations/initial-animation/page.xml

@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Initial Animation" />
+
+  <GridLayout>
+    <GridLayout class="entry" backgroundColor="red" width="200" height="200">
+    </GridLayout>
+  </GridLayout>
+
+</Page>

e2e/animation/app/css-animations/opacity/page.css

@@ -0,0 +1,14 @@
+.opaque {
+    opacity: 1;
+}
+
+.transparent {
+    animation-name: transparent;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes transparent {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}

e2e/animation/app/css-animations/opacity/page.ts

@@ -0,0 +1,17 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "transparent";
+}
+
+export function onReset(args: EventData) {
+    view.className = "opaque";
+}

e2e/animation/app/css-animations/opacity/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Opacity" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/css-animations/page.ts

@@ -0,0 +1,15 @@
+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 currentFrame: Frame;
+
+export function pageLoaded(args: EventData) {
+    currentFrame = (<Page>args.object).frame;
+}
+
+export function onButtonTap(args: EventData) {
+    const clickedButton = <Button>args.object;
+    const destination = "./css-animations/" + clickedButton.text + "/page";
+    currentFrame.navigate(destination);
+}

e2e/animation/app/css-animations/page.xml

@@ -0,0 +1,18 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <Page.actionBar>
+      <ActionBar title="CSS Animations"/>
+  </Page.actionBar>
+  <ScrollView>
+    <StackLayout>
+      <Button text="background-color" tap="onButtonTap"/>
+      <Button text="opacity" tap="onButtonTap"/>
+      <Button text="transform" tap="onButtonTap"/>
+      <Button text="bounce" tap="onButtonTap"/>
+      <Button text="animate-css" tap="onButtonTap"/>
+      <Button text="from-code" tap="onButtonTap"/>
+      <Button text="settings" tap="onButtonTap"/>
+      <Button text="visual-states" tap="onButtonTap"/>
+      <Button text="initial-animation" tap="onButtonTap"/>
+    </StackLayout>
+  </ScrollView>
+</Page>

e2e/animation/app/css-animations/settings/page.css

@@ -0,0 +1,12 @@
+@keyframes transformed {
+    from {
+        transform: none;
+    }
+    to {
+        transform: translate(150, 0) scale(1.5, 1.5) rotate(45);
+    }
+}
+
+Label {
+    font-size: 8;
+}

e2e/animation/app/css-animations/settings/page.ts

@@ -0,0 +1,94 @@
+import { Observable } from "tns-core-modules/data/observable";
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    page.bindingContext = new SettingsViewModel();
+}
+
+export class SettingsViewModel extends Observable {
+
+    private _duration: number = 1;
+    private _delay: number = 0;
+    private _iterations: number = 1;
+    private _selectedDirectionIndex: number = 0;
+    private _selectedFillIndex: number = 0;
+
+    constructor() {
+        super();
+    }
+
+    get iterations() {
+        return this._iterations;
+    }
+
+    set iterations(value: number) {
+        if (value !== this._iterations) {
+            this._iterations = this.roundSliderValue(value);
+        }
+    }
+
+    get delay() {
+        return this._delay;
+    }
+
+    set delay(value: number) {
+        if (value !== this._delay) {
+            this._delay = this.roundSliderValue(value);
+        }
+    }
+
+    get duration() {
+        return this._duration;
+    }
+
+    set duration(value: number) {
+        if (this._duration !== value) {
+            this._duration = this.roundSliderValue(value);
+        }
+    }
+
+    get selectedDirectionIndex() {
+        return this._selectedDirectionIndex;
+    }
+
+    set selectedDirectionIndex(value: number) {
+        if (value !== this._selectedDirectionIndex) {
+            this._selectedDirectionIndex = value;
+        }
+    }
+
+    get selectedFillIndex() {
+        return this._selectedFillIndex;
+    }
+
+    set selectedFillIndex(value: number) {
+        if (value !== this._selectedDirectionIndex) {
+            this._selectedFillIndex = value;
+        }
+    }
+
+    public onAnimate(args: EventData) {
+        const button = <Button>args.object;
+
+        let css = `
+        Label {
+            font-size: 8;
+        }
+        #img {
+            animation-name: transformed;
+            animation-duration: ${this.duration};
+            animation-delay: ${this.delay};
+            animation-iteration-count: ${this.iterations};
+            animation-direction:${this.selectedDirectionIndex === 1 ? "reverse" : "normal"};
+            animation-fill-mode: ${this.selectedFillIndex === 1 ? "forwards" : "none"};
+        }`;
+
+        button.page.css = css;
+    }
+
+    private roundSliderValue(value: number) {
+        return Math.round(value);
+    }
+}

e2e/animation/app/css-animations/settings/page.xml

@@ -0,0 +1,48 @@
+<Page 
+	xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+	<ActionBar title="Settings" />
+
+	<ScrollView>
+		<StackLayout style="margin: 15;">
+			<Label text="Duration (in seconds):" />
+			<GridLayout columns="*,auto">
+				<Slider col="0" minValue="0" maxValue="10" value="{{ duration }}" />
+				<Label col="1" text="{{ duration }}" />
+			</GridLayout>
+			<Label text="Delay (in seconds):" />
+			<GridLayout columns="*,auto">
+				<Slider minValue="0" maxValue="10" value="{{ delay }}" />
+				<Label col="1" text="{{ delay }}" />
+			</GridLayout>
+			<Label text="Iterations count:" />
+			<GridLayout columns="*,auto">
+				<Slider minValue="0" maxValue="10" value="{{ iterations }}" />
+				<Label col="1" text="{{ iterations }}" />
+			</GridLayout>
+			<GridLayout rows="auto,auto">
+				<Label text="Direction:"/>
+				<SegmentedBar row="1" id="direction" style="margin: 5" selectedIndex="{{ selectedDirectionIndex }}">
+					<SegmentedBar.items>
+						<SegmentedBarItem title="Normal" />
+						<SegmentedBarItem title="Reverse" />
+					</SegmentedBar.items>
+				</SegmentedBar>
+			</GridLayout>
+			<GridLayout rows="auto,auto">
+				<Label text="Fill mode:" />
+				<SegmentedBar row="1" id="fill" style="margin: 5" selectedIndex="{{ selectedFillIndex }}">
+					<SegmentedBar.items>
+						<SegmentedBarItem title="None" />
+						<SegmentedBarItem title="Forwards" />
+					</SegmentedBar.items>
+				</SegmentedBar>
+			</GridLayout>
+			<Button text="Animate" tap="{{ onAnimate }}" height="40"/>
+			<AbsoluteLayout height="100" clipToBounds="true" backgroundColor="LightGray" margin="5">
+				<Image id="img" src="~/res/icon_100x100.png" width="50" height="50" left="0" top="25" />
+			</AbsoluteLayout>
+		</StackLayout>
+	</ScrollView>
+
+</Page>

e2e/animation/app/css-animations/transform/page.css

@@ -0,0 +1,17 @@
+.original {
+    transform: none;
+}
+
+.transformed {
+    animation-name: transformed;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes transformed {
+    from { transform: none; }
+    30%  { transform: translate(100, 100); }
+    55%  { transform: translate(0, 0) scale(3, 3); }
+    75%  { transform: scale(1, 1) rotate(180); }
+    to  { transform: rotate(0); }
+}

e2e/animation/app/css-animations/transform/page.ts

@@ -0,0 +1,14 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "original";
+    view.className = "transformed";
+}

e2e/animation/app/css-animations/transform/page.xml

@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <Page.actionBar>
+      <ActionBar title="Transform"/>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate"/>
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100"/>
+    </AbsoluteLayout>
+  </StackLayout>
+</Page>

e2e/animation/app/css-animations/visual-states/page.css

@@ -0,0 +1,14 @@
+.button {
+    background-color: green;
+}
+
+.button:highlighted {
+    animation-name: highlight;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes highlight {
+    from { background-color: yellow; }
+    to { background-color: red; }
+}

e2e/animation/app/css-animations/visual-states/page.xml

@@ -0,0 +1,7 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+  <ActionBar title="Visual States"/>
+
+  <Button class="button" width="100" height="100" horisontal-alignment="center" vertical-alignment="center" text="Touch me" />
+
+</Page>

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

@@ -4,7 +4,7 @@ import { Button } from "tns-core-modules/ui/button";
 
 let currentFrame: Frame;
 
-export function onPageLoaded(args: EventData) {
+export function pageLoaded(args: EventData) {
     currentFrame = (<Page>args.object).frame;
 }
 

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

@@ -1,24 +1,24 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onPageLoaded">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
 
     <ActionBar title="Animations" />
 
     <ScrollView>
         <StackLayout>
             <Label text="Home" />
-            <!-- <Button text="opacity" tap="onButtonTap" />
+            <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-promises" tap="onButtonTap" />
             <Button text="chaining-with-animation-set" tap="onButtonTap" />
-            <!-- <Button text="multiple-views" 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" /> -->
+            <Button text="css-animations" tap="onButtonTap" /> 
         </StackLayout>
     </ScrollView>
 

e2e/animation/app/infinite/page.ts

@@ -0,0 +1,28 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Animation } from "tns-core-modules/ui/animation";
+
+let view: View;
+let animationSet: Animation;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    animationSet = new Animation([{
+        target: view,
+        rotate: 360,
+        duration: 3000,
+        iterations: Number.POSITIVE_INFINITY
+    }]);
+    animationSet.play().catch((e) => {
+        console.log("Animation stopped!");
+    });
+}
+
+export function onReset(args: EventData) {
+    animationSet.cancel();
+    view.rotate = 0;
+}

e2e/animation/app/infinite/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Infinite" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/multiple-properties/page.ts

@@ -0,0 +1,28 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Color } from "tns-core-modules/color";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        backgroundColor: new Color("#3D5AFE"),
+        opacity: 0.5,
+        translate: {x: 100, y: 100},
+        rotate: 180,
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.backgroundColor = new Color("White");
+    view.opacity = 1;
+    view.translateX = 0;
+    view.translateY = 0;
+    view.rotate = 0;
+}

e2e/animation/app/multiple-properties/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Multiple Properties" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Label id="view" text="{N}" width="100" height="100" left="100" top="100" style.textAlignment="center" backgroundColor="White" style.fontSize="30" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/multiple-views/page.ts

@@ -0,0 +1,62 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Animation, AnimationDefinition } from "tns-core-modules/ui/animation";
+
+let view1: View;
+let view2: View;
+let view3: View;
+let view4: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view1 = page.getViewById<View>("view1");
+    view2 = page.getViewById<View>("view2");
+    view3 = page.getViewById<View>("view3");
+    view4 = page.getViewById<View>("view4");
+}
+
+export function onAnimate(args: EventData) {
+    const definitions = new Array<AnimationDefinition>();
+    definitions.push({
+        target: view1,
+        translate: { x: 200, y: 0 },
+        duration: 3000
+    });
+
+    definitions.push({
+        target: view2,
+        translate: { x: 0, y: 200 },
+        duration: 3000
+    });
+
+    definitions.push({
+        target: view3,
+        translate: { x: -200, y: 0 },
+        duration: 3000
+    });
+
+    definitions.push({
+        target: view4,
+        translate: { x: 0, y: -200 },
+        duration: 3000
+    });
+
+    const animationSet = new Animation(definitions);
+    animationSet.play().then(() => {
+        console.log("Animation finished");
+    })
+    .catch((e) => {
+        console.log(e.message);
+    });
+}
+
+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;
+}

e2e/animation/app/multiple-views/page.xml

@@ -0,0 +1,16 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Multiple Views" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Label id="view1" text="{N}" width="100" height="100" left="0" top="0" style.textAlignment="center" backgroundColor="Red" style.fontSize="30" />
+      <Label id="view2" text="{N}" width="100" height="100" left="200" top="0" style.textAlignment="center" backgroundColor="Yellow" style.fontSize="30" />
+      <Label id="view3" text="{N}" width="100" height="100" left="200" top="200" style.textAlignment="center" backgroundColor="Green" style.fontSize="30" />
+      <Label id="view4" text="{N}" width="100" height="100" left="0" top="200" style.textAlignment="center" backgroundColor="Blue" style.fontSize="30" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/opacity/page.ts

@@ -0,0 +1,20 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        opacity: 0,
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.opacity = 1.0;
+}

e2e/animation/app/opacity/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Opacity"/>
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/reusing/page.ts

@@ -0,0 +1,31 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    const animation1 = view.createAnimation({ opacity: 0 });
+    const animation2 = view.createAnimation({ opacity: 1 });
+
+    animation1.play()
+        .then(() => animation2.play())
+        .then(() => animation1.play())
+        .then(() => animation2.play())
+        .then(() => animation1.play())
+        .then(() => animation2.play())
+        .then(() => {
+            console.log("Animation finished");
+        })
+        .catch((e) => {
+            console.log(e.message);
+        });
+}
+
+export function onReset(args: EventData) {
+    view.opacity = 1;
+}

e2e/animation/app/reusing/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Reusing" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset"/>
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+  
+</Page>

e2e/animation/app/rotate/page.css

@@ -0,0 +1,3 @@
+.img {
+    color: red;
+}

e2e/animation/app/rotate/page.ts

@@ -0,0 +1,20 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        rotate: 360,
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.rotate = 0;
+}

e2e/animation/app/rotate/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Rotate" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/scale/page.ts

@@ -0,0 +1,21 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        scale: { x: 2, y: 2},
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.scaleX = 1;
+    view.scaleY = 1;
+}

e2e/animation/app/scale/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Scale" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>

e2e/animation/app/slide-in-effect/page.ts

@@ -0,0 +1,32 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Layout } from "tns-core-modules/ui/layouts/layout";
+import { Image } from "tns-core-modules/ui/image";
+
+let wrapLayout: Layout;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    wrapLayout = page.getViewById<Layout>("wrapLayout");
+}
+
+export function onAddItem(args: EventData) {
+    var item = new Image();
+    item.src = "~/res/icon_100x100.png";
+    item.width = 90;
+    item.height = 90;
+    item.style.margin = "5,5,5,5";
+    item.translateX = -300;
+    item.opacity = 0;
+    item.on("loaded", (args: EventData) => {
+        (<View>args.object).animate({translate: { x: 0, y: 0 }, opacity: 1});
+    });
+    wrapLayout.addChild(item);
+}
+
+export function onClear(args: EventData) {
+    var i = wrapLayout.getChildrenCount() - 1;
+    while (i >= 0) {
+        wrapLayout.removeChild(wrapLayout.getChildAt(i--));
+    }
+}

e2e/animation/app/slide-in-effect/page.xml

@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Slide in Effect" />
+
+  <StackLayout>
+    <Button text="Add Item" tap="onAddItem" />
+    <Button text="Clear" tap="onClear" />
+    <WrapLayout id="wrapLayout" width="305" height="305" clipToBounds="true" backgroundColor="LightGray" padding="5,0,5,5" />
+  </StackLayout>
+
+</Page>

e2e/animation/app/translate/page.ts

@@ -0,0 +1,21 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        translate: { x: 100, y: 100},
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.translateX = 0;
+    view.translateY = 0;
+}

e2e/animation/app/translate/page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Translate" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>