React Native-如何有条件地开始另一个动画

Question

我想使用动画创建自己的加载器，我的想法是使用比例尺来处理它，因此步骤应类似于：

1. 第一次显示从（n）到1的图像比例
2. 检查条件是否被接受
3. 如果有条件接受，则显示的图像比例为1到（n）

我可以达到第一个条件，但是当我尝试第二个和第三个条件时，动画眨眼就开始了，

有人可以帮助我解决此问题吗？

这是我尝试过的代码：

//animation function
playAnimation(){
  this.setState({onLoad:true})
  this._load.setValue(0)
  this._scale.setValue(0)
  Animated.timing(this._load, {
    toValue: 100,
    useNativeDriver: true,
    duration:1000
  }).start(()=>{
    setTimeout(() => {
      Animated.timing(this._scale, {
        toValue: 100,
        useNativeDriver: true,
        duration:1000
      }).start(()=>this.setState({onLoad:false}));
    }, 2000);
  });

  onLoad = this._load.interpolate({
    inputRange: [0, 50, 75, 100],
    outputRange: [10, 1, 1.4, 1],
  })

  imageScale = this._scale.interpolate({
    inputRange: [20, 35, 70],
    outputRange: [1.2, 1, 20],
  })
}

//on render
<Animated.Image
  style={{
    resizeMode:'contain',
    position:'absolute',
    zIndex:1,
    width:width/2,
    height:200,
    transform:[{scale:this.state.onLoad?onLoad:imageScale}]
  }}
  source={{uri: "https://www.knittedhome.com/communities/5/004/012/872/235/images/4628207884.jpg"}}
/>

和结果：

Answer 1

您现在的代码工作方式在代码中的某个位置，您正在调用PlayAnimation()。

PlayAnimation()将：

1. 开始并完成第一个动画
2. 等待2秒
3. 开始并完成第二个动画

您在Animated.Image中所做的就是将转换设置为不同的值。这不会开始或停止动画，只是告诉Animated.Image要将转换设置为哪个值。

您应该做什么

使用一个Animated.Value来跟踪比例。将该值分配给Animated.Image转换。

编写两个动画功能：

1. scaleDown，在您当前调用PlayAnimation的地方调用它
2. scaleUp，请使用您的onLoad条件在渲染器或适当的位置执行此操作。