【发布时间】：2019-05-01 01:39:37
【问题描述】：
我正在使用 React/Redux 并将动画数据存储在 JSON 中并试图让它显示在 React 页面上。
我正在使用setTimeout（用于暂停）和setInterval（用于动画移动）。但是，我似乎无法理解如何正确实现动画，并认为我正在以完全错误的方式处理事情。
JSON 数据：
"objects": [
{
"title": "puppy",
"image_set": [
{
"image": "images/puppy_sitting.png",
"startx": 520,
"starty": 28,
"pause": 1000
},
{
"image": "images/puppy_walking.png",
"startx": 520,
"starty": 28,
"endx": 1,
"endy": 1,
"time": 1000
},
{
"image": "images/puppy_crouching.png",
"startx": 1,
"starty": 1,
"endx": 500,
"endy": 400,
"time": 2000
}
]
},
{
"title": "scorpion",
"image_set": [
{
"image": "images/scorping_sleeping.png",
"startx": 100,
"starty": 400,
"pause": 5000
},
{
"image": "images/scorpion_walking.png",
"startx": 100,
"starty": 400,
"endx": 500,
"endy": 400,
"time": 7000
},
{
"image": "images/scorpion_walking.png",
"startx": 500,
"starty": 400,
"endx": 100,
"endy": 400,
"time": 2000
},
{
"image": "images/scorpion_walking.png",
"startx": 100,
"starty": 400,
"endx": 200,
"endy": 400,
"time": 7000
},
{
"image": "images/scorpion_walking.png",
"startx": 200,
"starty": 400,
"endx": 100,
"endy": 400,
"time": 1000
}
]
}
]
每个对象可以有多个与之相关的图像。动画将继续不停地重复。每个对象都应该与其他每个对象同时移动，这样我就可以创建一个由各种动物和对象围绕它移动的场景。
动画代码：
我很确定我在这里叫错了树，但我的代码看起来像这样：
// image_set is the list of images for a specific object
// object_num is the array index corresponding to the JSON objects array
// selected is the array index corresponding to which image in the image_set will be displayed
runAnimation(image_set, object_num, selected){
// Uses prevState so that we keep state immutable
this.setState(prevState => {
let images = [...prevState.images];
if (!images[object_num]){
images.push({image: null, x: 0, y: 0})
}
images[object_num].image = image_set[selected].image;
images[object_num].x = this.getFactoredX(image_set[selected].startx);
images[object_num].y = this.getFactoredY(image_set[selected].starty);
return {images: images};
})
if (image_set[selected].endx && image_set[selected].endy && image_set[selected].time){
let x = this.getFactoredX(image_set[selected].startx)
let y = this.getFactoredY(image_set[selected].starty)
let startx = x
let starty = y
let endx = this.getFactoredX(image_set[selected].endx)
let endy = this.getFactoredY(image_set[selected].endy)
let time = image_set[selected].time
let x_increment = (endx - x) / (time / 50)
let y_increment = (endy - y) / (time / 50)
let int = setInterval(function(){
x += x_increment
y += y_increment
if (x > endx || y > endy){
clearInterval(int)
}
this.setState(prevState => {
let images = [...prevState.images]
if (images[object_num]){
images[object_num].x = x
images[object_num].y = y
}
return {images: images};
})
}.bind(this),
50
)
}
if (image_set[selected].pause && image_set[selected].pause > 0){
selected++
if (selected == image_set.length){
selected = 0
}
setTimeout(function() {
this.runAnimation(image_set, object_num, selected)
}.bind(this),
image_set[selected].pause
)
}
else {
selected++
if (selected == image_set.length){
selected = 0
}
setTimeout(function() {
this.runAnimation(image_set, object_num, selected)
}.bind(this),
50
)
}
}
Redux 和 this.props.data
Redux 将数据作为道具引入。所以，我有一个从我的 componentDidMount 和 componentWillReceiveProps 函数调用的函数，它将原始图像集传递给 loadAnimationFunction。
我的渲染（）
在我的render() 函数中，我有这样的东西：
if (this.state.images.length > 1){
animated = this.state.images.map((image, i) => {
let x_coord = image.x
let y_coord = image.y
return (
<div key={i} style={{transform: "scale(" + this.state.x_factor + ")", transformOrigin: "top left", position: "absolute", left: x_coord, top: y_coord}}>
<img src={`/api/get_image.php?image=${image.image}`} />
</div>
)
})
}
x_factor / y_factor
在我的代码中，还提到了 x 和 y 因子。这是因为动画出现的背景可能会变小或变大。因此，我还缩放每个动画的开始和结束 x/y 坐标的位置，以及缩放动画图像本身。
时间和暂停时间
时间表示动画应该花费的时间，以毫秒为单位。暂停时间表示在移动到下一个动画之前暂停多长时间。
问题
代码不能流畅地移动动画，它们似乎偶尔会跳来跳去。
此外，当我在页面上的任意位置单击鼠标时，它会导致动画跳转到另一个位置。为什么点击鼠标会影响动画？
我注意到的一件事是，如果我打开控制台进行调试，这确实会减慢动画速度。
我可以对我的代码执行哪些操作以使动画按预期工作？
【问题讨论】：
标签： javascript reactjs animation redux