如何基于json数据在Javascript中为网页上的多个对象设置动画？

我有一些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中完成吗

基本上，您需要将进度（例如，从开始算起的毫秒）存储在state中，并让每个person组件根据数组和该数字确定其位置。你可以这样做：

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

componentDidMount:function（）{
var start=Date.now（）；
var tick=函数（）{
this.setState（{time:Date.now（）-start}）；
};
设置间隔（勾选绑定（this），16）；
},
render:function（）{
var people=this.props.people；
返回{
对象。键（人）。映射（功能（键）{
回来
}.约束（这个）；
}
}

在StackOverflow，询问“最好的库来做这件事”的问题被认为是“离题”。嗯。。。如果您使用的是react.js。。。那就排除了大多数动画库。。。因此，您必须自己实现它……它可以像在react渲染代码中添加函数调用（这将更新用户的位置）一样简单。如果你知道。。。那应该是小菜一碟了。只需一次又一次地强制重新渲染。