UNPKG

3.67 kBTypeScriptView Raw
1import { View } from '../core/view';
2import { CoreTypes } from '../../core-types';
3import { Color } from '../../color';
4
5export { KeyframeAnimation, KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo } from './keyframe-animation';
6
7/**
8 * Defines animation options for the View.animate method.
9 */
10export interface AnimationDefinition {
11 /**
12 * The view whose property is to be animated.
13 */
14 target?: View;
15
16 /**
17 * Animates the opacity of the view. Value should be a number between 0.0 and 1.0
18 */
19 opacity?: number;
20
21 /**
22 * Animates the backgroundColor of the view.
23 */
24 backgroundColor?: Color;
25
26 /**
27 * Animates the translate affine transform of the view.
28 */
29 translate?: Pair;
30
31 /**
32 * Animates the scale affine transform of the view.
33 */
34 scale?: Pair;
35
36 /**
37 * Animates the height of a view.
38 */
39 height?: CoreTypes.PercentLengthType | string;
40
41 /**
42 * Animates the width of a view.
43 */
44 width?: CoreTypes.PercentLengthType | string;
45
46 /**
47 * Animates the rotate affine transform of the view. Value should be a number specifying the rotation amount in degrees.
48 */
49 rotate?: number | Point3D;
50
51 /**
52 * The length of the animation in milliseconds. The default duration is 300 milliseconds.
53 */
54 duration?: number;
55
56 /**
57 * The amount of time, in milliseconds, to delay starting the animation.
58 */
59 delay?: number;
60
61 /**
62 * Specifies how many times the animation should be played. Default is 1.
63 * iOS animations support fractional iterations, i.e. 1.5.
64 * To repeat an animation infinitely, use Number.POSITIVE_INFINITY
65 */
66 iterations?: number;
67
68 /**
69 * An optional animation curve. Possible values are contained in the [AnimationCurve enumeration](../modules/_ui_enums_.animationcurve.html).
70 * Alternatively, you can pass an instance of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.
71 */
72 curve?: any;
73}
74
75/**
76 * Defines a custom animation timing curve by using the cubic-bezier function.
77 * Possible values are numeric values from 0 to 1
78 */
79export class CubicBezierAnimationCurve {
80 public x1: number;
81 public y1: number;
82 public x2: number;
83 public y2: number;
84
85 constructor(x1: number, y1: number, x2: number, y2: number);
86}
87
88/**
89 * Defines a key-value pair for css transformation
90 */
91export type Transformation = {
92 property: TransformationType;
93 value: TransformationValue;
94};
95
96/**
97 * Defines possible css transformations
98 */
99export type TransformationType = 'rotate' | 'rotateX' | 'rotateY' | 'translate' | 'translateX' | 'translateY' | 'scale' | 'scaleX' | 'scaleY';
100
101/**
102 * Defines possible css transformation values
103 */
104export type TransformationValue = Point3D | Pair | number;
105
106/**
107 * Defines a point in 3d space (x, y and z) for rotation in 3d animations.
108 */
109export interface Point3D {
110 x: number;
111 y: number;
112 z: number;
113}
114
115/**
116 * Defines a pair of values (horizontal and vertical) for translate and scale animations.
117 */
118export interface Pair {
119 x: number;
120 y: number;
121}
122
123/**
124 * Defines full information for css transformation
125 */
126export type TransformFunctionsInfo = {
127 translate: Pair;
128 rotate: Point3D;
129 scale: Pair;
130};
131
132export interface Cancelable {
133 cancel(): void;
134}
135
136/**
137 * A Promise that can cancel the animation.
138 */
139export type AnimationPromise = Promise<void> & Cancelable;
140
141/**
142 * Defines a animation set.
143 */
144export class Animation {
145 constructor(animationDefinitions: Array<AnimationDefinition>, playSequentially?: boolean);
146 public play: (resetOnFinish?: boolean) => AnimationPromise;
147 public cancel: () => void;
148 public isPlaying: boolean;
149 public _resolveAnimationCurve(curve: any): any;
150}
151
152export function _resolveAnimationCurve(curve: any): any;