From 4319ca5fc587581daf1e67574a9afa7ca8b33792 Mon Sep 17 00:00:00 2001 From: Stanimira Vlaeva Date: Wed, 14 Jun 2017 11:52:22 +0300 Subject: [PATCH] refactor(animations): export declarations parser (#4370) --- .../ui/animation/keyframe-animation.d.ts | 24 +++++----- .../ui/animation/keyframe-animation.ts | 45 ++++++++++--------- .../ui/styling/css-animation-parser.ts | 7 ++- 3 files changed, 41 insertions(+), 35 deletions(-) diff --git a/tns-core-modules/ui/animation/keyframe-animation.d.ts b/tns-core-modules/ui/animation/keyframe-animation.d.ts index 200b0b836..8682aab13 100644 --- a/tns-core-modules/ui/animation/keyframe-animation.d.ts +++ b/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; + curve?: any; } /** @@ -32,33 +32,38 @@ export interface KeyframeInfo { */ export class KeyframeAnimationInfo { + /** + * Return animation keyframes. + */ + keyframes: Array; + /** * 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; + isReverse?: boolean; } export class KeyframeAnimation { diff --git a/tns-core-modules/ui/animation/keyframe-animation.ts b/tns-core-modules/ui/animation/keyframe-animation.ts index e507be58a..578b7f220 100644 --- a/tns-core-modules/ui/animation/keyframe-animation.ts +++ b/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; + 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; + 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; private _target: View; - public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo) { + public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo) + : KeyframeAnimation { + + const length = info.keyframes.length; let animations = new Array(); - 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; } diff --git a/tns-core-modules/ui/styling/css-animation-parser.ts b/tns-core-modules/ui/styling/css-animation-parser.ts index bc5b67ccb..100e16942 100644 --- a/tns-core-modules/ui/styling/css-animation-parser.ts +++ b/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 { + public static keyframeAnimationsFromCSSDeclarations( + declarations: Array) + : Array { + if (declarations === null || declarations === undefined) { return undefined; } @@ -124,7 +127,7 @@ function keyframeAnimationsFromCSSProperty(value: any, animations: Array) +export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: Array) : Array { const declarations = unparsedKeyframeDeclarations