Я использую 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
}
]
}
]
Каждый объект может иметь несколько изображений, связанных с ними.Анимации будут повторяться без перерыва.Каждый объект должен двигаться одновременно с каждым из других объектов, чтобы я мог создать сцену из различных животных и движущихся вокруг него объектов.
Код анимации:
I 'Я почти уверен, что я лаю здесь не то дерево, но мой код выглядит примерно так:
// 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.
My render ()
В моем 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 factor.Это связано с тем, что фон, на котором появляются анимации, может масштабироваться меньше или больше.Поэтому я также масштабирую положение начальной и конечной координат x / y для каждой анимации, а также масштабирую сами анимированные изображения.
время и время паузы
Времяуказывает время в мс, которое должна занять анимация.Время паузы указывает длительность паузы в мс перед переходом к следующей анимации.
Проблема
Код не перемещает анимации плавно, и они, кажется, прыгаютспорадически.
Кроме того, когда я щелкаю мышью в любом месте страницы, анимация переходит в другую позицию.Почему нажатие мыши влияет на анимацию?
Я заметил одну вещь: если у меня открыта консоль для целей отладки, это действительно замедляет анимацию.
Что я могу сделатьв мой код, чтобы анимации работали как положено?