0

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

    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>
            )
    }

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

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

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

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

谢谢

4

1 回答 1

0

当您希望动画开始时尝试调用此方法

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

关于释放操作，请尝试使用 onPressOut 道具来触摸可不透明性

于 2018-03-12T01:32:57.963 回答