UNPKG

2.26 kBPlain TextView Raw
1'use strict';
2import { withSequence, withTiming } from '../../animation';
3import type {
4 ILayoutAnimationBuilder,
5 LayoutAnimationFunction,
6} from '../animationBuilder/commonTypes';
7import { BaseAnimationBuilder } from '../animationBuilder';
8
9/**
10 * Fades out components from one position and shows them in another. You can modify the behavior by chaining methods like `.duration(500)` or `.delay(500)`.
11 *
12 * You pass it to the `layout` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
13 *
14 * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#fading-transition
15 */
16export class FadingTransition
17 extends BaseAnimationBuilder
18 implements ILayoutAnimationBuilder
19{
20 static createInstance<T extends typeof BaseAnimationBuilder>(
21 this: T
22 ): InstanceType<T> {
23 return new FadingTransition() as InstanceType<T>;
24 }
25
26 build = (): LayoutAnimationFunction => {
27 const delayFunction = this.getDelayFunction();
28 const callback = this.callbackV;
29 const delay = this.getDelay();
30 const duration = this.durationV ?? 500;
31
32 return (values) => {
33 'worklet';
34 return {
35 initialValues: {
36 opacity: 1,
37 originX: values.currentOriginX,
38 originY: values.currentOriginY,
39 width: values.currentWidth,
40 height: values.currentHeight,
41 },
42 animations: {
43 opacity: delayFunction(
44 delay,
45 withSequence(
46 withTiming(0, { duration }),
47 withTiming(1, { duration })
48 )
49 ),
50 originX: delayFunction(
51 delay + duration,
52 withTiming(values.targetOriginX, { duration: 50 })
53 ),
54 originY: delayFunction(
55 delay + duration,
56 withTiming(values.targetOriginY, { duration: 50 })
57 ),
58 width: delayFunction(
59 delay + duration,
60 withTiming(values.targetWidth, { duration: 50 })
61 ),
62 height: delayFunction(
63 delay + duration,
64 withTiming(values.targetHeight, { duration: 50 })
65 ),
66 },
67 callback,
68 };
69 };
70 };
71}