英文:
How to loop and reverse react-native animation
问题
在我的 Expo 应用中，有一张图片，我想要将其用作加载动画。我想要实现的动画是无限循环地将图像放大、缩小、再放大等，就像一个“脉动”一样。我正在使用 React Native 动画。
我尝试了循环两个动画（一个正向，一个反向），但没有成功。
我做错了什么？
以下是我的代码：
const scaleValue = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(Animated.timing(scaleValue, {
toValue: 0,
duration: 800,
useNativeDriver: true
}).start(() => {
Animated.timing(scaleValue, {
toValue: 1,
duration: 800,
useNativeDriver: true
}).start();
}));
}, []);
const interpolated = scaleValue.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
return (
<Animated.Image
style={[
{
width: 165,
height: 75,
transform: [{ scale: interpolated }],
},
]}
source={Logo}
</Animated.Image>
);
希望这对你有所帮助。
英文:
In my expo app have an image that i want to use for a loading animation. The animation i want to achieve is an infinite loop of scaling the image bigger, smaller, bigger etc. like a "pulse". I am using react native animation.
I have tried to loop two animations ( one forward and one reverse ) without any luck.
What am i doing wrong?
Here is my code:
const scaleValue = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(Animated.timing(scaleValue, {
toValue: 0,
duration: 800,
useNativeDriver: true
}).start(() => {
Animated.timing(scaleValue, {
toValue: 1,
duration: 800,
useNativeDriver: true
})
}))
}, []);
const interpolated = scaleValue.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
});
return (<Animated.Image
style={[
{
width: 165,
height: 75,
transform: [{scale: interpolated}],
},
]}
source={Logo}
></Animated.Image>)
答案1
得分: 2
你可以使用 sequence() 方法。
Animated.loop(
Animated.sequence([
Animated.timing(scaleValue, {
toValue: 0,
duration: 800,
useNativeDriver: true,
}),
Animated.timing(scaleValue, {
toValue: 1,
duration: 800,
useNativeDriver: true,
}),
]),
);
英文:
You can use sequence() method.
Animated.loop(
Animated.sequence([
Animated.timing(scaleValue, {
toValue: 0,
duration: 800,
useNativeDriver: true,
}),
Animated.timing(scaleValue, {
toValue: 1,
duration: 800,
useNativeDriver: true,
}),
]),
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论