Question

我试图将Circular Progress模块包含在我的项目中。一切都运行良好，但当Fill值从100变为0时，Animated.spring / timing函数将退回。是否有任何想法让圆形进度条在达到终点时以起点刷新？

import React, { PropTypes } from 'react';
import { View, Animated } from 'react-native';
import CircularProgress from './CircularProgress';
const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);

export default class AnimatedCircularProgress extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      chartFillAnimation: new Animated.Value(props.prefill || 0)
    }
  }

  componentDidMount() {
    this.animateFill();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.fill !== this.props.fill) {
      this.animateFill();
    }
  }

  animateFill() {
    const { tension, friction } = this.props;

    Animated.spring(
      this.state.chartFillAnimation,
      {
        toValue: this.props.fill,
        tension,
        friction
      }
    ).start();
  }

  performLinearAnimation(toValue, duration) {
    Animated.timing(this.state.chartFillAnimation, {
      toValue: toValue,
      duration: duration
    }).start();
  }

  render() {
    const { fill, prefill, ...other } = this.props;

    return (
      <AnimatedProgress
        {...other}
        fill={this.state.chartFillAnimation}
        />
    )
  }
}

AnimatedCircularProgress.propTypes = {
  style: View.propTypes.style,
  size: PropTypes.number.isRequired,
  fill: PropTypes.number,
  prefill: PropTypes.number,
  width: PropTypes.number.isRequired,
  tintColor: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
  backgroundColor: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
  tension: PropTypes.number,
  friction: PropTypes.number
}

AnimatedCircularProgress.defaultProps = {
  tension: 7,
  friction: 10
};

Answer 1

.start()接受一个可选的回调，一旦动画结束就会调用它，这样你就可以递归调用你的动画：

animateFill() {
  const { tension, friction } = this.props;
  this.state.charFillAnimation.setValue(0); //reset to 0

  Animated.spring(
    this.state.chartFillAnimation,
    {
      toValue: this.props.fill,
      tension,
      friction
    }
  ).start(() => this.animateFill());
}

如何使用新的开始制作动画定时/弹簧刷新？

1 个答案: