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

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

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

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

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

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

Вот другая попытка с помощью для цикла и метода задержки

$('#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]. Почему задержка не работает?

23
задан Justen 10 February 2010 в 20:35
поделиться

3 ответа

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

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

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

15
ответ дан 29 November 2019 в 01:38
поделиться

Плагин 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});
16
ответ дан 29 November 2019 в 01:38
поделиться

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

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

Для работы вам потребуется плагин облегчения: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

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

6
ответ дан 29 November 2019 в 01:38
поделиться
Другие вопросы по тегам:

Похожие вопросы: