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

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>