Question

我尝试使用以下组件：https://github.com/bgryszko/react-native-circular-progress。但似乎动画在组件渲染后立即开始，我想要做的只是在按下Icon并调用捕获后才启动动画。我试图模仿SnapChat视频录制的功能。另外，另一个问题是如何捕捉用户从按钮释放的事件，即停止录制。

＆＃13;

    capture = () => {
      if (this.state.filming) {
        this.refs.circularProgress.performAnimation(100, 30000);
        this.camera.recordAsync({maxDuration: 30}).then(data => {
          console.log(data);
        });
      }
    }
    
    render() {

            return (
                <View style={{ flex: 1 }}>
                    <Camera style={{ flex: 1, justifyContent: 'space-between' }} type={this.state.type}
                    ref={ref => {
                      this.camera = ref;
                    }}
                    >

                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 10, marginBottom: 15, alignItems: 'flex-end' }}>

                            <View style={{ alignItems: 'center' }}>
                                <MaterialCommunityIcons name="circle-outline" onPress={() => this.capture()}
                                    style={{ color: 'white', top:10, position: 'absolute', fontSize: 100, backgroundColor: 'transparent' }}
                                ></MaterialCommunityIcons>
                                <AnimatedCircularProgress
                                  ref='circularProgress'
                                  size={120}
                                  width={15}
                                  rotation={0}
                                  fill={this.state.spinValue}
                                  tintColor="red"
                                  style={{backgroundColor: 'transparent'}}
                                  onAnimationComplete={() => console.log('onAnimationComplete')}
                                >

                                </AnimatedCircularProgress>
                                {!this.state.filming && <MaterialCommunityIcons name="video" style={{ color: 'white', fontSize: 36, backgroundColor: 'transparent' }} onPress={() => this.setState({filming: !this.state.filming})}/>}
                                {this.state.filming && <MaterialCommunityIcons name="camera" style={{ color: 'white', fontSize: 36, backgroundColor: 'transparent' }} onPress={() => this.setState({filming: !this.state.filming})}/>}
                            </View>

                        </View>
                    </Camera>
                </View>
            )
    }

＆＃13;

我希望人们熟悉这个图书馆并能够以某种方式提供帮助。

我已经尝试了上面概述的方法并将其与此动画中的状态集一起使用：

＆＃13;

Animated.timing(
                  this.state.spinValue,
              {
                  toValue: 100,
                  duration: 2000,
              }
              ).start();

＆＃13;

我还应该提到几乎立即记录onAnimationCompletes。

由于

Answer 1

尝试在想要动画启动时调用此方法

this.refs.circularProgress.performLinearAnimation(100, 2000);

关于释放动作，请尝试onPressOut prop to touchableopacity

AnimatedCircularProgress动画在组件渲染时启动，而不是在单击按钮时启动。如何检测按钮的释放

1 个答案: