forked from NativeScript/NativeScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathanimation-common.ts
More file actions
200 lines (171 loc) · 6.52 KB
/
animation-common.ts
File metadata and controls
200 lines (171 loc) · 6.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
import definition = require("ui/animation");
import viewModule = require("ui/core/view");
import * as traceModule from "trace";
var trace: typeof traceModule;
function ensureTrace() {
if (!trace) {
trace = require("trace");
}
}
export module Properties {
export var opacity = "opacity";
export var backgroundColor = "backgroundColor";
export var translate = "translate";
export var rotate = "rotate";
export var scale = "scale";
}
export interface PropertyAnimation {
target: viewModule.View;
property: string;
value: any;
duration?: number;
delay?: number;
iterations?: number;
curve?: any;
}
export class CubicBezierAnimationCurve implements definition.CubicBezierAnimationCurve {
public x1: number;
public y1: number;
public x2: number;
public y2: number;
constructor(x1: number, y1: number, x2: number, y2: number) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
}
}
export class Animation implements definition.Animation {
public _propertyAnimations: Array<PropertyAnimation>;
public _playSequentially: boolean;
private _isPlaying: boolean;
private _resolve;
private _reject;
public play(): Promise<void> {
if (this.isPlaying) {
throw new Error("Animation is already playing.");
}
var animationFinishedPromise = new Promise<void>((resolve, reject) => {
this._resolve = resolve;
this._reject = reject;
});
this._isPlaying = true;
return animationFinishedPromise;
}
public cancel(): void {
if (!this.isPlaying) {
throw new Error("Animation is not currently playing.");
}
}
public get isPlaying(): boolean {
return this._isPlaying;
}
constructor(animationDefinitions: Array<definition.AnimationDefinition>, playSequentially?: boolean) {
if (!animationDefinitions || animationDefinitions.length === 0) {
throw new Error("No animation definitions specified");
}
ensureTrace();
trace.write("Analyzing " + animationDefinitions.length + " animation definitions...", trace.categories.Animation);
this._propertyAnimations = new Array<PropertyAnimation>();
var i = 0;
var length = animationDefinitions.length;
for (; i < length; i++) {
animationDefinitions[i].curve = definition._resolveAnimationCurve(animationDefinitions[i].curve);
this._propertyAnimations = this._propertyAnimations.concat(Animation._createPropertyAnimations(animationDefinitions[i]));
}
if (this._propertyAnimations.length === 0) {
throw new Error("Nothing to animate.");
}
trace.write("Created " + this._propertyAnimations.length + " individual property animations.", trace.categories.Animation);
this._playSequentially = playSequentially;
}
public _resolveAnimationFinishedPromise() {
this._isPlaying = false;
this._resolve();
}
public _rejectAnimationFinishedPromise() {
this._isPlaying = false;
this._reject(new Error("Animation cancelled."));
}
private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array<PropertyAnimation> {
if (!animationDefinition.target) {
throw new Error("No animation target specified.");
}
var propertyAnimations = new Array<PropertyAnimation>();
// opacity
if (animationDefinition.opacity !== undefined) {
propertyAnimations.push({
target: animationDefinition.target,
property: Properties.opacity,
value: animationDefinition.opacity,
duration: animationDefinition.duration,
delay: animationDefinition.delay,
iterations: animationDefinition.iterations,
curve: animationDefinition.curve
});
}
// backgroundColor
if (animationDefinition.backgroundColor !== undefined) {
propertyAnimations.push({
target: animationDefinition.target,
property: Properties.backgroundColor,
value: animationDefinition.backgroundColor,
duration: animationDefinition.duration,
delay: animationDefinition.delay,
iterations: animationDefinition.iterations,
curve: animationDefinition.curve
});
}
// translate
if (animationDefinition.translate !== undefined) {
propertyAnimations.push({
target: animationDefinition.target,
property: Properties.translate,
value: animationDefinition.translate,
duration: animationDefinition.duration,
delay: animationDefinition.delay,
iterations: animationDefinition.iterations,
curve: animationDefinition.curve
});
}
// scale
if (animationDefinition.scale !== undefined) {
propertyAnimations.push({
target: animationDefinition.target,
property: Properties.scale,
value: animationDefinition.scale,
duration: animationDefinition.duration,
delay: animationDefinition.delay,
iterations: animationDefinition.iterations,
curve: animationDefinition.curve
});
}
// rotate
if (animationDefinition.rotate !== undefined) {
propertyAnimations.push({
target: animationDefinition.target,
property: Properties.rotate,
value: animationDefinition.rotate,
duration: animationDefinition.duration,
delay: animationDefinition.delay,
iterations: animationDefinition.iterations,
curve: animationDefinition.curve
});
}
if (propertyAnimations.length === 0) {
throw new Error("No animation property specified.");
}
return propertyAnimations;
}
public static _getAnimationInfo(animation: PropertyAnimation): string {
return JSON.stringify({
target: animation.target.id,
property: animation.property,
value: animation.value,
duration: animation.duration,
delay: animation.delay,
iterations: animation.iterations,
curve: animation.curve
});
}
}