Combinar animaciones

La animación tradicional suele utilizar una línea de tiempo para modelar lo que está cambiando. Es normal que las cosas se muevan simultáneamente, una tras otra. Dojo proporciona un mecanismo para cada uno: fx.combine y fx.chain. Veamos cómo utilizar estas herramientas.

En este ejemplo, tenemos dos cajas de contenido que queremos intercambiar. Para resaltar el cambio también desvaneceremos el color de fondo detrás de ellos.

<button id="swapButton">Intercambiar</button>
<div class="container" id="container">
    <div id="content1" class="contentBox" style="top: 0; left: 0">
        <div class="innerBox">1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</div>
    </div>
    <div id="content2" class="contentBox" style="top: 0; left: 250px">
        <div class="innerBox">2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    </div>
</div>

Tenemos un botón para intercambiar el contenido. Un espacio containery dentro de él, dos cajas content1y content2. Combinar animaciones de distintas piezas es inmensamente útil. Hemos dividido la animación en piezas separadas, para que podamos mantener el código de intercambio de posiciones genérico y reutilizable. La implementación de la función swapAnimtiene este aspecto:

function swapAnim(node1, node2) {
                    var posn1 = parseInt(domStyle.get(node1, "left")),
                        posn2 = parseInt(domStyle.get(node2, "left"));

                    return moveNodes = fx.combine([
                        fx.slideTo({
                            duration: 1200,
                            node: node2,
                            left: posn1
                        }),
                        fx.slideTo({
                            duration: 1200,
                            node: node1,
                            left: posn2
                        })
                    ]);
                }

El método slideTose utiliza para mover realmente cada nodo, usando la propiedad estilo izquierda. También podríamos haber utilizado animateProperty con un efecto similar. Las dos animaciones separadas deben ejecutarse en paralelo, por lo que ambos nodos se mueven a la vez. El método fx.combine logra eso: hacer una animación a partir de la combinación de dos.

on(swapButton, "click", function(evt){

                    // chain the swap nodes animation
                    // with another to fade out a background color in our container
                    var anim = fx.chain([
                        swapAnim(c1, c2),
                        baseFx.animateProperty({
                            node: container,
                            properties: {
                                backgroundColor: "#fff"
                            }
                        })
                    ]);
                    // before the animation begins, set initial container background
                    aspect.before(anim, "beforeBegin", function(){
                        domStyle.set(container, "backgroundColor", "#eee");
                    });

                    // when the animation ends, toggle the originalOrder
                    on(anim, "End", function(n1, n2){
                        originalOrder = !originalOrder;
                    });

                    anim.play();
                });

Aquí está el controlador de eventos on. En este caso, al hacer click. Como con fx.combineantes, el array pasado a fx.chaintiene dos animaciones separadas. Sin embargo, queremos ejecutarlos en serie: el intercambio de nodos, luego la animación de color de fondo. El color de fondo inicial del contenedor se establece conectándose al evento beforeBegin, y durante onEnd establecemos originalOrderen truepara asegurar que la próxima vez que se haga clic, los nodos se invierten. Ejemplo en funcionamiento Código completo