Как бы вы что-то оживили, чтобы он следовал кривой?

Если у меня есть <div id="curve" style="position:relative; height:100px; width:100px; />

Как мне заставить его двигаться по кривой? Я googled и все, но не могу найти другой пример, который бы сразу вызвал две функции. Это тот код, который я бы хотел, но не работает:

$('#curve').click(function () {
    $(this).animate(
        { 
            top: 400,
            left = $(this).left() + $(this).left()*$(this).left()
        },
        'slow',
        function() { $(this).animate( { left: 600 }, 'fast' ); }
    );
});

Даже если этот не правильный код, я считаю, что анимация требует только "пунктов назначения" для чего-то, что нужно сделать, поэтому динамическое назначение не будет работать, я думаю. Что я ищу, чтобы сделать эту работу?

EDIT:: Я обязательно подберу этот плагин, но мне также интересно, почему этот бит кода не работает, как я ожидал.

Здесь другая попытка использования цикла for и метода задержки

$('#curve').click(function () {
    for (var i=0; i<400; i++ )
    {
        $(this).delay(1000);
        $(this).css( { top: i, left: i*1.5 } );
    }
});

Кроме того, он мгновенно переходит к этой позиции, без задержки или чего-то еще. поэтому, если он начинался с [0,0], как только я нажимаю на него, он телепортируется в [400,600]. Почему задержка не работает?

Ответ 1

Я думаю, что на этот раз вам придется пересчитать анимированную часть кривой по частям в js, а затем сделать это, перемещаясь по маленьким частям (= вы, вероятно, можете найти плагин ИЛИ вам придется делать всю математику самостоятельно)

Изменить 2: ранее добавленная ссылка была перемещена = > http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/. Спасибо, Зак.

Edit 1: это заинтриговало меня, поэтому я сделал небольшое исследование Google - так же, как я думал: плагин готов к использованию здесь: http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/

Ответ 2

плагин jQuery.path - это то, что вы хотите:

Пример: анимировать вдоль дуги

var arc_params = {
    center: [285,185],  
    radius: 100,    
    start: 30,
    end: 200,
    dir: -1
};

$("my_elem").animate({path : new $.path.arc(arc_params)});

Пример: анимация вдоль синусоидальной волны

var SineWave = function() {
    this.css = function(p) {
        var s = Math.sin(p*20);
        var x = 500 - p * 300;
        var y = s * 50 + 150;
        var o = ((s+2)/4+0.1);
        return {top: y + "px", left: x + "px", opacity: o};
    } 
};

$("my_elem").animate({path : new SineWave});

Ответ 3

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

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

Вы можете отредактировать код и посмотреть изменение кривой/анимации, или отредактировать кривую и увидеть обновление кода.

В случае, если мой сайт не работает, вот соответствующий код для потомков:

function CurveAnimator(from,to,c1,c2){
  this.path = document.createElementNS('http://www.w3.org/2000/svg','path');
  if (!c1) c1 = from;
  if (!c2) c2 = to;
  this.path.setAttribute('d','M'+from.join(',')+'C'+c1.join(',')+' '+c2.join(',')+' '+to.join(','));
  this.updatePath();
  CurveAnimator.lastCreated = this;
}
CurveAnimator.prototype.animate = function(duration,callback,delay){
  var curveAnim = this;
  // TODO: Use requestAnimationFrame if a delay isn't passed
  if (!delay) delay = 1/40;
  clearInterval(curveAnim.animTimer);
  var startTime = new Date;
  curveAnim.animTimer = setInterval(function(){
    var elapsed = ((new Date)-startTime)/1000;
    var percent = elapsed/duration;
    if (percent>=1){
      percent = 1;
      clearInterval(curveAnim.animTimer);
    }
    var p1 = curveAnim.pointAt(percent-0.01),
        p2 = curveAnim.pointAt(percent+0.01);
    callback(curveAnim.pointAt(percent),Math.atan2(p2.y-p1.y,p2.x-p1.x)*180/Math.PI);
  },delay*1000);
};
CurveAnimator.prototype.stop = function(){
  clearInterval(this.animTimer);
};
CurveAnimator.prototype.pointAt = function(percent){
  return this.path.getPointAtLength(this.len*percent);
};
CurveAnimator.prototype.updatePath = function(){
  this.len = this.path.getTotalLength();
};
CurveAnimator.prototype.setStart = function(x,y){
  var M = this.path.pathSegList.getItem(0);
  M.x = x; M.y = y;
  this.updatePath();
  return this;
};
CurveAnimator.prototype.setEnd = function(x,y){
  var C = this.path.pathSegList.getItem(1);
  C.x = x; C.y = y;
  this.updatePath();
  return this;
};
CurveAnimator.prototype.setStartDirection = function(x,y){
  var C = this.path.pathSegList.getItem(1);
  C.x1 = x; C.y1 = y;
  this.updatePath();
  return this;
};
CurveAnimator.prototype.setEndDirection = function(x,y){
  var C = this.path.pathSegList.getItem(1);
  C.x2 = x; C.y2 = y;
  this.updatePath();
  return this;
};

Ответ 4

Используете ли вы jQuery 1.4?

$(this).animate({
    left: [500, 'easeInSine'],
    top: 500
});

Для этого вам понадобится плагин easing: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

например. http://jsbin.com/ofiye3/2

Ответ 5

Там крошечный script, просто для анимации, которая не находится в прямых линиях, называется pathAnimator

Он очень маленький и суперэффективен. и вам даже не нужен jQuery;)