Переместить div по изогнутой траектории (как анимация в старые времена Flash)?

Question

Я бы хотел создать такую ​​функцию, как

fromHeretoThere(x1,y1,x2,y2){
  //....
}

Чтобы я мог переместить <div> или изображение из одной точки на странице HTML в другую точку кривой.

Это возможно только с помощью Canvas? HTML5? любой плагин / сценарии, которые вы предлагаете?

Answer 1

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

http://phrogz.net/SVG/animation_on_a_curve.html

---

Я бы лично использовал SVG, что делает подобные вещи (анимация по произвольной кривой Безье) тривиальными с использованием элемента <animateMotion>. В качестве бонуса вы можете даже заставить его рассчитать вращение за вас. Некоторые примеры:

• http://www.w3.org/TR/SVG/images/animate/animMotion01.svg
• https://developer.mozilla.org/en/SVG/Element/animateMotion
• http://devfiles.myopera.com/articles/76/SolarSystem.svg

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

В качестве альтернативы (если вы не хотите вращение или хотите рассчитать его самостоятельно, контролируя скорость прохождения), вы можете создать SVG-путь и просто использовать getPointAtLength() / getTotalLength(), чтобы найти, где вы должны быть вдоль пути на заданном проценте от общего расстояния прохождения. При этом вам даже не нужен документ SVG:

// Moving along an S curve from 0,0 to 250,450
var p = document.createElementNS('http://www.w3.org/2000/svg','path');
p.setAttribute('d','M0,0 C350,20 -200,400 250,450');
var len = p.getTotalLength();
for (var i=0;i<=100;i+=10){
  var pct = i/100;
  var pt = p.getPointAtLength(pct*len);
  console.log( i, pt.x, pt.y );
}

// 0 0 0
// 10 65.54324340820312 10.656576156616211
// 20 117.17988586425781 49.639259338378906
// 30 120.2674789428711 114.92564392089844
// 40 100.49604034423828 178.4400177001953
// 50 78.06965637207031 241.1177520751953
// 60 63.526206970214844 305.9412841796875
// 70 74.59959411621094 370.6294860839844
// 80 122.1227798461914 415.8912658691406
// 90 184.41302490234375 438.8457336425781
// 100 250 450

Теперь все, что вам нужно сделать, это установить .style.top и .style.left вашего <div> или <img> соответственно. Единственная «трудная» часть - это решить, как вы хотите, чтобы кривая выглядела, и определить , куда поместить ручки .

Answer 2

иногда гуглить легче:

http://yuilibrary.com/yui/docs/anim/curve.html

Answer 3

Вы можете использовать как минимум:

• JavaScript (http://api.jquery.com/animate/)
• Переходы CSS3 (http://www.the -art-of-web.com / css / css-animation / )
• Холст (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)

CSS3, вероятно, самый простой, но JavaScript будет наиболее совместимым с браузером.

Вы также можете посмотреть на что-то вроде этого:

• http://jsanim.com/
• http://processingjs.org/

Что вы пытаетесь сделать?

Answer 4

Используя функцию шага jQuery animate, вы можете анимировать любую кривую, какую захотите.

Для некоторых вещей лучше использовать холст, но для большинства маленьких и простых анимаций просто измените значения css с помощью jQuery (эточто делает animate) быстрее и проще.

Вот небольшая демонстрация, которую я сделал, построенная поверх плагина jQuery.path: http://jsfiddle.net/zVddG/