UNPKG

2.02 kBPlain TextView Raw
1'use strict';
2import type { BaseAnimationBuilder } from '../animationBuilder';
3import { ComplexAnimationBuilder } from '../animationBuilder';
4import type {
5 ILayoutAnimationBuilder,
6 LayoutAnimationFunction,
7} from '../animationBuilder/commonTypes';
8
9/**
10 * Linearly transforms the layout from one position to another. 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#linear-transition
15 */
16export class LinearTransition
17 extends ComplexAnimationBuilder
18 implements ILayoutAnimationBuilder
19{
20 static createInstance<T extends typeof BaseAnimationBuilder>(
21 this: T
22 ): InstanceType<T> {
23 return new LinearTransition() as InstanceType<T>;
24 }
25
26 build = (): LayoutAnimationFunction => {
27 const delayFunction = this.getDelayFunction();
28 const [animation, config] = this.getAnimationAndConfig();
29 const callback = this.callbackV;
30 const delay = this.getDelay();
31
32 return (values) => {
33 'worklet';
34 return {
35 initialValues: {
36 originX: values.currentOriginX,
37 originY: values.currentOriginY,
38 width: values.currentWidth,
39 height: values.currentHeight,
40 },
41 animations: {
42 originX: delayFunction(
43 delay,
44 animation(values.targetOriginX, config)
45 ),
46 originY: delayFunction(
47 delay,
48 animation(values.targetOriginY, config)
49 ),
50 width: delayFunction(delay, animation(values.targetWidth, config)),
51 height: delayFunction(delay, animation(values.targetHeight, config)),
52 },
53 callback,
54 };
55 };
56 };
57}
58
59/**
60 * @deprecated Please use {@link LinearTransition} instead.
61 */
62export const Layout = LinearTransition;