Ответ 1

Вы пытаетесь анимировать свой элемент, используя setInterval делая setState из координат и с absolute позицией. Все это не может достичь высокой производительности.

Во-первых, setInterval никогда не должен использоваться для анимации, и вы должны предпочесть requestAnimationFrame, так как он позволит анимацию со скоростью 60 кадров в секунду, так как анимация будет запущена до следующей перерисовки браузера.

Во-вторых, выполнение setState приведет к повторной визуализации всего компонента, что потенциально может повлиять на время рендеринга, поскольку я предполагаю, что ваш компонент не отображает только ваши изображения. Вы должны стараться избегать повторного рендеринга вещей, которые не изменились, поэтому постарайтесь изолировать ваши изображения для анимации.

Наконец, когда вы позиционируете свой элемент с left и top свойствами, но вы должны придерживаться этого, позиционируя, а не анимируя, так как браузер будет делать анимацию попиксельно и не сможет создавать хорошие характеристики. Вместо этого вы должны использовать CSS translate(), так как он может выполнять вычисления на уровне субпикселей и вместо этого будет работать на графическом процессоре, позволяя достигать анимации 60 кадров в секунду. На это есть хорошая статья Пола Айриша.

Тем не менее, вы, вероятно, должны использовать реагирующее движение, которое позволит вам плавную анимацию:

import { Motion, spring } from 'react-motion'

<Motion defaultStyle={{ x: 0 }} style={{ x: spring(image.x), y: spring(image.y) }}>
  {({ x, y }) => (
    <div style={{
       transform: 'translate(${x}px, ${y}px)'
    }}>
      <img src={'/api/get_image.php?image=${image.image}'} />
    </div>
  )}
</Motion>

Существует также React Transition Group, Transition может перемещать ваши элементы с помощью анимации translate как описано выше. Вы также должны взглянуть на документы по анимации реакции здесь.

Также стоит попробовать React Pose, который довольно прост в использовании и также хорошо работает с чистым API. Вот начальная страница React.

Вот краткая демонстрация с использованием вашей концепции с циклом сидя/ходьбы/бега. Обратите внимание, что реакция-движение - единственная, которая обрабатывает переход между кадрами без жесткого кодирования продолжительности перехода, которая будет идти против плавного пользовательского интерфейса, состояние только обрабатывает прохождение различных этапов.

Цитирую Readme:

В 95% случаев использования компонентов анимации нам не нужно прибегать к использованию жестко закодированных кривых замедления и продолжительности. Установите жесткость и демпфирование для вашего элемента пользовательского интерфейса, и пусть магия физики позаботится обо всем остальном. Таким образом, вам не нужно беспокоиться о мелких ситуациях, таких как прерывание анимации. Это также значительно упрощает API.

Если вас не устраивает пружина по умолчанию, вы можете изменить параметры dampling и stiffness. Есть приложение, которое может помочь вам получить то, что удовлетворяет вас больше всего.

Source

Ответ 2

Реакт не предназначен для анимации. Я не говорю, что вы не можете анимировать реагирующие компоненты, но это не часть проблемной области, которую пытается реагировать. То, что он делает, это предоставить вам хорошую структуру, чтобы несколько частей пользовательского интерфейса взаимодействовали друг с другом. Т.е. при создании игры, например, вы будете использовать реакцию и сокращение для создания и управления экранами, кнопками и т.д., Однако сама игра будет содержаться отдельно и не использовать реакцию.

Просто длинный способ сказать, что если вы хотите использовать анимацию, реакция будет недостаточной, лучше использовать что-то вроде библиотеки анимации грейзеров: https://greensock.com/ Они предоставляют учебник о том, как использовать его в сочетании с реагировать: https://greensock.com/react

Ответ 3

Я подхожу к этому под другим углом: анимации, которые есть в вашем образце, очень легко выразить с помощью css transition, transition-delay и transform. Я приложил бы свои усилия для преобразования JSON в css (используя решение cssInJs, которое позволяет генерировать классы на лету) и применил эти классы к изображениям.

как-то так (рабочий пример с вашим примером JSON): https://stackblitz.com/edit/react-animate-json

const App = () =>
  <div>
    {objects.map(object =>
      <Item item={object} />)
    }
  </div>

Item.js:

class Item extends React.Component {
  state = { selected: 0, classNames: {} }
  componentDidMount() {
    this.nextImage();
    this.generateClassNames();
  }

  generateClassNames = () => {
    const stylesArray = this.props.item.image_set.flatMap((image, index) => {
      const { startx, starty, endx = startx, endy = starty, time } = image;
      return [{
        ['image${index}_start']: {
          transform: 'translate(${startx}px,${starty}px)',
          transition: 'all ${time || 0}ms linear'
        }
      }, {
        ['image${index}_end']: { transform: 'translate(${endx}px,${endy}px)' }
      }]
    });

    const styles = stylesArray.reduce((res, style) => ({ ...res, ...style }), {})

    const { classes: classNames } = jss.createStyleSheet(styles).attach();
    this.setState({ classNames });
  }

  nextImage = async () => {
    const { image_set } = this.props.item;
    let currentImage = image_set[this.state.selected];
    await wait(currentImage.pause);
    await wait(currentImage.time);

    this.setState(({ selected }) =>
      ({ selected: (selected + 1) % image_set.length }), this.nextImage)
  }

  render() {
    const { selected, classNames } = this.state;
    const startClassName = classNames['image${selected}_start'];
    const endClassName = classNames['image${selected}_end'];
    return <img
      className={'${startClassName} ${endClassName}'}
      src={this.props.item.image_set[selected].image}
    />
  }
}

const wait = (ms) => new Promise(res => setTimeout(res, ms));

Ответ 4

О проблеме: "Код не перемещает анимацию гладко"

Проблема заключается в настройке времени, а именно в setTimeout и setInterval и времени в данных.

В вашем коде каждую секунду изображение перемещается слишком большой длины, поэтому изображение, кажется, периодически спотыкается.

Чтобы исправить это, добавьте настройку временного интервала следующим образом:

let int = setInterval(function(){}.bind(this),100)
setTimeout(function() {
     this.runAnimation(image_set, object_num, selected)
}.bind(this), 5000)

О проблеме: "консоль открыта для целей отладки"

Анимация в javascript будет занимать много воспоминаний. Утешение слишком большой информации также будет занимать воспоминания.

Другое предложение

Использование js-анимации фактически не является хорошим вариантом. Если ваша анимация не слишком сложна, анимация css лучше. Если ваша анимация будет намного сложнее в будущем, вы также можете попробовать другую стороннюю анимационную библиотеку, такую как React Motion, Velocity Реагировать и так далее.

Ответ 5

Я считаю, что ваша основная проблема заключается в том, как реагировать на React/Redux. React может объединить несколько запросов обновления, чтобы сделать рендеринг более эффективным. Без дальнейших диагностических мер, я предполагаю, что обработка состояния после setState будет просто слишком жестко реагировать.

Это решение должно было бы обновить вашу анимацию вне государственной системы, либо используя готовые рамки, либо просто самостоятельно заботясь о анимации; получить ссылку на элемент и обновить его вместо повторного рендеринга элемента при каждом обновлении состояния.

Ответ 6

не задумываясь о анимации в JS (здесь уже есть достоверные ответы), вы должны подумать о том, как вы визуализируете свои изображения:

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

Вы должны увидеть предупреждение при компиляции (или это было в документах?), Потому что вы используете индекс цикла как ключ. Это должно привести к тому, что объект изображения будет отображаться в разных div, так как добавляются и удаляются дополнительные изображения. Это особенно критично, если у вас есть эффект css-перехода на div. TL;DR: используйте какой-то идентификатор в качестве key вместо переменной i (может быть сгенерирован при создании анимации?) Также, если у вас есть переход css на div, вы должны удалить его, потому что вместе с изменениями из setInterval переход расчет не сможет идти в ногу с изменениями.