我做了一些可重用的动画代码。它工作得很好,但我不确定是否有可能让动画回到原来的值后,一个按钮很容易按下。
我能想到的唯一方法是使用useShared Values来存储所有的前后值,并根据需要设置它们,但这将涉及很多值,但因为动画已经运行,必须有一种方法,只是把它们带回到原来的开始?
我用于动画的代码是:-
EntryAnimation.js
import React, { useEffect } from 'react';
import Animated, {
useAnimatedStyle,
useSharedValue,
useDerivedValue,
interpolate,
withDelay,
withTiming,
withSpring,
Easing,
} from 'react-native-reanimated';
export const EntryAnimation = ({
children,
index,
rotateV,
scaleV,
offsetXV,
offsetYX,
}) => {
const play = useSharedValue(play);
const progress = useDerivedValue(() => {
return play.value
? withDelay(50 * (index ?? 0), withSpring(1, { duration: 350 }))
: 0;
});
useEffect(() => {
play.value = play;
}, []);
const animatedStyle = useAnimatedStyle(() => {
// const opacity = interpolate(progress.value, [0, 1], [0, 1]);
const translateY = interpolate(progress.value, [0, 1], [0, offsetYX]);
const translateX = interpolate(progress.value, [0, 1], [0, offsetXV]);
const rotate = interpolate(progress.value, [0, 1], [0, rotateV]);
const scale = interpolate(progress.value, [0, 1], [1, scaleV]);
return {
transform: [{ translateY }, { translateX }, { rotate }, { scale }],
};
});
return <Animated.View style={animatedStyle}>{children}</Animated.View>;
};
字符串
为了在主代码中使用元素,我用途:
<EntryAnimation
index={1}
rotateV={0}
scaleV={0.8}
offsetXV={0}
offsetYX={-270}>
<Animated.Image
source={{ uri: item.poster }}
style={[styles.posterImage, { zIndex: 6 }]}
/>
</EntryAnimation>
型
我试过使用下面的代码,但因为它在三元语句中,我得到了错误?
{animStarted ? (
<EntryAnimation
index={1}
rotateV={0}
scaleV={0.8}
offsetXV={0}
offsetYX={-270}
>
) : (
<EntryAnimation
index={1}
rotateV={0}
scaleV={1}
offsetXV={0}
offsetYX={0}
>
)}
型
有什么想法吗
1条答案
按热度按时间twh00eeo1#
您可以使用
withSequence
简单地处理此行为,这样您就可以重置样式。考虑到您的代码,它可能是这样的:
字符串
基本上,此功能的工作原理如下:* 考虑offsetXV值为50*
第一个序列
withTiming(-offsetXV, { duration: 350 })
translateX
在350 ms之后将是**-50**第二序列
withRepeat(withTiming(offsetXV, { duration: 350 }), 4, true)
x 1 m4n1x将从**-50递增到50**,然后递减到**-50四次最后一个序列
withTiming(0 ,{duration: 0 })
,该序列将translateX
重置为0**而这一点也适用于其他任何风格