1

Вопрос чисто теоретический если кому любопытно:

Как реализован такой эффект http://jqueryui.com/effect/#default ( эффект: Explode )?

Интересует чисто физически как можно целостный, скажем DIV который внутри состоит ещё из элементов(картинок, абзацев и всяких списков) расколоть на 9 частей? Единственная реализация которая мне представляется снять "скриншот" и разбить по 9 разным дивам а потом анимировать (простите за глупость).

Ковырял коды jQuery ответа не нашёл, если у кого есть время и знания -- расскажите, буду благодарен. Спасибо!

2 ответа 2

3

На самом деле, создаются клонированные элементы ("кусочки"), у каждого фиксированный размер с overflow: hidden; Каждый разлетается в свою сторону. В общем-то, всё предельно просто и в firebug-е можно заметить ;)

1
  • Добью вам до 20к
    – ferrari
    23 сен 2013 в 13:07
3

Если почитать исходники jQuery UI, то можно догадаться:

(function( $, undefined ) {

$.effects.effect.explode = function( o, done ) {

var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3,
    cells = rows,
    el = $( this ),
    mode = $.effects.setMode( el, o.mode || "hide" ),
    show = mode === "show",

    // show and then visibility:hidden the element before calculating offset
    offset = el.show().css( "visibility", "hidden" ).offset(),

    // width and height of a piece
    width = Math.ceil( el.outerWidth() / cells ),
    height = Math.ceil( el.outerHeight() / rows ),
    pieces = [],

    // loop
    i, j, left, top, mx, my;

// children animate complete:
function childComplete() {
    pieces.push( this );
    if ( pieces.length === rows * cells ) {
        animComplete();
    }
}

// clone the element for each row and cell.
for( i = 0; i < rows ; i++ ) { // ===>
    top = offset.top + i * height;
    my = i - ( rows - 1 ) / 2 ;

    for( j = 0; j < cells ; j++ ) { // |||
        left = offset.left + j * width;
        mx = j - ( cells - 1 ) / 2 ;

        // Create a clone of the now hidden main element that will be absolute positioned
        // within a wrapper div off the -left and -top equal to size of our pieces
        el
            .clone()
            .appendTo( "body" )
            .wrap( "<div></div>" )
            .css({
                position: "absolute",
                visibility: "visible",
                left: -j * width,
                top: -i * height
            })

        // select the wrapper - make it overflow: hidden and absolute positioned based on
        // where the original was located +left and +top equal to the size of pieces
            .parent()
            .addClass( "ui-effects-explode" )
            .css({
                position: "absolute",
                overflow: "hidden",
                width: width,
                height: height,
                left: left + ( show ? mx * width : 0 ),
                top: top + ( show ? my * height : 0 ),
                opacity: show ? 0 : 1
            }).animate({
                left: left + ( show ? 0 : mx * width ),
                top: top + ( show ? 0 : my * height ),
                opacity: show ? 1 : 0
            }, o.duration || 500, o.easing, childComplete );
    }
}

function animComplete() {
    el.css({
        visibility: "visible"
    });
    $( pieces ).remove();
    if ( !show ) {
        el.hide();
    }
    done();
}
};

})(jQuery);

А именно разбиваем нужный элемент на нужное количество кусочков ( по умолчанию 9 ), каждый из которых является копией текущего (клонами), но с фиксированными значениями длины и ширины, с overflow: hidden. Кусочки позиционируем абсолютно и задаём нужные отступы, которые в последствие анимируем по определённому закону. Исходный элемент вначале скрывается, а по завершению анимации снова становится видимым. На самом деле код хорошо задокументирован и, почитав комментарии, можно легко разобраться.

3
  • 1
    Пока читал исходники/писал ответ, опередили. 23 сен 2013 в 13:09
  • Да, от вас очень полный ответ, спасибо за проявленный интерес. Даже удивительно как это работает и "не тормозит". Я где-то ещё видел как пример как картинка разбивалась кусков на 100 и разлеталась на jQuery к сожалению не смог найти.
    – ferrari
    23 сен 2013 в 13:13
  • Мне самому стало интересно узнать как это работает :) 23 сен 2013 в 13:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.