如何基于json数据在Javascript中跨网页动画多个对象？

Question

我有一些json

{
    "user1": [{"distance": 1, "pace": 100 }, {"distance": 4, "pace": 120}, {"distance": 9, "pace": 110}],
    "user2": [{"distance": 1, "pace": 110 }, {"distance": 7, "pace": 130}, {"distance": 14, "pace": 140}],
}

总共有多达30个用户，每个用户最多有500个“框架”。

我想同时为每个用户设置一个图标（svg，png或css）的动画，以便所有30个用户都可以跨屏幕浏览。

我该如何做到这一点，理想情况下，它应能与react.js完美配合，因为我可能会使用它来处理屏幕上的其他内容。

或者，我可以纯粹在react.js和本地javascript中做到这一点吗？

Answer 1

基本上，您需要以状态存储进度（例如，自开始以来的毫秒数），并让每个人员组件根据数组和该数字确定其位置。 您可以执行以下操作：

componentDidMount: function(){
  var start = Date.now();
  var tick = function(){
    this.setState({time: Date.now() - start});
  };
  setInterval(tick.bind(this), 16);
},
render: function(){
  var people = this.props.people;
  return <div>{
    Object.keys(people).map(function(key){
      return <Person data={people[key]} time={this.state.time} key={key} />
    }.bind(this));
  }</div>
}