Как повторить анимацию в react-spring?
Я застрял на моменте смещения с поворотом, почему-то не работает transformOrigin, как мне кажется:
import {Button, Text, View} from 'react-native'; import {useSpring, animated, easings, useSpringValue} from '@react-spring/native'; import {Svg, Circle} from 'react-native-svg'; const AnimatedCircle = animated(Circle); const AnimatedText = animated(Text); export default function App() { const [rotate, rotateApi] = useSpring(() => ({ rotate: "0deg", transformOrigin: '50% 50%', config: { duration: 1000, easing: easings.linear, }, }), []); const [line2, apiLine2] = useSpring(() => ({ x: 75, y: 75, transformOrigin: '50% 50%', loop: true, config: { duration: 1000, easing: easings.linear } }), []); const handleClick = () => { rotateApi.start({ from: { rotate: "0deg", transformOrigin: '50% 50%', }, to: { rotate: "360deg", transformOrigin: '50% 50%', }, // loop: true, }); apiLine2.start({ from: { x: 75, y: 75, transformOrigin: '50% 50%', }, to: { x: 105, y: 75, transformOrigin: '50% 50%', }, }); } return ( <View> <Svg style={[{ width: '150px', height: '150px', }]} viewBox={'0 0 150 150'}> <AnimatedCircle x="75" y="75" r="30" fill='none' stroke='rgb(185, 64, 188)' strokeWidth="20" strokeDasharray='40.4, 19.4, 48.6, 20, 40, 20' style={{ transform: [{rotate: rotate.rotate}], }}/> <AnimatedCircle x={105} y={105} r="30" fill='none' stroke='rgb(121, 36, 122)' strokeWidth="20" strokeDasharray='0, 168.4, 20, 0' style={{ transform: [{rotate: rotate.rotate}], transformOrigin: '50% 50%', }}/> </Svg> <Button title={'Animate'} onPress={handleClick} /> </View> ); } |
import {Button, Text, View} from 'react-native'; import {useSpring, animated, easings, useSpringValue} from '@react-spring/native'; import {Svg, Circle} from 'react-native-svg'; const AnimatedCircle = animated(Circle); const AnimatedText = animated(Text); export default function App() { const [rotate, rotateApi] = useSpring(() => ({ rotate: "0deg", transformOrigin: '50% 50%', config: { duration: 1000, easing: easings.linear, }, }), []); const [line2, apiLine2] = useSpring(() => ({ x: 75, y: 75, transformOrigin: '50% 50%', loop: true, config: { duration: 1000, easing: easings.linear } }), []); const handleClick = () => { rotateApi.start({ from: { rotate: "0deg", transformOrigin: '50% 50%', }, to: { rotate: "360deg", transformOrigin: '50% 50%', }, // loop: true, }); apiLine2.start({ from: { x: 75, y: 75, transformOrigin: '50% 50%', }, to: { x: 105, y: 75, transformOrigin: '50% 50%', }, }); } return ( <View> <Svg style={[{ width: '150px', height: '150px', }]} viewBox={'0 0 150 150'}> <AnimatedCircle x="75" y="75" r="30" fill='none' stroke='rgb(185, 64, 188)' strokeWidth="20" strokeDasharray='40.4, 19.4, 48.6, 20, 40, 20' style={{ transform: [{rotate: rotate.rotate}], }}/> <AnimatedCircle x={105} y={105} r="30" fill='none' stroke='rgb(121, 36, 122)' strokeWidth="20" strokeDasharray='0, 168.4, 20, 0' style={{ transform: [{rotate: rotate.rotate}], transformOrigin: '50% 50%', }}/> </Svg> <Button title={'Animate'} onPress={handleClick} /> </View> ); }
Я попытался загрузить на expo go snack - не получилось, не знаю как это запустить, изучаю пару дней как.
Оригинальная анимация с scss:
snippet
.loader .line-2 { cx: $size; cy: $size; r: $radius; fill: none; stroke: rgb(121, 36, 122); stroke-width: $stroke-size; stroke-dasharray: 0, 168.4, 20, 0; animation: resizeRightSide $pieces-duration linear infinite, rotate $pieces-rotation-duration linear infinite $pieces-rotation-delay; transform-origin: 50% 50%; } |
.loader .line-2 { cx: $size; cy: $size; r: $radius; fill: none; stroke: rgb(121, 36, 122); stroke-width: $stroke-size; stroke-dasharray: 0, 168.4, 20, 0; animation: resizeRightSide $pieces-duration linear infinite, rotate $pieces-rotation-duration linear infinite $pieces-rotation-delay; transform-origin: 50% 50%; }
Если закомментировать трансформацию получается примерно тот-же эффект что я получаю в react-native, я понимаю что я его получаю потому-что смещаю элемент по x, y и мне нужен эффект как на фидле, он смещается и вращается по большему радиусу, возможно здесь нужен другой подход.
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для повторения анимации в react-spring вы можете использовать хук useTransition. Этот хук позволяет вам определить набор элементов, которые вы хотите анимировать, и определить, как они должны анимироваться.
Прежде всего, убедитесь, что у вас установлен react-spring. Вы можете установить его с помощью npm или yarn:
npm install react-spring
или
yarn add react-spring
Затем вы можете использовать хук useTransition в вашем компоненте. Вот пример:
import { useTransition, animated } from 'react-spring'; const items = [{ key: 1, text: 'Item 1' }, { key: 2, text: 'Item 2' }]; const AnimatedList = () => { const transitions = useTransition(items, item => item.key, { from: { opacity: 0 }, enter: { opacity: 1 }, leave: { opacity: 0 }, }); return ( <div> {transitions.map(({ item, key, props }) => ( {item.text} ))} </div> ); }; export default AnimatedList;
В этом примере у нас есть массив items, который мы хотим анимировать. Мы используем хук useTransition, чтобы определить, как элементы должны появляться и исчезать. Затем мы отображаем каждый элемент с помощью компонента animated.div, который автоматически применяет анимацию.
Вы можете настраивать анимацию, изменяя значения from, enter и leave в объекте конфигурации useTransition. Таким образом, вы можете легко создавать различные виды анимаций для ваших элементов в react-spring.