UNPKG

18.6 kBPlain TextView Raw
1'use strict';
2import type {
3 EntryExitAnimationFunction,
4 EntryExitAnimationsValues,
5 IEntryExitAnimationBuilder,
6} from '../animationBuilder/commonTypes';
7import { withSequence, withTiming } from '../../animation';
8import type { BaseAnimationBuilder } from '../animationBuilder';
9import { ComplexAnimationBuilder } from '../animationBuilder';
10
11/**
12 * Bounce entering animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
13 *
14 * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
15 *
16 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
17 */
18export class BounceIn
19 extends ComplexAnimationBuilder
20 implements IEntryExitAnimationBuilder
21{
22 static presetName = 'BounceIn';
23
24 static createInstance<T extends typeof BaseAnimationBuilder>(
25 this: T
26 ): InstanceType<T> {
27 return new BounceIn() as InstanceType<T>;
28 }
29
30 static getDuration(): number {
31 return 600;
32 }
33
34 getDuration(): number {
35 return this.durationV ?? 600;
36 }
37
38 build = (): EntryExitAnimationFunction => {
39 const delayFunction = this.getDelayFunction();
40 const delay = this.getDelay();
41 const duration = this.getDuration();
42 const callback = this.callbackV;
43 const initialValues = this.initialValues;
44
45 return () => {
46 'worklet';
47 return {
48 animations: {
49 transform: [
50 {
51 scale: delayFunction(
52 delay,
53 withSequence(
54 withTiming(1.2, { duration: duration * 0.55 }),
55 withTiming(0.9, { duration: duration * 0.15 }),
56 withTiming(1.1, { duration: duration * 0.15 }),
57 withTiming(1, { duration: duration * 0.15 })
58 )
59 ),
60 },
61 ],
62 },
63 initialValues: {
64 transform: [{ scale: 0 }],
65 ...initialValues,
66 },
67 callback,
68 };
69 };
70 };
71}
72
73/**
74 * Bounce from bottom animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
75 *
76 * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
77 *
78 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
79 */
80export class BounceInDown
81 extends ComplexAnimationBuilder
82 implements IEntryExitAnimationBuilder
83{
84 static presetName = 'BounceInDown';
85
86 static createInstance<T extends typeof BaseAnimationBuilder>(
87 this: T
88 ): InstanceType<T> {
89 return new BounceInDown() as InstanceType<T>;
90 }
91
92 static getDuration(): number {
93 return 600;
94 }
95
96 getDuration(): number {
97 return this.durationV ?? 600;
98 }
99
100 build = (): EntryExitAnimationFunction => {
101 const delayFunction = this.getDelayFunction();
102 const delay = this.getDelay();
103 const duration = this.getDuration();
104 const callback = this.callbackV;
105 const initialValues = this.initialValues;
106
107 return (values: EntryExitAnimationsValues) => {
108 'worklet';
109 return {
110 animations: {
111 transform: [
112 {
113 translateY: delayFunction(
114 delay,
115 withSequence(
116 withTiming(-20, { duration: duration * 0.55 }),
117 withTiming(10, { duration: duration * 0.15 }),
118 withTiming(-10, { duration: duration * 0.15 }),
119 withTiming(0, { duration: duration * 0.15 })
120 )
121 ),
122 },
123 ],
124 },
125 initialValues: {
126 transform: [
127 {
128 translateY: values.windowHeight,
129 },
130 ],
131 ...initialValues,
132 },
133 callback,
134 };
135 };
136 };
137}
138
139/**
140 * Bounce from top animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
141 *
142 * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
143 *
144 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
145 */
146export class BounceInUp
147 extends ComplexAnimationBuilder
148 implements IEntryExitAnimationBuilder
149{
150 static presetName = 'BounceInUp';
151
152 static createInstance<T extends typeof BaseAnimationBuilder>(
153 this: T
154 ): InstanceType<T> {
155 return new BounceInUp() as InstanceType<T>;
156 }
157
158 static getDuration(): number {
159 return 600;
160 }
161
162 getDuration(): number {
163 return this.durationV ?? 600;
164 }
165
166 build = (): EntryExitAnimationFunction => {
167 const delayFunction = this.getDelayFunction();
168 const delay = this.getDelay();
169 const duration = this.getDuration();
170 const callback = this.callbackV;
171 const initialValues = this.initialValues;
172
173 return (values: EntryExitAnimationsValues) => {
174 'worklet';
175 return {
176 animations: {
177 transform: [
178 {
179 translateY: delayFunction(
180 delay,
181 withSequence(
182 withTiming(20, { duration: duration * 0.55 }),
183 withTiming(-10, { duration: duration * 0.15 }),
184 withTiming(10, { duration: duration * 0.15 }),
185 withTiming(0, { duration: duration * 0.15 })
186 )
187 ),
188 },
189 ],
190 },
191 initialValues: {
192 transform: [{ translateY: -values.windowHeight }],
193 ...initialValues,
194 },
195 callback,
196 };
197 };
198 };
199}
200
201/**
202 * Bounce from left animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
203 *
204 * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
205 *
206 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
207 */
208export class BounceInLeft
209 extends ComplexAnimationBuilder
210 implements IEntryExitAnimationBuilder
211{
212 static presetName = 'BounceInLeft';
213
214 static createInstance<T extends typeof BaseAnimationBuilder>(
215 this: T
216 ): InstanceType<T> {
217 return new BounceInLeft() as InstanceType<T>;
218 }
219
220 static getDuration(): number {
221 return 600;
222 }
223
224 getDuration(): number {
225 return this.durationV ?? 600;
226 }
227
228 build = (): EntryExitAnimationFunction => {
229 const delayFunction = this.getDelayFunction();
230 const delay = this.getDelay();
231 const duration = this.getDuration();
232 const callback = this.callbackV;
233 const initialValues = this.initialValues;
234
235 return (values: EntryExitAnimationsValues) => {
236 'worklet';
237 return {
238 animations: {
239 transform: [
240 {
241 translateX: delayFunction(
242 delay,
243 withSequence(
244 withTiming(20, { duration: duration * 0.55 }),
245 withTiming(-10, { duration: duration * 0.15 }),
246 withTiming(10, { duration: duration * 0.15 }),
247 withTiming(0, { duration: duration * 0.15 })
248 )
249 ),
250 },
251 ],
252 },
253 initialValues: {
254 transform: [{ translateX: -values.windowWidth }],
255 ...initialValues,
256 },
257 callback,
258 };
259 };
260 };
261}
262
263/**
264 * Bounce from right animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
265 *
266 * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
267 *
268 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
269 */
270export class BounceInRight
271 extends ComplexAnimationBuilder
272 implements IEntryExitAnimationBuilder
273{
274 static presetName = 'BounceInRight';
275
276 static createInstance<T extends typeof BaseAnimationBuilder>(
277 this: T
278 ): InstanceType<T> {
279 return new BounceInRight() as InstanceType<T>;
280 }
281
282 static getDuration(): number {
283 return 600;
284 }
285
286 getDuration(): number {
287 return this.durationV ?? 600;
288 }
289
290 build = (): EntryExitAnimationFunction => {
291 const delayFunction = this.getDelayFunction();
292 const delay = this.getDelay();
293 const duration = this.getDuration();
294 const callback = this.callbackV;
295 const initialValues = this.initialValues;
296
297 return (values: EntryExitAnimationsValues) => {
298 'worklet';
299 return {
300 animations: {
301 transform: [
302 {
303 translateX: delayFunction(
304 delay,
305 withSequence(
306 withTiming(-20, { duration: duration * 0.55 }),
307 withTiming(10, { duration: duration * 0.15 }),
308 withTiming(-10, { duration: duration * 0.15 }),
309 withTiming(0, { duration: duration * 0.15 })
310 )
311 ),
312 },
313 ],
314 },
315 initialValues: {
316 transform: [{ translateX: values.windowWidth }],
317 ...initialValues,
318 },
319 callback,
320 };
321 };
322 };
323}
324
325/**
326 * Bounce exiting animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
327 *
328 * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
329 *
330 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
331 */
332export class BounceOut
333 extends ComplexAnimationBuilder
334 implements IEntryExitAnimationBuilder
335{
336 static presetName = 'BounceOut';
337
338 static createInstance<T extends typeof BaseAnimationBuilder>(
339 this: T
340 ): InstanceType<T> {
341 return new BounceOut() as InstanceType<T>;
342 }
343
344 static getDuration(): number {
345 return 600;
346 }
347
348 getDuration(): number {
349 return this.durationV ?? 600;
350 }
351
352 build = (): EntryExitAnimationFunction => {
353 const delayFunction = this.getDelayFunction();
354 const delay = this.getDelay();
355 const duration = this.getDuration();
356 const callback = this.callbackV;
357 const initialValues = this.initialValues;
358
359 return () => {
360 'worklet';
361 return {
362 animations: {
363 transform: [
364 {
365 scale: delayFunction(
366 delay,
367 withSequence(
368 withTiming(1.1, { duration: duration * 0.15 }),
369 withTiming(0.9, { duration: duration * 0.15 }),
370 withTiming(1.2, { duration: duration * 0.15 }),
371 withTiming(0, { duration: duration * 0.55 })
372 )
373 ),
374 },
375 ],
376 },
377 initialValues: {
378 transform: [{ scale: 1 }],
379 ...initialValues,
380 },
381 callback,
382 };
383 };
384 };
385}
386
387/**
388 * Bounce to bottom animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
389 *
390 * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
391 *
392 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
393 */
394export class BounceOutDown
395 extends ComplexAnimationBuilder
396 implements IEntryExitAnimationBuilder
397{
398 static presetName = 'BounceOutDown';
399
400 static createInstance<T extends typeof BaseAnimationBuilder>(
401 this: T
402 ): InstanceType<T> {
403 return new BounceOutDown() as InstanceType<T>;
404 }
405
406 static getDuration(): number {
407 return 600;
408 }
409
410 getDuration(): number {
411 return this.durationV ?? 600;
412 }
413
414 build = (): EntryExitAnimationFunction => {
415 const delayFunction = this.getDelayFunction();
416 const delay = this.getDelay();
417 const duration = this.getDuration();
418 const callback = this.callbackV;
419 const initialValues = this.initialValues;
420
421 return (values: EntryExitAnimationsValues) => {
422 'worklet';
423 return {
424 animations: {
425 transform: [
426 {
427 translateY: delayFunction(
428 delay,
429 withSequence(
430 withTiming(-10, { duration: duration * 0.15 }),
431 withTiming(10, { duration: duration * 0.15 }),
432 withTiming(-20, { duration: duration * 0.15 }),
433 withTiming(values.windowHeight, {
434 duration: duration * 0.55,
435 })
436 )
437 ),
438 },
439 ],
440 },
441 initialValues: {
442 transform: [{ translateY: 0 }],
443 ...initialValues,
444 },
445 callback,
446 };
447 };
448 };
449}
450
451/**
452 * Bounce to top animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
453 *
454 * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
455 *
456 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
457 */
458export class BounceOutUp
459 extends ComplexAnimationBuilder
460 implements IEntryExitAnimationBuilder
461{
462 static presetName = 'BounceOutUp';
463
464 static createInstance<T extends typeof BaseAnimationBuilder>(
465 this: T
466 ): InstanceType<T> {
467 return new BounceOutUp() as InstanceType<T>;
468 }
469
470 static getDuration(): number {
471 return 600;
472 }
473
474 getDuration(): number {
475 return this.durationV ?? 600;
476 }
477
478 build = (): EntryExitAnimationFunction => {
479 const delayFunction = this.getDelayFunction();
480 const delay = this.getDelay();
481 const duration = this.getDuration();
482 const callback = this.callbackV;
483 const initialValues = this.initialValues;
484
485 return (values: EntryExitAnimationsValues) => {
486 'worklet';
487 return {
488 animations: {
489 transform: [
490 {
491 translateY: delayFunction(
492 delay,
493 withSequence(
494 withTiming(10, { duration: duration * 0.15 }),
495 withTiming(-10, { duration: duration * 0.15 }),
496 withTiming(20, { duration: duration * 0.15 }),
497 withTiming(-values.windowHeight, {
498 duration: duration * 0.55,
499 })
500 )
501 ),
502 },
503 ],
504 },
505 initialValues: {
506 transform: [{ translateY: 0 }],
507 ...initialValues,
508 },
509 callback,
510 };
511 };
512 };
513}
514
515/**
516 * Bounce to left animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
517 *
518 * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
519 *
520 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
521 */
522export class BounceOutLeft
523 extends ComplexAnimationBuilder
524 implements IEntryExitAnimationBuilder
525{
526 static presetName = 'BounceOutLeft';
527
528 static createInstance<T extends typeof BaseAnimationBuilder>(
529 this: T
530 ): InstanceType<T> {
531 return new BounceOutLeft() as InstanceType<T>;
532 }
533
534 static getDuration(): number {
535 return 600;
536 }
537
538 getDuration(): number {
539 return this.durationV ?? 600;
540 }
541
542 build = (): EntryExitAnimationFunction => {
543 const delayFunction = this.getDelayFunction();
544 const delay = this.getDelay();
545 const duration = this.getDuration();
546 const callback = this.callbackV;
547 const initialValues = this.initialValues;
548
549 return (values: EntryExitAnimationsValues) => {
550 'worklet';
551 return {
552 animations: {
553 transform: [
554 {
555 translateX: delayFunction(
556 delay,
557 withSequence(
558 withTiming(10, { duration: duration * 0.15 }),
559 withTiming(-10, { duration: duration * 0.15 }),
560 withTiming(20, { duration: duration * 0.15 }),
561 withTiming(-values.windowWidth, {
562 duration: duration * 0.55,
563 })
564 )
565 ),
566 },
567 ],
568 },
569 initialValues: {
570 transform: [{ translateX: 0 }],
571 ...initialValues,
572 },
573 callback,
574 };
575 };
576 };
577}
578
579/**
580 * Bounce to right animation. You can modify the behavior by chaining methods like `.delay(300)` or `.duration(100)`.
581 *
582 * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
583 *
584 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce
585 */
586export class BounceOutRight
587 extends ComplexAnimationBuilder
588 implements IEntryExitAnimationBuilder
589{
590 static presetName = 'BounceOutRight';
591
592 static createInstance<T extends typeof BaseAnimationBuilder>(
593 this: T
594 ): InstanceType<T> {
595 return new BounceOutRight() as InstanceType<T>;
596 }
597
598 static getDuration(): number {
599 return 600;
600 }
601
602 getDuration(): number {
603 return this.durationV ?? 600;
604 }
605
606 build = (): EntryExitAnimationFunction => {
607 const delayFunction = this.getDelayFunction();
608 const delay = this.getDelay();
609 const duration = this.getDuration();
610 const callback = this.callbackV;
611 const initialValues = this.initialValues;
612
613 return (values: EntryExitAnimationsValues) => {
614 'worklet';
615 return {
616 animations: {
617 transform: [
618 {
619 translateX: delayFunction(
620 delay,
621 withSequence(
622 withTiming(-10, { duration: duration * 0.15 }),
623 withTiming(10, { duration: duration * 0.15 }),
624 withTiming(-20, { duration: duration * 0.15 }),
625 withTiming(values.windowWidth, {
626 duration: duration * 0.55,
627 })
628 )
629 ),
630 },
631 ],
632 },
633 initialValues: {
634 transform: [{ translateX: 0 }],
635 ...initialValues,
636 },
637 callback,
638 };
639 };
640 };
641}