Краткое обсуждение некоторых мыслей о параболическом движении изображений в HTML5.

Объектам/картинкам свойственно двигаться по параболе или, точнее, по кривой Безье. Это обычное требование в разработке H5. Поэтому как быстро просчитать траекторию движения на основе эскиза — первая проблема, с которой сталкиваются разработчики. решать.

Обычно используемый размер эскиза проекта для разработки H5 здесь составляет 640 * 1008, поэтому идея решения, основанная на этом размере, следующая:

1. Сначала экспортируйте перемещаемый элемент в PS отдельно в png. Если в эскизе проекта был запланирован маршрут перемещения, вам также необходимо экспортировать маршрут в png;

2. Создайте новый файл в AI того же размера, что и эскиз проекта, а затем дважды перетащите элемент смещения в файл. Если есть маршрут движения, также перетащите его, как показано ниже:

Здесь необходимо отметить размещение изображения смещения. Начальная и конечная точки пути должны соответствовать движущейся точке изображения. Соответствующие ситуации следующие:

1. В холсте нет обработки деформации, поэтому движущейся точкой является левый верхний угол изображения.
2. В холсте изображение было переведено и перемещено, поскольку dx и dy в drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) добавляются на основе x1 и y1 в Translate(x1, y1). окончательное смещение.
3. Если элемент позиционируется с помощью Position:absolute, а позиция контролируется трансляцией3d(x, y, z) в преобразовании, смещение должно быть x, y. Обычно в преобразовании мы можем имитировать левое, верхнее и дополнительное поля, чтобы контролировать. положение элемента, добавьте в преобразование дополнительный Translate3D(marginLeftX, MarginLeftY, 0). Значение этого поля также необходимо учитывать.

3. В AI используйте клавиши Ctrl + R, чтобы вытянуть опорную линию, и переместите изображение элемента, чтобы вытащить его позиции x и y, как показано на рисунке ниже:

Затем выберите инструмент «Перо» и щелкните в начальной и конечной точках. Не отпускайте мышь после щелчка по конечной точке. Перетащите AI напрямую, и он автоматически добавит 2 контрольные точки. Перемещая мышь, вы можете настроить ее. положение двух контрольных точек для настройки пера Целью пути, созданного инструментом, является то, пока он не будет соответствовать пути опорной линии на чертеже проекта, как показано ниже:

После перетаскивания в нужное положение отпустите мышь и нажмите Enter на клавиатуре, чтобы подтвердить путь. Если намеченный путь не тот, который вам нужен, вы можете продолжить перетаскивание контрольных точек, чтобы внести изменения.

4. После завершения корректировки перетащите две дополнительные опорные линии в положение контрольной точки 1, затем откройте информационную панель через строку меню – окно – информация и измените начальную точку, контрольную точку, конечную точку и три точки. соответственно вынь координаты.

5. Рассчитайте разницу пикселей контрольной точки, конечной точки и начальной точки соответственно, и вычислите реальную координаты контрольной точки и конечной точки на основе реальных значений координат x, y и разницы пикселей изображения, которое необходимо сместить в H5. Затем объедините эти три координаты. Нажмите «Применить» к формуле.