Animation properties and some backward compatability with the QSF

apps/app/gallery-app/animations/css-keyframes.css

@@ -0,0 +1,58 @@
+@keyframes intro {
+    0% {
+        opacity: 0;
+        transform: translate(-100, 0);
+    }
+    100% {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}
+@keyframes outro {
+    0% {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(-100, 0);
+    }
+}
+
+.intro {
+    animation-name: intro;
+    animation-duration: 3.0;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+.outro {
+    animation-name: outro;
+    animation-duration: 3.0;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.gone {
+    opacity: 0;
+    transform: translate(-100, 0);
+}
+
+@keyframes play {
+    0% { transform: translate(0, 0); }
+    33% { transform: translate(100, 0); }
+    66% { transform: translate(100, 100); }
+    100% { transform: translate(0, 100); }
+}
+
+.idle {
+    transform: translate(0, 0);
+}
+.play {
+    animation-name: play;
+    animation-duration: 3.0;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+}

apps/app/gallery-app/animations/css-keyframes.ts

@@ -0,0 +1,13 @@
+import { View, EventData } from "ui/core/view";
+
+export function setClass(args: EventData) {
+    const btn = (<View & { tag: any }>args.object);
+    const img = btn.page.getViewById<View>("img");
+    img.className = btn.tag;
+}
+
+export function setImg2Class(args: EventData) {
+    const btn = (<View & { tag: any }>args.object);
+    const img2 = btn.page.getViewById<View>("img2");
+    img2.className = btn.tag;
+}

apps/app/gallery-app/animations/css-keyframes.xml

@@ -0,0 +1,18 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
+  <StackLayout orientation="vertical">
+    <Button text="class: gone" tag="gone" tap="setClass" />
+    <Button text="class: intro" tag="intro" tap="setClass" />
+    <Button text="class: outro" tag="outro" tap="setClass" />
+    <Button text="clear class" tag="none" tap="setClass" />
+
+    <GridLayout horizontalAlignment="center" verticalAlignment="middle" backgroundColor="blue" width="150" height="50">
+      <GridLayout id="img" class="gone" backgroundColor="green" width="50" height="50" horizontalAlignment="right" />
+    </GridLayout>
+
+    <Button text="class: idle" tag="idle" tap="setImg2Class" />
+    <Button text="class: play" tag="play" tap="setImg2Class" />
+    <GridLayout horizontalAlignment="center" verticalAlignment="middle" backgroundColor="gray" width="150" height="150">
+      <GridLayout id="img2" class="idle" backgroundColor="green" width="50" height="50" horizontalAlignment="left" verticalAlignment="top" />
+    </GridLayout>
+  </StackLayout>
+</Page>

apps/app/gallery-app/animations/js-configurable.ts

@@ -4,12 +4,47 @@ import * as buttonModule from "ui/button";
 import * as abs from "ui/layouts/absolute-layout";
 import * as animationModule from "ui/animation";
 import * as colorModule from "color";
-import * as model from "./model";
 import * as enums from "ui/enums";
 import * as frame from "ui/frame";
 import * as trace from "trace";
 
-var vm = new model.ViewModel();
+export class ViewModel extends observable.Observable {
+    constructor() {
+        super();
+
+        this._duration = 3000;
+        this._iterations = 1;
+    }
+
+    private _playSequentially: boolean;
+    get playSequentially(): boolean {
+        return this._playSequentially;
+    }
+    set playSequentially(value: boolean) {
+        this._playSequentially = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "playSequentially", value: value });
+    }
+
+    private _duration: number;
+    get duration(): number {
+        return this._duration;
+    }
+    set duration(value: number) {
+        this._duration = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "duration", value: value });
+    }
+
+    private _iterations: number;
+    get iterations(): number {
+        return this._iterations;
+    }
+    set iterations(value: number) {
+        this._iterations = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "iterations", value: value });
+    }
+}
+
+var vm = new ViewModel();
 
 var page: pages.Page;
 var panel: abs.AbsoluteLayout;
@@ -27,8 +62,8 @@ export function pageLoaded(args: observable.EventData) {
     button2 = page.getViewById<buttonModule.Button>("button2");
     button3 = page.getViewById<buttonModule.Button>("button3");
 
-    trace.enable();
-    trace.addCategories(trace.categories.concat(trace.categories.Animation));
+    // trace.enable();
+    // trace.addCategories(trace.categories.concat(trace.categories.Animation));
 }
 
 export function onSlideOut(args: observable.EventData) {

apps/app/gallery-app/animations/js-configurable.xml

@@ -18,7 +18,6 @@
         <Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
         <Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
         <Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
-        <Button text="Opacity" tap="onOpacity" width="70" marginLeft="5" marginRight="5" />
       </StackLayout>
       
       <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>

apps/app/gallery-app/animations/model.ts

@@ -1,37 +0,0 @@
-import observable = require("data/observable");
-
-export class ViewModel extends observable.Observable {
-    constructor() {
-        super();
-
-        this._duration = 3000;
-        this._iterations = 1;
-    }
-
-    private _playSequentially: boolean;
-    get playSequentially(): boolean {
-        return this._playSequentially;
-    }
-    set playSequentially(value: boolean) {
-        this._playSequentially = value;
-        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "playSequentially", value: value });
-    }
-
-    private _duration: number;
-    get duration(): number {
-        return this._duration;
-    }
-    set duration(value: number) {
-        this._duration = value;
-        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "duration", value: value });
-    }
-
-    private _iterations: number;
-    get iterations(): number {
-        return this._iterations;
-    }
-    set iterations(value: number) {
-        this._iterations = value;
-        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "iterations", value: value });
-    }
-}

apps/app/gallery-app/main-page.xml

@@ -43,8 +43,9 @@
 
       <Label class="title" text="Animations" />
       <StackLayout>
-        <Button tag="animations/configurable" text="configurable" tap="itemTap" />
-        <Button tag="animations/opacity" text="opacity" tap="itemTap" />
+        <Button tag="animations/js-configurable" text="js-configurable" tap="itemTap" />
+        <Button tag="animations/js-opacity" text="js-opacity" tap="itemTap" />
+        <Button tag="animations/css-keyframes" text="css-keyframes" tap="itemTap" />
       </StackLayout>
     </StackLayout>
   </ScrollView>