withTiming¶

withTiming позволяет создать анимацию на основе длительности и easing.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withTiming,
    withRepeat,
} from 'react-native-reanimated';

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

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

    React.useEffect(() => {
        offset.value = withRepeat(
            // highlight-next-line
            withTiming(-offset.value, { duration: 1500 }),
            -1,
            true
        );
    }, []);

    return (
        <View style={styles.container}>
            <Animated.View
                style={[styles.box, animatedStyles]}
            />
        </View>
    );
}

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

Определение¶

import { withTiming } from 'react-native-reanimated';

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

Типизация

type AnimatableValue = number | string | number[];

interface WithTimingConfig {
    duration?: number;
    easing?: EasingFunction;
}

function withTiming<T extends AnimatableValue>(
    toValue: T,
    config?: WithTimingConfig,
    callback?: (
        finished?: boolean,
        current?: AnimatableValue
    ) => void
): T;

Аргументы¶

`toValue`¶

Значение, при котором анимация придет в состояние покоя.

`config`¶

Конфигурация анимации синхронизации.

Доступные свойства:

Имя	Тип	По-умолчанию	Описание
`duration` (опционально)	`number`	`300`	Длина анимации (в миллисекундах).
`easing` (опционально)	`Easing`	`Easing.inOut(Easing.quad)`	Функция easing, определяющая кривую анимации.

`Easing`¶

Параметр easing позволяет точно настроить анимацию на заданную длительность. Например, можно сделать так, чтобы анимация начиналась с быстрого ускорения, а затем замедлялась к концу, или начиналась медленно, затем набирала скорость и снова замедлялась к концу.

Все это становится понятным, если сравнить линейное ослабление с ослаблением по умолчанию Easing.inOut(Easing.quad).

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withTiming,
    Easing,
    withRepeat,
} from 'react-native-reanimated';

const duration = 2000;

export default function App() {
    const defaultAnim = useSharedValue(200);
    const linear = useSharedValue(200);

    const animatedDefault = useAnimatedStyle(() => ({
        transform: [{ translateX: defaultAnim.value }],
    }));
    const animatedChanged = useAnimatedStyle(() => ({
        transform: [{ translateX: linear.value }],
    }));

    React.useEffect(() => {
        linear.value = withRepeat(
            // highlight-next-line
            withTiming(-linear.value, {
                duration,
                easing: Easing.linear,
            }),
            -1,
            true
        );
        defaultAnim.value = withRepeat(
            // highlight-next-line
            withTiming(-defaultAnim.value, {
                duration,
            }),
            -1,
            true
        );
    }, []);

    return (
        <View style={styles.container}>
            <Animated.View
                style={[styles.box, animatedDefault]}
            >
                <Text style={styles.text}>inout</Text>
            </Animated.View>
            <Animated.View
                style={[styles.box, animatedChanged]}
            >
                <Text style={styles.text}>linear</Text>
            </Animated.View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
    },
    box: {
        height: 80,
        width: 80,
        margin: 20,
        borderWidth: 1,
        borderColor: '#b58df1',
        borderRadius: 20,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: '#b58df1',
        textTransform: 'uppercase',
        fontWeight: 'bold',
    },
});

Reanimated предоставляет набор готовых к использованию функций смягчения в модуле Easing. Визуализацию некоторых распространенных функций смягчения можно найти на сайте http://easings.net/.

Вы можете использовать наши встроенные функции смягчения, передавая их в качестве свойства easing в конфигурацию withTiming:

import { Easing } from 'react-native-reanimated';

withTiming(sv.value, {
    easing: Easing.bounce,
});

Доступные функции:

back обеспечивает простую анимацию, при которой объект перед движением вперед немного отходит назад.
bezier(x1: number, y1: number, x2: number, y2: number) обеспечивает создание кубической кривой Безье
bounce обеспечивает анимацию подпрыгивания
circle предоставляет круговую функцию
cubic - кубическая функция
ease обеспечивает простую инерционную анимацию
elastic(bounciness?: number) обеспечивает простое пружинное взаимодействие
exp предоставляет экспоненциальную функцию
linear обеспечивает линейную функцию
poly(n: number) может быть использована для реализации квартовых, квинтовых и других функций высших степеней
quad - квадратичная функция
sin - синусоидальная функция

Следующие помощники используются для модификации других функций easing.

in(easing: EasingFunction) запускает функцию ослабления вперед
inOut(easing: EasingFunction) делает любую смягчающую функцию симметричной
out(easing: EasingFunction) запускает функцию ослабления в обратном направлении

`callback`¶

Функция, вызываемая по завершении анимации. Если анимация отменена, то в качестве аргумента обратного вызова будет получено false, в противном случае - true.

Возвращает¶

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

Пример¶

import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Pressable,
} from 'react-native';
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withTiming,
} from 'react-native-reanimated';

const TAB_WIDTH = 150;
const TABS = ['Home', 'Search', 'Profile'];

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

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

    const handlePress = (tab) => {
        const newOffset = (() => {
            switch (tab) {
                case 'Home':
                    return -TAB_WIDTH;
                case 'Search':
                    return 0;
                case 'Profile':
                    return TAB_WIDTH;
                default:
                    return -TAB_WIDTH;
            }
        })();

        offset.value = withTiming(newOffset);
    };

    return (
        <View style={styles.container}>
            <View style={styles.tabs}>
                {TABS.map((tab, i) => (
                    <Pressable
                        key={tab}
                        style={
                            i !== TABS.length - 1
                                ? [
                                      styles.tab,
                                      styles.divider,
                                  ]
                                : styles.tab
                        }
                        onPress={() => handlePress(tab)}
                    >
                        <Text style={styles.tabLabel}>
                            {tab}
                        </Text>
                    </Pressable>
                ))}
            </View>
            <Animated.View
                style={[
                    styles.animatedBorder,
                    animatedStyles,
                ]}
            />
        </View>
    );
}

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

Замечания¶

Обратный вызов, переданный в 3-м аргументе, автоматически workletized и запускается на UI thread.

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

Android	iOS	Web
✅	✅	✅

Ссылки¶

withTiming