Documentation
Semi-Complex chain and combine examples¶
Status: | Draft |
---|---|
Version: | 1.0 |
Authors: | Peter Higgins, Nikolai Onken, Marcus Reimann, Jared Jurkiewicz |
This page is a landing point for demonstrating complex animations of DOM nodes built on uses of the chain and combine functions to perform complex animations with a single call to ‘play().
Examples¶
Example 1: Demonstration of combining three chained animations¶
This animation changes position, size, opacity, and color in a single, combined, animation
<script> dojo.require("dijit.form.Button"); dojo.require("dojo.fx"); dojo.require("dojo.fx.easing"); function basicCombine(){ //Function linked to the button to trigger the effects. function combineIt() { //Fade the node out, then in var displayAnim = dojo.fx.chain([ dojo.fadeOut({node: "basicNode1", duration: 1000}), dojo.fadeIn({node: "basicNode1", duration: 1000}) ]); //Move the node while it's fading out and in. var moveAnim = dojo.fx.chain([ dojo.animateProperty({node: "basicNode1", properties: { marginLeft: {start: 0, end: 400, unit: "px"} }, duration: 1000, easing: dojo.fx.easing.backOut }), dojo.animateProperty({node: "basicNode1", properties: { marginLeft: {start: 400, end: 0, unit: "px"} }, duration: 1000, easing: dojo.fx.easing.backOut }) ]); //Resize and change color of the node as it moves too. var resizeColorAnim = dojo.fx.chain([ dojo.animateProperty({node: "basicNode1", properties: { width: {start: 100, end: 200, unit: "px"}, height: {start: 100, end: 200, unit: "px"}, backgroundColor: {start: "red", end: "green"} }, duration: 1000 }), dojo.animateProperty({node: "basicNode1", properties: { width: {start: 200, end: 100, unit: "px"}, height: {start: 200, end: 100, unit: "px"}, backgroundColor: {start: "green", end: "red"} }, duration: 1000 }) ]); //Combine the three sets of animations into one that runs in parallel. var combinedAnim = dojo.fx.combine([displayAnim, moveAnim, resizeColorAnim]); //Set it so that every time it ends, it runs again. (And connect the stop action to it!) var handle = dojo.connect(combinedAnim, "onEnd", function(){combineIt();}); dojo.connect(dijit.byId("endButton"), "onClick", function(){dojo.disconnect(handle);}); //Run it! combinedAnim.play(); } dojo.connect(dijit.byId("startButton"), "onClick", combineIt); } dojo.addOnLoad(basicCombine); </script>
<button dojoType="dijit.form.Button" id="startButton">Start the complex loop!</button> <button dojoType="dijit.form.Button" id="endButton">End the complex loop!</button> <div id="basicNode1" style="width: 100px; height: 100px; background-color: red;"></div>