Создаем портфолио за 1 месяц
К концу месяца: 4 классных проекта в вашем портфолио! Стоимость: 100$. Подробности...
184 of 196 menu
◀ ▶

Метод elastic

Метод elastic класса Easing принимает число, которое задает силу колебания. Результат передают в easing у timing.

Синтаксис

easing: Easing.elastic(1)

Параметры

Параметр Описание
число Амплитуда пружины: большее значение дает сильнее колебание у цели.

Пример

Давайте увеличим блок с elastic:

import { useEffect, useRef } from 'react'; import { Animated, Easing, View, Text } from 'react-native'; export default function App() { const scale = useRef(new Animated.Value(0.3)).current; useEffect(() => { Animated.timing(scale, { toValue: 1, duration: 800, easing: Easing.elastic(1.2), useNativeDriver: true, }).start(); }, [scale]); return ( <Animated.View style={{ transform: [{ scale }] }}> <Text>abcde</Text> </Animated.View> ); }

На экране текст подрастает и слегка перекачивается вокруг полного размера.

Смотрите также

  • метод bounce,
    который дает отскок без числа
  • метод spring,
    который качает Value через tension
  • метод bezier,
    который строит кривую по точкам
  • класс Easing,
    где собраны все кривые
← →
↑
Мы используем cookie для работы сайта, аналитики и персонализации. Обработка данных происходит согласно Политике конфиденциальности.
принять все настроить отклонить