录制时如何为进度条设置动画？

问题描述

我想对进度条进行动画处理，以显示剩余的录制时间，但无法执行

顶部的蓝色是我的进度条，其内部应有一个子视图，以显示进度。

下面是我编写的代码：

import React,{PureComponent} from 'react';
import {StyleSheet,Text,TouchableOpacity,View,Animated} from 'react-native';
import {RNCamera} from 'react-native-camera';
import Icon from 'react-native-vector-icons/Entypo';
import ImagePicker from 'react-native-image-crop-picker';
import Video from 'react-native-video';
let animation=new Animated.Value(0);

export default class Shoot extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      recording: false,processing: true,upload: false,galleryVideo: '',progress: '',video: '',};
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.upload == true && (
          <TouchableOpacity
            style={{
              backgroundColor: '#e75480',position: 'absolute',width: 80,height: 30,zIndex: 2,padding: 5,borderRadius: 5,right: 0,justifyContent: 'center',alignContent: 'center',}}
            onPress={() => this.props.navigation.navigate('Post',{key: 1})}>
            <Text style={{color: 'white',textAlign: 'center'}}>Next</Text>
          </TouchableOpacity>
        )}

        {this.state.upload == false && (
          <TouchableOpacity
            style={{
              position: 'absolute',bottom: 0,right: '15%',alignItems: 'center',}}
            onPress={this.video.bind(this)}>
            <Icon name="image" size={30} color="white" />
            <Text style={{color: 'white',fontWeight: 'bold'}}>Upload</Text>
          </TouchableOpacity>
        )}

        <TouchableOpacity
          onPress={this.take60sVideo.bind(this)}
          style={{
            width: 60,height: 60,left: '25%',}}>
          <Text style={{textAlign: 'center',color: 'red',fontSize: 15}}>
            60s
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={this.take15sVideo.bind(this)}
          style={{
            width: 60,left: '5%',fontSize: 15}}>
            15s
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={this.take30sVideo.bind(this)}
          style={styles.capture}></TouchableOpacity>
        {this.state.progress === true && (
          <View style={{borderColor: '#0000FF',borderWidth:1,width:'100%',height:15,top:0,position:'absolute',bottom:0,zIndex:2}}>
          <Animated.View style={[StyleSheet.absoluteFill],{backgroundColor: "#8bed4F",width:'50%' }}/>
          </View>
        )}
        {this.state.video == '' ? (
          <RNCamera
            ref={(ref) => {
              this.camera = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            androidCameraPermissionoptions={{
              title: 'Permission to use camera',message: 'We need your permission to use your camera',buttonPositive: 'Ok',buttonNegative: 'Cancel',}}
            androidRecordAudioPermissionoptions={{
              title: 'Permission to use audio recording',message: 'We need your permission to use your audio',}}
            captureAudio={true}
          />
        ) : (
          <Video
            source={{uri: this.state.video}}
            style={{
              position: 'absolute',top: 0,left: 0,alignItems: 'stretch',height: '90%',}}
            resizeMode="cover"
            repeat={true}
          />
        )}
      </View>
    );
  }
  video = () => {
    ImagePicker.openPicker({
      mediaType: 'video',}).then((video) => {
      this.setState({
        galleryVideo: 1,video: video.path,upload: true,});
    });
  };

  take30sVideo = async () => {
    if (this.camera) {
      try {
        const options = {
          quality: 2,videoBitrate: 8000000,maxDuration: 30,};
        const promise = this.camera.recordAsync(options);
        this.setState({progress:true})

        if (promise) {
          this.setState({recording: true});
          const data = await promise;
          this.setState({recording: false,});
          console.log(data);
          console.log('upload',this.state.upload);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
  take60sVideo = async () => {
    if (this.camera) {
      try {
        const options = {
          quality: 2,maxDuration: 60,};
        const promise = this.camera.recordAsync(options);
      
        if (promise) {
          this.setState({recording: true,upload: true});
          const data = await promise;
          this.setState({recording: false,});
          console.log(data);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
  take15sVideo = async () => {
    if (this.camera) {
      try {
        const options = {
          quality: 2,maxDuration: 15,};
        const promise = this.camera.recordAsync(options);
        if (promise) {
          this.setState({recording: true});
          const data = await promise;
          this.setState({recording: false,upload: true});
          console.log(data);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,flexDirection: 'column',backgroundColor: 'black',},preview: {
    height: '90%',justifyContent: 'flex-end',capture: {
    backgroundColor: '#e75480',borderRadius: 40,borderWidth: 3,borderColor: 'red',width: 60,left: '45%',});

在单击下面的捕获按钮时，将触发take30svideo（），在该窗口中，我将进度状态设置为true并显示进度条，但是正如我所说，我也希望动画效果随着时间的增加而动画，并在其停止时停止播放是30秒。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）