React native 如何在react native中为一个组件设置两个marginBottom
我将通过animated.sequence运行动画，此动画中有两个具有不同值的marginBottom（对于一个组件），但忽略第二个marginBottom并始终运行第一个marginBottom。 如何为一个组件设置两个具有不同值的边距底部？这是主要代码： 我不能再设置marginBottom了 我怎样才能解决这个问题React native 如何在react native中为一个组件设置两个marginBottom,react-native,animation,margin,React Native,Animation,Margin,我将通过animated.sequence运行动画，此动画中有两个具有不同值的marginBottom（对于一个组件），但忽略第二个marginBottom并始终运行第一个marginBottom。 如何为一个组件设置两个具有不同值的边距底部？这是主要代码： 我不能再设置marginBottom了 我怎样才能解决这个问题 const ColorBox =()=>{ const BaseballValue=new Animated.Value(0); const Basebal
const ColorBox =()=>{
const BaseballValue=new Animated.Value(0);
const BaseballValue2=new Animated.Value(0);
const BaseballValue3=new Animated.Value(0);
const BallValue= new Animated.Value(0);
const VericalValue= new Animated.Value(0);
const HorizentalValue= new Animated.Value(0);
const FallingValue=new Animated.Value(0);
const LeftValue= new Animated.Value(0);
const ClimbingValue= new Animated.Value(0);
useEffect(()=>{
Animated.sequence([
Animated.timing(BaseballValue,{
toValue:1,
duration:500,
easing:Easing.ease
}),
Animated.timing(BaseballValue3,{
toValue:1,
duration:400,
easing:Easing.ease
}),
Animated.timing(BaseballValue2,{
toValue:1,
duration:400,
easing:Easing.ease
}),
Animated.loop(
Animated.sequence([
Animated.timing(BallValue,{
toValue:1,
duration:800,
}),
])
)
]).start();
Animated.sequence([
Animated.timing(VericalValue,{
toValue:1,
delay:1700
}),
Animated.timing(HorizentalValue,{
toValue:1,
}),
Animated.timing(FallingValue,{
toValue:1
}),
Animated.timing(LeftValue,{
toValue:1
}),
Animated.timing(ClimbingValue,{
toValue:1
}),
]).start();
})
const SpinBaseball=BaseballValue.interpolate({
inputRange:[0,1],
outputRange:['0deg','-90deg']
})
const BackwardBaseball=BaseballValue3.interpolate({
inputRange:[0,1],
outputRange:[0,-30]
})
const MovingBaseball=BaseballValue2.interpolate({
inputRange:[0,1],
outputRange:[0,210]
})
const SpinBall=BallValue.interpolate({
inputRange:[0,1],
outputRange:['0deg','360deg']
})
const MovingverticalBall=VericalValue.interpolate({
inputRange:[0,1],
outputRange:[0,250]
})
const HorizentalMove=HorizentalValue.interpolate({
inputRange:[0,1],
outputRange:[0,300]
})
const FallingBall=FallingValue.interpolate({
inputRange:[0,1],
outputRange:[0,1150]
})
const LeftMove=LeftValue.interpolate({
inputRange:[0,1],
outputRange:[0,630]
})
const ClimbingObject=ClimbingValue.interpolate({
inputRange:[0,1],
outputRange:[0,-900]
})
return(
<View>
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Animated.Image
source={require('.././images/ball.png')}
style={{
...styles.ball,
transform:[{rotate:SpinBall}],
marginBottom:MovingverticalBall,
marginLeft:HorizentalMove,
marginTop:FallingBall,
marginRight:LeftMove,
}}
>
</Animated.Image>
</View>
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Animated.Image
source={require('.././images/baseball.png')}
style={{...styles.baseball, transform:[{rotate:SpinBaseball},{translateX:BackwardBaseball}, {translateX:MovingBaseball}]}}
>
</Animated.Image>
</View>
</View>
)
}
export default ColorBox;
const styles=StyleSheet.create({
ball:{
width:80,
height:80
},
baseball:{
width:250,
height:100,
}
})
const ColorBox=（）=>{
const BaseballValue=新的动画.Value（0）；
const BaseballValue2=新的动画.Value（0）；
const BaseballValue3=新的动画值（0）；
常量BallValue=新的动画值（0）；
const VericalValue=新的动画值（0）；
const HorizentalValue=新的动画.Value（0）；
const FallingValue=新的动画值（0）；
const LeftValue=新的动画值（0）；
常数爬升值=新的动画值（0）；
useffect（（）=>{
动画序列([
动画。计时（BaseballValue{
toValue:1，
持续时间：500，
放松，放松
}),
动画。计时（BaseballValue3{
toValue:1，
持续时间：400，
放松，放松
}),
动画。计时（BaseballValue2{
toValue:1，
持续时间：400，
放松，放松
}),
动画循环(
动画序列([
动画。计时（球值{
toValue:1，
持续时间：800，
}),
])
)
]).start（）；
动画序列([
动画。计时（VericalValue{
toValue:1，
延误：1700
}),
动画。计时（水平左值{
toValue:1，
}),
动画。计时（下降值{
toValue:1
}),
动画。计时（LeftValue{
toValue:1
}),
动画。计时（爬升值{
toValue:1
}),
]).start（）；
})
常量spinball=BaseballValue.interpolate({
输入范围：[0,1]，
输出范围：['0度'，'-90度']
})
常量backwardBarball=BaseballValue3.interpolate({
输入范围：[0,1]，
输出范围：[0，-30]
})
const movingBarball=BaseballValue2.interpolate({
输入范围：[0,1]，
输出范围：[0210]
})
常量SpinBall=BallValue.interpolate({
输入范围：[0,1]，
输出范围：['0deg'，'360deg']
})
const MovingverticalBall=VericalValue.interpole({
输入范围：[0,1]，
输出范围：[0250]
})
const HorizentalMove=HorizentalValue.interpolate({
输入范围：[0,1]，
输出范围：[0300]
})
常量FallingBall=FallingValue.interpolate({
输入范围：[0,1]，
输出范围：[01150]
})
常量LeftMove=LeftValue.interpolate({
输入范围：[0,1]，
输出范围：[0630]
})
常量爬升对象=爬升值.interpolate({
输入范围：[0,1]，
输出范围：[0，-900]
})
返回(
)
}
导出默认颜色框；
const styles=StyleSheet.create({
球：{
宽度：80，
身高：80
},
棒球：{
宽度：250，
身高：100，
}
})