react-native - react native 中的上下滑动动画
问题描述
我在本机反应中使用上下动画,但是动画只是从上到下滑动然后停在底部我想连续上下移动它。我也使用了动画循环,所以请检查并为我提供解决方案
import React, { useEffect, useState } from 'react'
import { Text, View, Animated, Easing, StyleSheet } from 'react-native'
import LoaderLogo from '../../icons/commonicons/LoaderLogo'
import { Loadericon } from '../../constants/Image';
import LinearGradient from 'react-native-linear-gradient';
import { dynamicSize } from '../sizechoose';
const amimationScreen = () => {
const startValue = new Animated.Value(0);
const endValue = dynamicSize(225);
const startValue2 = new Animated.Value(225);
const endValue2 = dynamicSize(0);
const duration = 5000;
useEffect(() => {
Animated.sequence([
Animated.timing(startValue, {
toValue: endValue,
duration: duration,
useNativeDriver: true,
}),
Animated.timing(startValue2, {
toValue: endValue2,
duration: duration,
useNativeDriver: true,
})
]).start()
}, [startValue, endValue, duration]);
return (
<Animated.View style={[{ transform: [{ translateY: startValue }] }]}>
<View style={{backgroundColor:'red',height:10,width:100}}>
</View>
</Animated.View>
)
}
export default amimationScreen
我也尝试使用 react-native-animatable 包,但它对我来说不好用,因为它从屏幕顶部开始动画。
解决方案
这对我有用:
const App = () => {
const animated = new Animated.Value(0);
const duration = 5000;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(animated, {
toValue: 255,
duration: duration,
useNativeDriver: true,
}),
Animated.timing(animated, {
toValue: 0,
duration: duration,
useNativeDriver: true,
}),
]),
).start();
}, []);
return (
<Animated.View style={[{transform: [{translateY: animated}]}]}>
<View style={{backgroundColor: 'red', height: 10, width: 100}}></View>
</Animated.View>
);
};
因此,与其创建两个Animated.Value
for translation 实例,不如创建一个并让它按顺序从0
to255
和255
back to转换。0
并在序列完成后使其循环。
我认为您原始方法中的主要问题是startValue
决定视图的转换方式,因为这是您作为translateY
. 因此,向下动画在您的示例中正确发生。然而,向上动画不会发生,因为在您的示例中startValue2
被传递给Animated.timing
并且startValue
不用于翻译任何视图。
推荐阅读
- vba - 使用 Workspace.openDatabase 上的 Jet 语句的 Visual Basic 语句出错
- javascript - 订购带有时间和点的帖子(如reddit)firestore
- python - 读取 Pcap 并将其写入 csv 文件 python
- visual-studio-2019 - windows 10中windbg Preview的位置是什么?以及如何在visual studio 2019中重命名项目名称?
- tensorflow - LSTM:通过输入输出值进行反转以得到输入值
- c++ - 使用 Lamba 函数初始化 constexpr
- 3d - 如何使用鼠标协调在 godot 中移动 3D 对象?
- amazon-web-services - 使用 aws cli 为 SQS 添加发送消息权限
- python - Discord.py 机器人不会连接到语音通道
- php - Apache:如何添加到虚拟主机的路径