1 | import Taro from '../../index'
|
2 |
|
3 | declare module '../../index' {
|
4 | namespace createAnimation {
|
5 | interface Option {
|
6 | /** 动画持续时间,单位 ms */
|
7 | duration?: number
|
8 | /** 动画的效果 */
|
9 | timingFunction?: keyof TimingFunction
|
10 | /** 动画延迟时间,单位 ms
|
11 | * @default 0
|
12 | */
|
13 | delay?: number
|
14 | /** @default "50% 50% 0" */
|
15 | transformOrigin?: string
|
16 | /**
|
17 | * 单位
|
18 | * @supported h5
|
19 | */
|
20 | unit?: string
|
21 | }
|
22 | interface TimingFunction {
|
23 | /** 动画从头到尾的速度是相同的 */
|
24 | linear
|
25 | /** 动画以低速开始,然后加快,在结束前变慢 */
|
26 | ease
|
27 | /** 动画以低速开始 */
|
28 | 'ease-in'
|
29 | /** 动画以低速开始和结束 */
|
30 | 'ease-in-out'
|
31 | /** 动画以低速结束 */
|
32 | 'ease-out'
|
33 | /** 动画第一帧就跳至结束状态直到结束 */
|
34 | 'step-start'
|
35 | /** 动画一直保持开始状态,最后一帧跳到结束状态 */
|
36 | 'step-end'
|
37 | }
|
38 | }
|
39 |
|
40 | /** 动画对象
|
41 | * @supported weapp, h5
|
42 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html
|
43 | */
|
44 | interface Animation {
|
45 | /** 导出动画队列。**export 方法每次调用后会清掉之前的动画操作**。
|
46 | * @supported weapp, h5
|
47 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.export.html
|
48 | */
|
49 | export(): {
|
50 | actions: TaroGeneral.IAnyObject[]
|
51 | }
|
52 | /** 表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
|
53 | * @supported weapp, h5
|
54 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.step.html
|
55 | */
|
56 | step(option?: Animation.StepOption): Animation
|
57 | /** 同 [transform-function matrix](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix)
|
58 | * @supported weapp, h5
|
59 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.matrix.html
|
60 | */
|
61 | matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): Animation
|
62 | /** 同 [transform-function matrix3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d)
|
63 | * @supported weapp, h5
|
64 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.matrix3d.html
|
65 | */
|
66 | matrix3d(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number): Animation
|
67 | /** 从原点顺时针旋转一个角度
|
68 | * @supported weapp, h5
|
69 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotate.html
|
70 | */
|
71 | rotate(
|
72 | /** 旋转的角度。范围 [-180, 180] */
|
73 | angle: number,
|
74 | ): Animation
|
75 | /** 从 固定 轴顺时针旋转一个角度
|
76 | * @supported weapp, h5
|
77 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotate3d.html
|
78 | */
|
79 | rotate3d(
|
80 | /** 旋转轴的 x 坐标 */
|
81 | x: number,
|
82 | /** 旋转轴的 y 坐标 */
|
83 | y?: number,
|
84 | /** 旋转轴的 z 坐标 */
|
85 | z?: number,
|
86 | /** 旋转的角度。范围 [-180, 180] */
|
87 | angle?: number,
|
88 | ): Animation
|
89 | /** 从 X 轴顺时针旋转一个角度
|
90 | * @supported weapp, h5
|
91 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateX.html
|
92 | */
|
93 | rotateX(
|
94 | /** 旋转的角度。范围 [-180, 180] */
|
95 | angle: number,
|
96 | ): Animation
|
97 | /** 从 Y 轴顺时针旋转一个角度
|
98 | * @supported weapp, h5
|
99 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateY.html
|
100 | */
|
101 | rotateY(
|
102 | /** 旋转的角度。范围 [-180, 180] */
|
103 | angle: number,
|
104 | ): Animation
|
105 | /** 从 Z 轴顺时针旋转一个角度
|
106 | * @supported weapp, h5
|
107 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateZ.html
|
108 | */
|
109 | rotateZ(
|
110 | /** 旋转的角度。范围 [-180, 180] */
|
111 | angle: number,
|
112 | ): Animation
|
113 | /** 缩放
|
114 | * @supported weapp, h5
|
115 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scale.html
|
116 | */
|
117 | scale(
|
118 | /** 当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数 */
|
119 | sx: number,
|
120 | /** 在 Y 轴缩放 sy 倍数 */
|
121 | sy?: number,
|
122 | ): Animation
|
123 | /** 缩放
|
124 | * @supported weapp, h5
|
125 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scale3d.html
|
126 | */
|
127 | scale3d(
|
128 | /** x 轴的缩放倍数 */
|
129 | sx: number,
|
130 | /** y 轴的缩放倍数 */
|
131 | sy: number,
|
132 | /** z 轴的缩放倍数 */
|
133 | sz: number,
|
134 | ): Animation
|
135 | /** 缩放 X 轴
|
136 | * @supported weapp, h5
|
137 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleX.html
|
138 | */
|
139 | scaleX(
|
140 | /** X 轴的缩放倍数 */
|
141 | scale: number,
|
142 | ): Animation
|
143 | /** 缩放 Y 轴
|
144 | * @supported weapp, h5
|
145 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleY.html
|
146 | */
|
147 | scaleY(
|
148 | /** Y 轴的缩放倍数 */
|
149 | scale: number,
|
150 | ): Animation
|
151 | /** 缩放 Z 轴
|
152 | * @supported weapp, h5
|
153 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleZ.html
|
154 | */
|
155 | scaleZ(
|
156 | /** Z 轴的缩放倍数 */
|
157 | scale: number,
|
158 | ): Animation
|
159 | /** 对 X、Y 轴坐标进行倾斜
|
160 | * @supported weapp, h5
|
161 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skew.html
|
162 | */
|
163 | skew(
|
164 | /** 对 X 轴坐标倾斜的角度,范围 [-180, 180] */
|
165 | ax: number,
|
166 | /** 对 Y 轴坐标倾斜的角度,范围 [-180, 180] */
|
167 | ay: number,
|
168 | ): Animation
|
169 | /** 对 X 轴坐标进行倾斜
|
170 | * @supported weapp, h5
|
171 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skewX.html
|
172 | */
|
173 | skewX(
|
174 | /** 倾斜的角度,范围 [-180, 180] */
|
175 | angle: number,
|
176 | ): Animation
|
177 | /** 对 Y 轴坐标进行倾斜
|
178 | * @supported weapp, h5
|
179 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skewY.html
|
180 | */
|
181 | skewY(
|
182 | /** 倾斜的角度,范围 [-180, 180] */
|
183 | angle: number,
|
184 | ): Animation
|
185 | /** 平移变换
|
186 | * @supported weapp, h5
|
187 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translate.html
|
188 | */
|
189 | translate(
|
190 | /** 当仅有该参数时表示在 X 轴偏移 tx,单位 px */
|
191 | tx?: number,
|
192 | /** 在 Y 轴平移的距离,单位为 px */
|
193 | ty?: number,
|
194 | ): Animation
|
195 | /** 对 xyz 坐标进行平移变换
|
196 | * @supported weapp, h5
|
197 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translate3d.html
|
198 | */
|
199 | translate3d(
|
200 | /** 在 X 轴平移的距离,单位为 px */
|
201 | tx?: number,
|
202 | /** 在 Y 轴平移的距离,单位为 px */
|
203 | ty?: number,
|
204 | /** 在 Z 轴平移的距离,单位为 px */
|
205 | tz?: number,
|
206 | ): Animation
|
207 | /** 对 X 轴平移
|
208 | * @supported weapp, h5
|
209 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateX.html
|
210 | */
|
211 | translateX(
|
212 | /** 在 X 轴平移的距离,单位为 px */
|
213 | translation: number,
|
214 | ): Animation
|
215 | /** 对 Y 轴平移
|
216 | * @supported weapp, h5
|
217 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateY.html
|
218 | */
|
219 | translateY(
|
220 | /** 在 Y 轴平移的距离,单位为 px */
|
221 | translation: number,
|
222 | ): Animation
|
223 | /** 对 Z 轴平移
|
224 | * @supported weapp, h5
|
225 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateZ.html
|
226 | */
|
227 | translateZ(
|
228 | /** 在 Z 轴平移的距离,单位为 px */
|
229 | translation: number,
|
230 | ): Animation
|
231 | /** 设置透明度
|
232 | * @supported weapp, h5
|
233 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.opacity.html
|
234 | */
|
235 | opacity(
|
236 | /** 透明度,范围 0-1 */
|
237 | value: number,
|
238 | ): Animation
|
239 | /** 设置背景色
|
240 | * @supported weapp, h5
|
241 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.backgroundColor.html
|
242 | */
|
243 | backgroundColor(
|
244 | /** 颜色值 */
|
245 | value: string,
|
246 | ): Animation
|
247 | /** 设置宽度
|
248 | * @supported weapp, h5
|
249 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.width.html
|
250 | */
|
251 | width(
|
252 | /** 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 */
|
253 | value: number | string,
|
254 | ): Animation
|
255 | /** 设置高度
|
256 | * @supported weapp, h5
|
257 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.height.html
|
258 | */
|
259 | height(
|
260 | /** 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 */
|
261 | value: number | string,
|
262 | ): Animation
|
263 | /** 设置 left 值
|
264 | * @supported weapp, h5
|
265 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.left.html
|
266 | */
|
267 | left(
|
268 | /** 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 */
|
269 | value: number | string,
|
270 | ): Animation
|
271 | /** 设置 right 值
|
272 | * @supported weapp, h5
|
273 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.right.html
|
274 | */
|
275 | right(
|
276 | /** 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 */
|
277 | value: number | string,
|
278 | ): Animation
|
279 | /** 设置 top 值
|
280 | * @supported weapp, h5
|
281 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.top.html
|
282 | */
|
283 | top(
|
284 | /** 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 */
|
285 | value: number | string,
|
286 | ): Animation
|
287 | /** 设置 bottom 值
|
288 | * @supported weapp, h5
|
289 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.bottom.html
|
290 | */
|
291 | bottom(
|
292 | /** 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 */
|
293 | value: number | string,
|
294 | ): Animation
|
295 | }
|
296 |
|
297 | namespace Animation {
|
298 | interface StepOption {
|
299 | /** 动画延迟时间,单位 ms */
|
300 | delay?: number
|
301 | /** 动画持续时间,单位 ms */
|
302 | duration?: number
|
303 | /** 动画的效果 */
|
304 | timingFunction?: keyof TimingFunction
|
305 | transformOrigin?: string
|
306 | }
|
307 | interface TimingFunction {
|
308 | /** 动画从头到尾的速度是相同的 */
|
309 | linear
|
310 | /** 动画以低速开始,然后加快,在结束前变慢 */
|
311 | ease
|
312 | /** 动画以低速开始 */
|
313 | 'ease-in'
|
314 | /** 动画以低速开始和结束 */
|
315 | 'ease-in-out'
|
316 | /** 动画以低速结束 */
|
317 | 'ease-out'
|
318 | /** 动画第一帧就跳至结束状态直到结束 */
|
319 | 'step-start'
|
320 | /** 动画一直保持开始状态,最后一帧跳到结束状态 */
|
321 | 'step-end'
|
322 | }
|
323 | }
|
324 |
|
325 | /** @ignore */
|
326 | interface KeyFrame {
|
327 | /** 关键帧的偏移,范围[0-1] */
|
328 | offset?: number
|
329 | /** 动画缓动函数 */
|
330 | ease?: string
|
331 | /** 基点位置,即 CSS transform-origin */
|
332 | transformOrigin?: string
|
333 | /** 背景颜色,即 CSS background-color */
|
334 | backgroundColor?: string
|
335 | /** 底边位置,即 CSS bottom */
|
336 | bottom?: number | string
|
337 | /** 高度,即 CSS height */
|
338 | height?: number | string
|
339 | /** 左边位置,即 CSS left */
|
340 | left?: number | string
|
341 | /** 宽度,即 CSS width */
|
342 | width?: number | string
|
343 | /** 不透明度,即 CSS opacity */
|
344 | opacity?: number | string
|
345 | /** 右边位置,即 CSS right */
|
346 | right?: number | string
|
347 | /** 顶边位置,即 CSS top */
|
348 | top?: number | string
|
349 | /** 变换矩阵,即 CSS transform matrix */
|
350 | matrix?: number[]
|
351 | /** 三维变换矩阵,即 CSS transform matrix3d */
|
352 | matrix3d?: number[]
|
353 | /** 旋转,即 CSS transform rotate */
|
354 | rotate?: number
|
355 | /** 三维旋转,即 CSS transform rotate3d */
|
356 | rotate3d?: number[]
|
357 | /** X 方向旋转,即 CSS transform rotateX */
|
358 | rotateX?: number
|
359 | /** Y 方向旋转,即 CSS transform rotateY */
|
360 | rotateY?: number
|
361 | /** Z 方向旋转,即 CSS transform rotateZ */
|
362 | rotateZ?: number
|
363 | /** 缩放,即 CSS transform scale */
|
364 | scale?: number[]
|
365 | /** 三维缩放,即 CSS transform scale3d */
|
366 | scale3d?: number[]
|
367 | /** X 方向缩放,即 CSS transform scaleX */
|
368 | scaleX?: number
|
369 | /** Y 方向缩放,即 CSS transform scaleY */
|
370 | scaleY?: number
|
371 | /** Z 方向缩放,即 CSS transform scaleZ */
|
372 | scaleZ?: number
|
373 | /** 倾斜,即 CSS transform skew */
|
374 | skew?: number[]
|
375 | /** X 方向倾斜,即 CSS transform skewX */
|
376 | skewX?: number
|
377 | /** Y 方向倾斜,即 CSS transform skewY */
|
378 | skewY?: number
|
379 | /** 位移,即 CSS transform translate */
|
380 | translate?: Array<number | string>
|
381 | /** 三维位移,即 CSS transform translate3d */
|
382 | translate3d?: Array<number | string>
|
383 | /** X 方向位移,即 CSS transform translateX */
|
384 | translateX?: number | string
|
385 | /** Y 方向位移,即 CSS transform translateY */
|
386 | translateY?: number | string
|
387 | /** Z 方向位移,即 CSS transform translateZ */
|
388 | translateZ?: number | string
|
389 | composite?: 'replace' | 'add' | 'accumulate' | 'auto'
|
390 | easing?: string
|
391 | [property: string]: any
|
392 | }
|
393 |
|
394 | type ClearAnimationOptions = {
|
395 | [p in keyof KeyFrame]: boolean
|
396 | }
|
397 |
|
398 |
|
399 | /** @ignore */
|
400 | interface ScrollTimelineOption {
|
401 | /** 指定滚动元素的选择器(只支持 scroll-view),该元素滚动时会驱动动画的进度 */
|
402 | scrollSource: string
|
403 | /** 指定滚动的方向。有效值为 horizontal 或 vertical */
|
404 | orientation?: string
|
405 | /** 指定开始驱动动画进度的滚动偏移量,单位 px */
|
406 | startScrollOffset: number
|
407 | /** 指定停止驱动动画进度的滚动偏移量,单位 px */
|
408 | endScrollOffset: number
|
409 | /** 起始和结束的滚动范围映射的时间长度,该时间可用于与关键帧动画里的时间 (duration) 相匹配,单位 ms */
|
410 | timeRange: number
|
411 | }
|
412 |
|
413 | interface TaroStatic {
|
414 | /** 创建一个动画实例 [animation](../Animation)。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
|
415 | * @supported weapp, h5
|
416 | * @example
|
417 | * ```tsx
|
418 | * var animation = Taro.createAnimation({
|
419 | * transformOrigin: "50% 50%",
|
420 | * duration: 1000,
|
421 | * timingFunction: "ease",
|
422 | * delay: 0
|
423 | * })
|
424 | * ```
|
425 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
|
426 | */
|
427 | createAnimation(option: createAnimation.Option): Animation
|
428 | }
|
429 | }
|