javascript - 平滑轨迹栏的移动，更新于 `onTimeUpdate`

Question

我有一个基本组件，其中包含视频、自定义进度栏和视频标签。剥离下来，它看起来像这样:

export default class Player extends Component {
  state = {
    position: 0,
    duration: 0,
  };

  onDurationChange = ({ target: { duration } }) => this.setState({ duration });

  onTimeUpdate = ({ target: { currentTime: position } }) => this.setState({ position });

  render() {
    const { src } = this.props;
    const { position, duration } = this.state;

    return (
      <div className={styles.container}>
        <ProgressBar progress={position / duration} />
        <video
          src={src}
          onTimeUpdate={this.onTimeUpdate}
          onDurationChange={this.onDurationChange}
        />
      </div>
    );
  }
}

但是，我遇到了一个问题，即时间更新的运行时间间隔有些“不一致”。我连接到 componentDidUpdate 并记录了以下间隔:

这使得 transition: width 1s Linear; 看起来不太正确。然而，我真的很想平滑这个进度条的移动。在 react 中推荐的方法是什么？

Answer 1

这是使用 react-motion 的解决方案动画，取 self 的react-jPlayer图书馆。

这假设进度将用于 width <Progress /> 中的 div 样式.

const currentProgressAbsolute = (position, duration) => 100 * (position / duration);

<Motion style={{ smoothProgress: spring(currentProgressAbsolute , [250]) }}>
  {values => <ProgressBar progress={values.smoothProgress} /> }
</Motion>