Как можно было бы создать эффект «летающих обломков» с помощью jQuery? - PullRequest
Новая
       6

Как можно было бы создать эффект «летающих обломков» с помощью jQuery?

5 голосов
/ 09 ноября 2011

Я работаю над анимацией и использую библиотеку jQuery.

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

Вот мой метод до сих пор ... 

var parent = this.element.parent(),
    direction = this.element.position().left < parent.width() / 2 ? '-' : '+';

this.element.animate({
    left: direction + '=300',
    top: '-=200'
}, duration);

Это, очевидно, совсем не похоже на летящий мусор, так как он просто движется вверх идалеко.Переменная direction определяет направление полета элемента.Поскольку каждый элемент расположен относительно своего родителя, элементы с левой стороны перемещаются влево и наоборот.

Я бы не хотел реализовывать полноценный физический движок, такой как Box2D.

Я знаю, что должен делать мой код, и я верю, что это ...

  1. Поднимите элемент вверх (отрицательный top) и в направлении, указанном (отрицательный или положительный * 1022)*), с некоторым значением, уменьшающимся, чтобы симулировать потерю горизонтального движения из-за сопротивления ветра и т. д. и потерю вертикального движения из-за силы тяжести.
  2. Сила гравитации на некоторой стадии станет сильнее, чем восходящая силаэлемент от взрыва, и в этом случае элемент должен будет упасть .

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

Что было бы лучшим способом создать этоэффект?

Ответы [ 3 ]

3 голосов
/ 09 ноября 2011

(я опубликую это как ответ, поскольку это именно то, что есть на самом деле.)

Вам просто нужна анимация мусора для глазного леденца, или она должна быть точно рассчитана?Я обнаружил, что использование случайных значений может реально сделать это реалистичным.Смотри http://jsfiddle.net/minitech/fSaGk

1 голос
/ 09 ноября 2011

Возможно, вам потребуется использовать свойство easing вызова animate() и использовать плагин jQuery Easing , чтобы получить эффект несколько более тонкий, чем стандартное linear замедление. предлагается по умолчанию в jQuery.

Другой трюк заключается в цепочке вызовов на animate(), чтобы получить тот многоступенчатый эффект, который вам нужен.

Вот действительно (и я имею в виду действительно ) быстрый макет , который дает вам идея.

Мужество: 

debris.animate({
    left: direction + '=150',
    easing: 'linear',
}, {
    queue: false,
    duration: duration
})
.animate({
    top: '-=100',
    easing: 'easeOutQuint',
}, {
    queue: true,
    duration: vduration
})
.animate({
    top: '+=100',
    easing: 'easeInQuint',
}, {
    queue: true,
    duration: vduration
});

Ключевые элементы:

  • Анимация влево-вправо linear - это не тот распад, который вы ищете, но этого достаточно для этого макета
  • Анимация влево-вправо явно не ставится в очередь , поэтому следующая animate() в цепочке начинается немедленно
  • Анимация вверх-вниз состоит из двух очередей (это по умолчанию, но я все равно указал для ясности) анимаций, каждая из которых рассчитана на половину левой-правой анимации
  • Я использовал функцию ослабления easeOutQuint из Easing Plugin для создания гравитационного эффекта - он далеко не идеален, но вы поняли идею

При наличии достаточного количества очередей и цепочек animate() вызовов, подобных этому, вы сможете получить довольно хороший распад x вместе с красивым y .. .

0 голосов
/ 09 ноября 2011

Я закончил тем, что изменил код minitech ... 

var element = $('div'),
    parent = element.parent(),
    position = element.position(),
    offset = element.offset(),
    directionOver180 = false,
    flyAnimation;

$('body').css('overflow', 'hidden');

var angle = (Math.random() * 180) + (directionOver180 ? 180 : 0),
    angleCalc = angle * Math.PI / 180,
    velocityX = Math.cos(angleCalc),
    velocityY = Math.sin(angleCalc),
    currentX = offset.left,
    currentY = offset.top,
    gravity = -20;

flyAnimation = setInterval(function() {

    currentX += velocityX * 5 * (directionOver180 ? -1 : 1);
    currentY += velocityY * 3 + ++gravity;

    velocityX += 0.02;
    velocityY += 0.1 * Math.random();

    element.css({
        left: currentX,
        top: currentY
    });

    if (currentY + element.height() > $(window).height()) {
        $('body').css('overflow', 'visible');
        clearInterval(flyAnimation);
        element.remove();
    }

}, 20);

jsFiddle .

...