React Native Lottie - при окончании анимации в обратном порядке
Контекст
Я новичок в Lottie-react-native, и мне удалось реализовать свою первую анимацию:
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
loop: true
}
}
componentDidMount() {
this.animation.play();
}
render() {
const { progress, loop } = this.state;
return (
<View style = {{display:'flex',height:'auto', alignItems: 'center',justifyContent:'center'}}>
<LottieView
ref = {animation => {
this.animation = animation;
}}
speed = {1}
autoPlay
source = {NOACTIVITY}
progress = {progress}
loop = {loop}
height = {300}
width = {300}
style = {{margin:0,}}
/>
</View>
)
}
Эта проблема
Теперь я пытаюсь создать цикл с этой анимацией, которая воспроизводит ее вперед, затем воспроизводит ее в обратном направлении, а затем снова запускает процесс.
Я провел небольшое исследование и пришел к выводу, что это должно быть выполнено с использованием анимированных значений и времени? Я нашел много примеров (в исходной документации React!) игры вперед и назад, но не вместе.
Можно ли это выполнить на смонтированном компоненте? или это должна быть отдельная функция?
Заранее спасибо!
Ответы 3
Итак, вы можете использовать Animated.loop () для this.state.progress, а затем менять скорость анимации на каждую итерацию.
AnimateFunction = () => {
Animated.loop(
Animated.timing(
this.state.progress,
{
toValue: 1,
duration: (your duration of anim),
easing: Easing.linear()
}
)
).start(
() => {
this.animation.setSpeed(this.animation.speed * -1);
}
);
}
а затем измените свой componentDidMount на:
componentDidMount() {
this.AnimateFunction();
}
Я не уверен без тестирования, но возможно, вам может потребоваться сбросить this.state.progress.setValue (0) одновременно с установкой скорости после каждого цикла. Имейте это в виду, если сначала это не сработает.
Хотя мне интересно узнать, есть ли у вас такая же проблема, как и у меня. Когда я зацикливаю анимацию лотереи в React Native, по какой-то причине они останавливаются между циклами ... в любом случае надеюсь, что это сработает для вас
Круто рад, что помогло! Документация болезненна для многих React Native, особенно когда вы уходите от базовых вещей. Я рекомендовал ослабление, потому что предположительно Animated.timing по умолчанию использует easyOut, но для большинства он не очень заметен.
Решение, которое я придумал, заключалось в использовании последовательности внутри цикла следующим образом:
AnimateFunction = () => {
Animated.loop(
Animated.sequence([
Animated.timing(
this.state.progress,
{
toValue: 1,
duration: (5000),
//easing: Easing.linear()
}
),
Animated.timing(
this.state.progress,
{
toValue: 0,
duration: (5000),
//easing: Easing.linear()
}
)
])
).start();
}
Я обнаружил, что добавление плавности заставило анимацию немного подскочить при перезапуске приложения с 0, поэтому на данный момент она закомментирована.
Лучшее и чистое решение
const defaultEvent = {
eventName: 'complete',
callback: () => {
alert("loopComplete")
/*Insert your handlers here*/
},
};
А затем на вашем компоненте Lottie:
<Lottie
options = {defaultOptions}
height = {400}
width = {400}
eventListeners = {[defaultEvent]}
/>
Вы можете использовать имена событий: complete, loopComplete, enterFrame, segmentStart, config_ready, data_ready, loaded_images, DOMLoaded, destroy.
(Edit) Я прочитал позже, что это для react-native, к сожалению, и прошу прощения, это решение react-js
Привет! Спасибо за это - я понятия не имел о функции цикла! Это было невероятно полезно. Я взял то, что вы мне дали, и изменил его, поэтому вместо установки скорости я выполняю .sequence () анимированного времени до 1, а затем секунды, которая возвращается к 0 внутри функции цикла.