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

cancelAnimation

cancelAnimation позволяет отменить запущенную анимацию, сопряженную с shared value.

Описание

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { cancelAnimation } from 'react-native-reanimated';

function App() {
    const offset = useSharedValue(100);

    const handleCancel = () => {
        // highlight-next-line
        cancelAnimation(offset);
    };
}

Типизация

1
2
3
4
5
type SharedValue<T> = { value: T };

function cancelAnimation<T>(
    sharedValue: SharedValue<T>
): void;

Аргументы

sharedValue

Общее значение запущенной анимации, которую необходимо отменить. Если анимация не запущена, функция cancelAnimation ничего не делает.

Возвращает

Функция cancelAnimation возвращает значение undefined.

Пример

 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
import React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withTiming,
    withRepeat,
    cancelAnimation,
} from 'react-native-reanimated';

const OFFSET = 200;

export default function App() {
    const offset = useSharedValue(OFFSET);

    const animatedStyles = useAnimatedStyle(() => ({
        transform: [{ translateX: offset.value }],
    }));

    const startAnimation = () => {
        offset.value = withRepeat(
            withTiming(
                offset.value > 0 ? -OFFSET : OFFSET,
                { duration: 1500 }
            ),
            -1,
            true
        );
    };

    React.useEffect(() => {
        startAnimation();
    }, []);

    const handleCancelAnimation = () => {
        // highlight-next-line
        cancelAnimation(offset);
    };

    return (
        <View style={styles.container}>
            <Animated.View
                style={[styles.box, animatedStyles]}
            />
            <View style={styles.row}>
                <Button
                    title="Cancel animation"
                    onPress={handleCancelAnimation}
                />
                <Button
                    title="Start animation"
                    onPress={startAnimation}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
    },
    box: {
        height: 120,
        width: 120,
        backgroundColor: '#b58df1',
        borderRadius: 20,
        marginBottom: 30,
    },
    row: {
        flexDirection: 'row',
        gap: 10,
    },
});

Замечания

  • Вы можете возобновить анимацию, снова назначив ту же анимацию (например, withSpring, withTiming) общему значению.

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

Android iOS Web
✅ ✅ ✅

Ссылки

Комментарии