Перейти к содержанию

withDelay

withDelay - это модификатор анимации, позволяющий запускать анимацию с задержкой.

Ссылка

1
2
3
4
5
6
import { withDelay } from 'react-native-reanimated';

function App() {
    sv.value = withDelay(500, withTiming(0));
    // ...
}

Типизация

1
2
3
4
5
6
type AnimatableValue = number | string | number[];

function withDelay<T extends AnimatableValue>(
    delayMs: number,
    delayedAnimation: T
): T;

Аргументы

delayMs

Длительность (в миллисекундах) до начала анимации.

delayedAnimation

Анимация, которую нужно задержать.

Возвраты

withDelay возвращает объект анимации. Он может быть либо напрямую присвоен shared value, либо использован в качестве значения для объекта стиля, возвращаемого из useAnimatedStyle.

Пример

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
import React, { useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Animated, {
    useSharedValue,
    withDelay,
    withTiming,
} from 'react-native-reanimated';

const DURATION = 1000;
const DELAY = 500;

const text = ['React', 'Native', 'Reanimated'];

export default function App() {
    const [isShown, setShown] = useState(false);

    const opacity1 = useSharedValue(0);
    const opacity2 = useSharedValue(0);
    const opacity3 = useSharedValue(0);

    // prettier-ignore
    const show = () => {
    if (isShown) {
      opacity3.value = withDelay(0 * DELAY, withTiming(0, { duration: DURATION }));
      opacity2.value = withDelay(1 * DELAY, withTiming(0, { duration: DURATION }));
      opacity1.value = withDelay(2 * DELAY, withTiming(0, { duration: DURATION }));
    } else {
      opacity1.value = withDelay(0 * DELAY, withTiming(1, { duration: DURATION }));
      opacity2.value = withDelay(1 * DELAY, withTiming(1, { duration: DURATION }));
      opacity3.value = withDelay(2 * DELAY, withTiming(1, { duration: DURATION }));
    }

    setShown(!isShown);
  };

    return (
        <View style={styles.container}>
            <View style={styles.text}>
                <Animated.Text
                    style={{
                        ...styles.label,
                        opacity: opacity1,
                    }}
                >
                    {text[0]}
                </Animated.Text>
                <Animated.Text
                    style={{
                        ...styles.label,
                        opacity: opacity2,
                    }}
                >
                    {text[1]}
                </Animated.Text>
                <Animated.Text
                    style={{
                        ...styles.label,
                        opacity: opacity3,
                    }}
                >
                    {text[2]}
                </Animated.Text>
            </View>
            <Button
                title={isShown ? 'Hide' : 'Show'}
                onPress={show}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
    },
    text: {
        flexDirection: 'row',
    },
    tab: {
        paddingHorizontal: 20,
        paddingVertical: 10,
    },
    label: {
        fontSize: 42,
        textAlign: 'center',
        fontWeight: 'bold',
        marginRight: 8,
    },
    divider: {
        borderRightWidth: 1,
        borderRightColor: '#ddd',
    },
    animatedBorder: {
        height: 8,
        width: 64,
        backgroundColor: 'tomato',
        borderRadius: 20,
    },
});

Совместимость с платформами

Android iOS Web
✅ ✅ ✅

Ссылки

Комментарии