refactor(animations): export declarations parser (#4370)

tns-core-modules/ui/animation/keyframe-animation.d.ts

@@ -23,8 +23,8 @@ export interface KeyframeDeclaration {
 
 export interface KeyframeInfo {
     duration: number;
-    curve: any;
     declarations: Array<KeyframeDeclaration>;
+    curve?: any;
 }
 
 /**
@@ -32,33 +32,38 @@ export interface KeyframeInfo {
  */
 export class KeyframeAnimationInfo {
 
+    /**
+     * Return animation keyframes.
+     */
+    keyframes: Array<KeyframeInfo>;
+
     /**
      * The animation name.
      */
-    name: string;
+    name?: string;
 
     /**
      * The length of the animation in milliseconds. The default duration is 300 milliseconds.
      */
-    duration: number;
+    duration?: number;
 
     /**
      * The amount of time, in milliseconds, to delay starting the animation.
      */
-    delay: number;
+    delay?: number;
 
     /**
      * Specifies how many times the animation should be played. Default is 1.
      * iOS animations support fractional iterations, i.e. 1.5.
      * To repeat an animation infinitely, use Number.POSITIVE_INFINITY
      */
-    iterations: number;
+    iterations?: number;
 
     /**
      * An optional animation curve. Possible values are contained in the [AnimationCurve enumeration](../modules/_ui_enums_.animationcurve.html).
      * Alternatively, you can pass an instance of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.
      */
-    curve: any;
+    curve?: any;
 
     /**
      * Determines whether the animation values will be applied on the animated object after the animation finishes.
@@ -68,12 +73,7 @@ export class KeyframeAnimationInfo {
     /**
      * If true the animation will be played backwards.
      */
-    isReverse: boolean;
-
-    /**
-     * Return animation keyframes.
-     */
-    keyframes: Array<KeyframeInfo>;
+    isReverse?: boolean;
 }
 
 export class KeyframeAnimation {

tns-core-modules/ui/animation/keyframe-animation.ts

@@ -10,6 +10,8 @@ import {
 
 import { View, Color } from "../core/view";
 
+import { AnimationCurve } from "../enums";
+
 // Types.
 import { unsetValue } from "../core/properties";
 import { Animation } from "./animation";
@@ -37,19 +39,19 @@ export class KeyframeDeclaration implements KeyframeDeclarationDefinition {
 
 export class KeyframeInfo implements KeyframeInfoDefinition {
     public duration: number;
-    public curve: any;
     public declarations: Array<KeyframeDeclaration>;
+    public curve?: any = AnimationCurve.ease;
 }
 
 export class KeyframeAnimationInfo implements KeyframeAnimationInfoDefinition {
-    public name: string = "";
-    public duration: number = 0.3;
-    public delay: number = 0;
-    public iterations: number = 1;
-    public curve: any = "ease";
-    public isForwards: boolean = false;
-    public isReverse: boolean = false;
     public keyframes: Array<KeyframeInfo>;
+    public name?: string = "";
+    public duration?: number = 0.3;
+    public delay?: number = 0;
+    public iterations?: number = 1;
+    public curve?: any = "ease";
+    public isForwards?: boolean = false;
+    public isReverse?: boolean = false;
 }
 
 interface Keyframe {
@@ -76,17 +78,19 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
     private _nativeAnimations: Array<Animation>;
     private _target: View;
 
-    public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo) {
+    public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo)
+        : KeyframeAnimation {
+
+        const length = info.keyframes.length;
         let animations = new Array<Keyframe>();
-        let length = info.keyframes.length;
         let startDuration = 0;
+
         if (info.isReverse) {
             for (let index = length - 1; index >= 0; index--) {
                 let keyframe = info.keyframes[index];
                 startDuration = KeyframeAnimation.parseKeyframe(info, keyframe, animations, startDuration);
             }
-        }
-        else {
+        } else {
             for (let index = 0; index < length; index++) {
                 let keyframe = info.keyframes[index];
                 startDuration = KeyframeAnimation.parseKeyframe(info, keyframe, animations, startDuration);
@@ -100,17 +104,15 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
                 }
             }
         }
-        for (let index = 1; index < length; index++) {
-            let a = animations[index];
-            if (a["curve"] === undefined) {
-                a["curve"] = info.curve;
-            }
-        }
-        let animation: KeyframeAnimation = new KeyframeAnimation();
+
+        animations.map(a => a["curve"] ? a : Object.assign(a, {curve: info.curve}));
+
+        const animation: KeyframeAnimation = new KeyframeAnimation();
         animation.delay = info.delay;
         animation.iterations = info.iterations;
         animation.animations = animations;
         animation._isForwards = info.isForwards;
+
         return animation;
     }
 
@@ -119,11 +121,11 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
         for (let declaration of keyframe.declarations) {
             animation[declaration.property] = declaration.value;
         }
+
         let duration = keyframe.duration;
         if (duration === 0) {
             duration = 0.01;
-        }
-        else {
+        } else {
             duration = (info.duration * duration) - startDuration;
             startDuration += duration;
         }
@@ -132,6 +134,7 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
         animation.forceLayer = true;
         animation.valueSource = "keyframe";
         animations.push(animation);
+
         return startDuration;
     }
 

tns-core-modules/ui/styling/css-animation-parser.ts

@@ -21,7 +21,10 @@ const ANIMATION_PROPERTY_HANDLERS = Object.freeze({
 });
 
 export class CssAnimationParser {
-    public static keyframeAnimationsFromCSSDeclarations(declarations: { property: string, value: string }[]): Array<KeyframeAnimationInfo> {
+    public static keyframeAnimationsFromCSSDeclarations(
+        declarations: Array<KeyframeDeclaration>)
+        : Array<KeyframeAnimationInfo> {
+
         if (declarations === null || declarations === undefined) {
             return undefined;
         }
@@ -124,7 +127,7 @@ function keyframeAnimationsFromCSSProperty(value: any, animations: Array<Keyfram
     }
 }
 
-function parseKeyframeDeclarations(unparsedKeyframeDeclarations: Array<KeyframeDeclaration>)
+export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: Array<KeyframeDeclaration>)
     : Array<KeyframeDeclaration> {
 
     const declarations = unparsedKeyframeDeclarations