'use strict'; import type { IEntryExitAnimationBuilder, EntryExitAnimationFunction, EntryAnimationsValues, ExitAnimationsValues, EntryExitAnimationsValues, AnimationConfigFunction, IEntryAnimationBuilder, IExitAnimationBuilder, } from '../animationBuilder/commonTypes'; import type { BaseAnimationBuilder } from '../animationBuilder'; import { ComplexAnimationBuilder } from '../animationBuilder'; /** * Scale from center animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomIn extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomIn'; static createInstance( this: T ): InstanceType { return new ZoomIn() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return () => { 'worklet'; return { animations: { transform: [{ scale: delayFunction(delay, animation(1, config)) }], }, initialValues: { transform: [{ scale: 0 }], ...initialValues, }, callback, }; }; }; } /** * Scale from center with rotation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomInRotate extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomInRotate'; static createInstance( this: T ): InstanceType { return new ZoomInRotate() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const rotate = this.rotateV ? this.rotateV : '0.3'; const callback = this.callbackV; const initialValues = this.initialValues; return () => { 'worklet'; return { animations: { transform: [ { scale: delayFunction(delay, animation(1, config)) }, { rotate: delayFunction(delay, animation(0, config)) }, ], }, initialValues: { transform: [{ scale: 0 }, { rotate }], ...initialValues, }, callback, }; }; }; } /** * Scale from left animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomInLeft extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomInLeft'; static createInstance( this: T ): InstanceType { return new ZoomInLeft() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateX: delayFunction(delay, animation(0, config)) }, { scale: delayFunction(delay, animation(1, config)) }, ], }, initialValues: { transform: [{ translateX: -values.windowWidth }, { scale: 0 }], ...initialValues, }, callback, }; }; }; } /** * Scale from right animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomInRight extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomInRight'; static createInstance( this: T ): InstanceType { return new ZoomInRight() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateX: delayFunction(delay, animation(0, config)) }, { scale: delayFunction(delay, animation(1, config)) }, ], }, initialValues: { transform: [{ translateX: values.windowWidth }, { scale: 0 }], ...initialValues, }, callback, }; }; }; } /** * Scale from top animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomInUp extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomInUp'; static createInstance( this: T ): InstanceType { return new ZoomInUp() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction(delay, animation(0, config)) }, { scale: delayFunction(delay, animation(1, config)) }, ], }, initialValues: { transform: [{ translateY: -values.windowHeight }, { scale: 0 }], ...initialValues, }, callback, }; }; }; } /** * Scale from bottom animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomInDown extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomInDown'; static createInstance( this: T ): InstanceType { return new ZoomInDown() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction(delay, animation(0, config)) }, { scale: delayFunction(delay, animation(1, config)) }, ], }, initialValues: { transform: [{ translateY: values.windowHeight }, { scale: 0 }], ...initialValues, }, callback, }; }; }; } /** * Eased scale from top animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomInEasyUp extends ComplexAnimationBuilder implements IEntryAnimationBuilder { static presetName = 'ZoomInEasyUp'; static createInstance( this: T ): InstanceType { return new ZoomInEasyUp() as InstanceType; } build = (): AnimationConfigFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction(delay, animation(0, config)) }, { scale: delayFunction(delay, animation(1, config)) }, ], }, initialValues: { transform: [{ translateY: -values.targetHeight }, { scale: 0 }], ...initialValues, }, callback, }; }; }; } /** * Eased scale from bottom animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `entering` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomInEasyDown extends ComplexAnimationBuilder implements IEntryAnimationBuilder { static presetName = 'ZoomInEasyDown'; static createInstance( this: T ): InstanceType { return new ZoomInEasyDown() as InstanceType; } build = (): AnimationConfigFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction(delay, animation(0, config)) }, { scale: delayFunction(delay, animation(1, config)) }, ], }, initialValues: { transform: [{ translateY: values.targetHeight }, { scale: 0 }], ...initialValues, }, callback, }; }; }; } /** * Scale to center animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOut extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomOut'; static createInstance( this: T ): InstanceType { return new ZoomOut() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return () => { 'worklet'; return { animations: { transform: [{ scale: delayFunction(delay, animation(0, config)) }], }, initialValues: { transform: [{ scale: 1 }], ...initialValues, }, callback, }; }; }; } /** * Scale to center with rotation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOutRotate extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomOutRotate'; static createInstance( this: T ): InstanceType { return new ZoomOutRotate() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const rotate = this.rotateV ? this.rotateV : '0.3'; const callback = this.callbackV; const initialValues = this.initialValues; return () => { 'worklet'; return { animations: { transform: [ { scale: delayFunction(delay, animation(0, config)) }, { rotate: delayFunction(delay, animation(rotate, config)) }, ], }, initialValues: { transform: [{ scale: 1 }, { rotate: '0' }], ...initialValues, }, callback, }; }; }; } /** * Scale to left animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOutLeft extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomOutLeft'; static createInstance( this: T ): InstanceType { return new ZoomOutLeft() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateX: delayFunction( delay, animation(-values.windowWidth, config) ), }, { scale: delayFunction(delay, animation(0, config)) }, ], }, initialValues: { transform: [{ translateX: 0 }, { scale: 1 }], ...initialValues, }, callback, }; }; }; } /** * Scale to right animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOutRight extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomOutRight'; static createInstance( this: T ): InstanceType { return new ZoomOutRight() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateX: delayFunction( delay, animation(values.windowWidth, config) ), }, { scale: delayFunction(delay, animation(0, config)) }, ], }, initialValues: { transform: [{ translateX: 0 }, { scale: 1 }], ...initialValues, }, callback, }; }; }; } /** * Scale to top animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOutUp extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomOutUp'; static createInstance( this: T ): InstanceType { return new ZoomOutUp() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction( delay, animation(-values.windowHeight, config) ), }, { scale: delayFunction(delay, animation(0, config)) }, ], }, initialValues: { transform: [{ translateY: 0 }, { scale: 1 }], ...initialValues, }, callback, }; }; }; } /** * Scale to bottom animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOutDown extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder { static presetName = 'ZoomOutDown'; static createInstance( this: T ): InstanceType { return new ZoomOutDown() as InstanceType; } build = (): EntryExitAnimationFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values: EntryExitAnimationsValues) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction( delay, animation(values.windowHeight, config) ), }, { scale: delayFunction(delay, animation(0, config)) }, ], }, initialValues: { transform: [{ translateY: 0 }, { scale: 1 }], ...initialValues, }, callback, }; }; }; } /** * Eased scale to top animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOutEasyUp extends ComplexAnimationBuilder implements IExitAnimationBuilder { static presetName = 'ZoomOutEasyUp'; static createInstance( this: T ): InstanceType { return new ZoomOutEasyUp() as InstanceType; } build = (): AnimationConfigFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction( delay, animation(-values.currentHeight, config) ), }, { scale: delayFunction(delay, animation(0, config)) }, ], }, initialValues: { transform: [{ translateY: 0 }, { scale: 1 }], ...initialValues, }, callback, }; }; }; } /** * Eased scale to bottom animation. You can modify the behavior by chaining methods like `.springify()` or `.duration(500)`. * * You pass it to the `exiting` prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component). * * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom */ export class ZoomOutEasyDown extends ComplexAnimationBuilder implements IExitAnimationBuilder { static presetName = 'ZoomOutEasyDown'; static createInstance( this: T ): InstanceType { return new ZoomOutEasyDown() as InstanceType; } build = (): AnimationConfigFunction => { const delayFunction = this.getDelayFunction(); const [animation, config] = this.getAnimationAndConfig(); const delay = this.getDelay(); const callback = this.callbackV; const initialValues = this.initialValues; return (values) => { 'worklet'; return { animations: { transform: [ { translateY: delayFunction( delay, animation(values.currentHeight, config) ), }, { scale: delayFunction(delay, animation(0, config)) }, ], }, initialValues: { transform: [{ translateY: 0 }, { scale: 1 }], ...initialValues, }, callback, }; }; }; }