. оживить с кривой

Question

Сначала взгляните:

Кошка должна перейти к x по кривой .(см. стрелку)

Когда кошка нажимает на x, она должна оставаться 10 секунд, и после этого кошка должна вернуться к o, снова по кривой и повторить.

Iпопробовал это с этим кодом:

function curve() {
    $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() {
        $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() {
            curve();
        });
    });
}

curve();

Но кошка движется так:

Есть ли способ заставить кошку двигаться в этомвид кривой?

Answer 1

Вы можете использовать замедление для достижения этого, выполняя сложное движение:

function curve () {
    $('#cat').delay(10000).animate({top: "+=20px", left: "+=20px"}, {
      duration: 500, 
      specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'}, 
      complete: function () { 
        $('#cat').animate({top: "-=20px", left: "+=20px"}, {
          duration: 500, 
          specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'},
          complete: function() {
            // repeat the other way around.
          }});
      }
    });
}

Работает с jQuery 1.4, в соответствии с jQuery docs и упомянутыми упрощениями требуется пользовательский интерфейс jQuery (но только модуль Effect Core ). Каждый вызов .animate() составляет четверть пути полного круга, а обратное easeInQuad против easeOutQuad делает путь похожим на круговой путь вместо прямой к новой позиции.

Answer 2

http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

Нашел это, прибегая к помощи "jquery radial motion"

Answer 3

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