UNPKG

3.07 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 * Transforms layout starting from the X-axis and width first, followed by the Y-axis and height. You can modify the behavior by chaining methods like `.springify()` or `.duration(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#sequenced-transition
15 */
16export class SequencedTransition
17 extends BaseAnimationBuilder
18 implements ILayoutAnimationBuilder
19{
20 reversed = false;
21
22 static createInstance<T extends typeof BaseAnimationBuilder>(
23 this: T
24 ): InstanceType<T> {
25 return new SequencedTransition() as InstanceType<T>;
26 }
27
28 static reverse(): SequencedTransition {
29 const instance = SequencedTransition.createInstance();
30 return instance.reverse();
31 }
32
33 reverse(): SequencedTransition {
34 this.reversed = !this.reversed;
35 return this;
36 }
37
38 build = (): LayoutAnimationFunction => {
39 const delayFunction = this.getDelayFunction();
40 const callback = this.callbackV;
41 const delay = this.getDelay();
42 const sequenceDuration = (this.durationV ?? 500) / 2;
43 const config = { duration: sequenceDuration };
44 const reverse = this.reversed;
45
46 return (values) => {
47 'worklet';
48 return {
49 initialValues: {
50 originX: values.currentOriginX,
51 originY: values.currentOriginY,
52 width: values.currentWidth,
53 height: values.currentHeight,
54 },
55 animations: {
56 originX: delayFunction(
57 delay,
58 withSequence(
59 withTiming(
60 reverse ? values.currentOriginX : values.targetOriginX,
61 config
62 ),
63 withTiming(values.targetOriginX, config)
64 )
65 ),
66 originY: delayFunction(
67 delay,
68 withSequence(
69 withTiming(
70 reverse ? values.targetOriginY : values.currentOriginY,
71 config
72 ),
73 withTiming(values.targetOriginY, config)
74 )
75 ),
76 width: delayFunction(
77 delay,
78 withSequence(
79 withTiming(
80 reverse ? values.currentWidth : values.targetWidth,
81 config
82 ),
83 withTiming(values.targetWidth, config)
84 )
85 ),
86 height: delayFunction(
87 delay,
88 withSequence(
89 withTiming(
90 reverse ? values.targetHeight : values.currentHeight,
91 config
92 ),
93 withTiming(values.targetHeight, config)
94 )
95 ),
96 },
97 callback,
98 };
99 };
100 };
101}