Skip to content

Commit 4319ca5

Browse files
sis0k0sis0k0
authored
refactor(animations): export declarations parser (NativeScript#4370)
1 parent 114b969 commit 4319ca5

File tree

3 files changed

+41
-35
lines changed

3 files changed

+41
-35
lines changed

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,42 +23,47 @@ export interface KeyframeDeclaration {
2323

2424
export interface KeyframeInfo {
2525
duration: number;
26-
curve: any;
2726
declarations: Array<KeyframeDeclaration>;
27+
curve?: any;
2828
}
2929

3030
/**
3131
* Defines animation options for the View.animate method.
3232
*/
3333
export class KeyframeAnimationInfo {
3434

35+
/**
36+
* Return animation keyframes.
37+
*/
38+
keyframes: Array<KeyframeInfo>;
39+
3540
/**
3641
* The animation name.
3742
*/
38-
name: string;
43+
name?: string;
3944

4045
/**
4146
* The length of the animation in milliseconds. The default duration is 300 milliseconds.
4247
*/
43-
duration: number;
48+
duration?: number;
4449

4550
/**
4651
* The amount of time, in milliseconds, to delay starting the animation.
4752
*/
48-
delay: number;
53+
delay?: number;
4954

5055
/**
5156
* Specifies how many times the animation should be played. Default is 1.
5257
* iOS animations support fractional iterations, i.e. 1.5.
5358
* To repeat an animation infinitely, use Number.POSITIVE_INFINITY
5459
*/
55-
iterations: number;
60+
iterations?: number;
5661

5762
/**
5863
* An optional animation curve. Possible values are contained in the [AnimationCurve enumeration](../modules/_ui_enums_.animationcurve.html).
5964
* Alternatively, you can pass an instance of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.
6065
*/
61-
curve: any;
66+
curve?: any;
6267

6368
/**
6469
* Determines whether the animation values will be applied on the animated object after the animation finishes.
@@ -68,12 +73,7 @@ export class KeyframeAnimationInfo {
6873
/**
6974
* If true the animation will be played backwards.
7075
*/
71-
isReverse: boolean;
72-
73-
/**
74-
* Return animation keyframes.
75-
*/
76-
keyframes: Array<KeyframeInfo>;
76+
isReverse?: boolean;
7777
}
7878

7979
export class KeyframeAnimation {

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

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import {
1010

1111
import { View, Color } from "../core/view";
1212

13+
import { AnimationCurve } from "../enums";
14+
1315
// Types.
1416
import { unsetValue } from "../core/properties";
1517
import { Animation } from "./animation";
@@ -37,19 +39,19 @@ export class KeyframeDeclaration implements KeyframeDeclarationDefinition {
3739

3840
export class KeyframeInfo implements KeyframeInfoDefinition {
3941
public duration: number;
40-
public curve: any;
4142
public declarations: Array<KeyframeDeclaration>;
43+
public curve?: any = AnimationCurve.ease;
4244
}
4345

4446
export class KeyframeAnimationInfo implements KeyframeAnimationInfoDefinition {
45-
public name: string = "";
46-
public duration: number = 0.3;
47-
public delay: number = 0;
48-
public iterations: number = 1;
49-
public curve: any = "ease";
50-
public isForwards: boolean = false;
51-
public isReverse: boolean = false;
5247
public keyframes: Array<KeyframeInfo>;
48+
public name?: string = "";
49+
public duration?: number = 0.3;
50+
public delay?: number = 0;
51+
public iterations?: number = 1;
52+
public curve?: any = "ease";
53+
public isForwards?: boolean = false;
54+
public isReverse?: boolean = false;
5355
}
5456

5557
interface Keyframe {
@@ -76,17 +78,19 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
7678
private _nativeAnimations: Array<Animation>;
7779
private _target: View;
7880

79-
public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo) {
81+
public static keyframeAnimationFromInfo(info: KeyframeAnimationInfo)
82+
: KeyframeAnimation {
83+
84+
const length = info.keyframes.length;
8085
let animations = new Array<Keyframe>();
81-
let length = info.keyframes.length;
8286
let startDuration = 0;
87+
8388
if (info.isReverse) {
8489
for (let index = length - 1; index >= 0; index--) {
8590
let keyframe = info.keyframes[index];
8691
startDuration = KeyframeAnimation.parseKeyframe(info, keyframe, animations, startDuration);
8792
}
88-
}
89-
else {
93+
} else {
9094
for (let index = 0; index < length; index++) {
9195
let keyframe = info.keyframes[index];
9296
startDuration = KeyframeAnimation.parseKeyframe(info, keyframe, animations, startDuration);
@@ -100,17 +104,15 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
100104
}
101105
}
102106
}
103-
for (let index = 1; index < length; index++) {
104-
let a = animations[index];
105-
if (a["curve"] === undefined) {
106-
a["curve"] = info.curve;
107-
}
108-
}
109-
let animation: KeyframeAnimation = new KeyframeAnimation();
107+
108+
animations.map(a => a["curve"] ? a : Object.assign(a, {curve: info.curve}));
109+
110+
const animation: KeyframeAnimation = new KeyframeAnimation();
110111
animation.delay = info.delay;
111112
animation.iterations = info.iterations;
112113
animation.animations = animations;
113114
animation._isForwards = info.isForwards;
115+
114116
return animation;
115117
}
116118

@@ -119,11 +121,11 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
119121
for (let declaration of keyframe.declarations) {
120122
animation[declaration.property] = declaration.value;
121123
}
124+
122125
let duration = keyframe.duration;
123126
if (duration === 0) {
124127
duration = 0.01;
125-
}
126-
else {
128+
} else {
127129
duration = (info.duration * duration) - startDuration;
128130
startDuration += duration;
129131
}
@@ -132,6 +134,7 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
132134
animation.forceLayer = true;
133135
animation.valueSource = "keyframe";
134136
animations.push(animation);
137+
135138
return startDuration;
136139
}
137140

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ const ANIMATION_PROPERTY_HANDLERS = Object.freeze({
2121
});
2222

2323
export class CssAnimationParser {
24-
public static keyframeAnimationsFromCSSDeclarations(declarations: { property: string, value: string }[]): Array<KeyframeAnimationInfo> {
24+
public static keyframeAnimationsFromCSSDeclarations(
25+
declarations: Array<KeyframeDeclaration>)
26+
: Array<KeyframeAnimationInfo> {
27+
2528
if (declarations === null || declarations === undefined) {
2629
return undefined;
2730
}
@@ -124,7 +127,7 @@ function keyframeAnimationsFromCSSProperty(value: any, animations: Array<Keyfram
124127
}
125128
}
126129

127-
function parseKeyframeDeclarations(unparsedKeyframeDeclarations: Array<KeyframeDeclaration>)
130+
export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: Array<KeyframeDeclaration>)
128131
: Array<KeyframeDeclaration> {
129132

130133
const declarations = unparsedKeyframeDeclarations

0 commit comments

Comments
 (0)