JavaScript DHTML/Dojo toolkit/Animation

Материал из Web эксперт
Перейти к: навигация, поиск

Animate width property

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
 
dojo.addOnLoad(function(  ) {
   dojo.animateProperty({
    node: "box",
    properties: { width: { end: 500 } }
}).play(  );
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click</div>
</body>
</html>



Animation: Add new class to tag and

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <style>
      .oldClass {
        background-color : blue;
      }
      .newClass {
        background-color : red;
      }
    </style>
    <script>
      dojo.require("dojox.fx.style");
      function testIt() {
        dojox.fx.addClass({cssClass:"newClass", node:"div1"}).play();
      }
    </script>
  </head>
  <body onload=testIt()>
        <div id="div1" class="oldClass">Text</div>
  </body>
</html>



Animation easing function

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
 
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        dojo.animateProperty({
            node : box,
            duration : 10000,
            rate : 1000,
            easing : function(x) { return x*2; },
            properties : {
                height : {start : "200", end : "400"},
                width : {start : "200", end : "400"}
           }
        }).play(  );
    });
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click</div>
</body>
</html>



Animation: enlarge

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
 
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        dojo.animateProperty({
            node : box,
            duration : 10000,
            rate : 1000,
            properties : {
                height : {start : "200", end : "400"},
                width : {start : "200", end : "400"}
           }
        }).play(  );
    });
});
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click</div>
</body>
</html>



Animation: fly

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.fx");
      function fxTest() {
        dojo.fx.chain([
          dojo.fx.wipeOut({node:"myDiv"}),
          dojo.fx.rubine([
            dojo.fx.slideTo({node:"myDiv",left:"0",top:"400",unit:"px"}),
            dojo.fx.wipeIn({node:"myDiv"})
          ])
        ]).play();
      }
    </script>
  </head>
  <body onLoad="fxTest();">
    <div id="myDiv"
      style="background-color:#f00;width:400px;height:400x;">
     Hello </div>
  </body>
</html>



Animation: resize

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.fx._base");
      function show() {
        dojox.fx.sizeTo({
          node:"my", duration: 2000, width: 300, height: 300,
          method: "chain"
        }).play();
      }
    </script>
  </head>
  <body onload="show()">
      <div id="my"
          style="background-color:#f00;">
      </div>
  </body>
</html>



Animation: stratch

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
           dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
            dojo.animateProperty({
              node : box,
              duration : 3000,
              properties : {
                  width : {start : "200", end : "400"}
              }
          }).play(  );
    });
});
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click to stratch</div>
</body>
</html>



Animation with dojox.timing.Sequence

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.timing.Sequence");
      function writeText(msg) {
        dojo.byId("my").innerHTML += msg + "<br>";
      }
      function testIt() {
        var s = new dojox.timing.Sequence({});
        var funcs = [
          {func : [writeText, this, "Pause:  2 seconds"],pauseAfter : 2000},
        ];
        
        s.go(funcs, function() { writeText("Done"); });
      }
    </script>
  </head>
  <body onLoad="testIt();">
        <div id="my">&nbsp;</div>
  </body>
</html>



Chained animation

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
    dojo.require("dojo.fx");
    dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        var a1 = dojo.fx.slideTo({
            node:box,
            top : "150",
            left : "300"
        });
        var a2 = dojo.fx.slideTo({
            node:box,
            top : "20",
            left : "350"
        });
        var slides = dojo.fx.chain([a1,a2]);
        var a1 = dojo.fadeIn({
            node:box
        });
        var a2 = dojo.fadeOut({
            node:box
        });
        var fades = dojo.fx.chain([a1,a2]);
        dojo.fx.rubine([slides, fades]).play(  );
    });
});
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red;height:400px">click</div>
</body>
</html>



Change position animation

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
 
        dojo.require("dojo.fx");
            dojo.addOnLoad(function(  ) {
                var box = dojo.byId("box");
                dojo.connect(box, "onclick", function(evt) {
                    dojo.fx.slideTo({
                        node:box,
                        top : "200",
                        left : "200"
                    }).play(  );
                });
            });
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click</div>
</body>
</html>



Cross fade

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.fx._base");
      function testIt() {
        dojox.fx.crossFade({ nodes : ["node1", "node2"], duration:1000}).play();
      }
    </script>
  </head>
  <body onload="testIt()">
     <div id="node1">One</div>
     <div id="node2" style="opacity:0;>Two</div>
  </body>
</html>



dojo animation alert

 
<html>
<head>
<title>Dojo example</title>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
    dojo.addOnLoad(function(){
        dojo.query("#showMe").onclick(function(e){
            var node = e.target;
            var a = dojo.anim(node, {
                backgroundColor: "#ff0",
                color: "#00f"
            }, 1000);
            dojo.connect(a, "onEnd", function(){
                dojo.anim(node, { color: "#0ff" }, null, null, function(){
                    node.innerHTML = "Alert!";
                    dojo.anim(node, { color: "red" });
                });
            });
        });
    });
</script>
<body>
<div id="showMe">
    click me
</div>
</body>
</html>



Fade effect for Menu under ComboButton

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.Menu");
      dojo.require("dijit.form.Button");
    </script>
  </head>
  <body class="tundra">
        <div dojoType="dijit.form.ruboButton">
          <span>Letters</span>
          <div dojoType="dijit.Menu" toggle="fade" style="display:none;">
            <div dojoType="dijit.MenuItem">A</div>
            <div dojoType="dijit.MenuItem">B</div>
            <div dojoType="dijit.MenuItem">C</div>
            <div dojoType="dijit.MenuItem">D</div>
          </div>
        </div>
  </body>
</html>



Fadein animation

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function doFading() {
        dojo.fadeOut(
        {node : "myDiv", 
         duration : 2000, 
         onEnd : function() {
            dojo.fadeIn({node : "myDiv", 
                         duration : 2000}).play();}}).play();
      }
    </script>
  </head>
  <body onLoad=doFading()>
    <div id="myDiv">Text Text Text</div>
  </body>
</html>



Fade me out

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
                dojo.addOnLoad(function(  ) {
                var box = dojo.byId("box");
                dojo.connect(box, "onclick", function(evt) {
                    var anim = dojo.fadeOut({node:box});
                    anim.play(  );
                });
            });
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : blue">click to Fade Me Out</div>
</body>
</html>



Fade out animation

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.fx");
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        var a1 = dojo.fx.slideTo({
            node:box,
            top : "150",
            left : "300"
        });
        var a2 = dojo.fadeOut({
            node:box
        });
        dojo.fx.rubine([a1,a2]).play(  );
    });
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red;height:400px">click</div>
</body>
</html>



Fadeout animation demo

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
    dojo.require("dojo.fx");
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    var t = new dojo.fx.Toggler({
        node : box,
        showDuration : 2000,
        hideDuration : 2000
    });
    var visible = true;
    dojo.connect(box, "onclick", function(evt) {
        if (visible)
            t.hide(  );
        else
            t.show(  );
        visible = !visible;
    });
});
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red;height:400px">click</div>
</body>
</html>



Highlight animation

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.fx._base");
      function testIt() {
        dojox.fx.highlight({ node : "my", color : "#f00" }).play();
      }
    </script>
  </head>
  <body onload=testIt()>
        <div id="my">Your Text</div>
  </body>
</html>



Math ease function

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
 
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        dojo.animateProperty({
            node : box,
            duration : 10000,
            easing : function(x) {return Math.pow(Math.sin(4*x),2);},
            properties : {
                height : {start : "200", end : "400"},
                width : {start : "200", end : "400"}
           }
        }).play(  );
    });
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click</div>
</body>
</html>



Path animation

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.fx");
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        var easing = function(x) { return x; };
        var a1 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 1000,
            top : "150",
            left : "300"
        });
        var a2 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 400,
            top : "20",
            left : "350"
        });
        var a3 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 800,
            top : "350",
            left : "400"
        });
        var a4 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 800,
            top : "50",
            left : "10"
        });
        var a5 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 800,
            top : "500",
            left : "100"
        });
        dojo.fx.chain([a1,a2,a3,a4,a5]).play(  );
    });
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red;height:400px">click</div>
</body>
</html>



Pause before

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.timing.Sequence");
      function writeText(msg) {
        dojo.byId("my").innerHTML += msg + "<br>";
      }
      function testIt() {
        var s = new dojox.timing.Sequence({});
        var funcs = [
          {func : [writeText, this, "Pause: 1 second"], pauseBefore : 1000}
        ];
        
        s.go(funcs, function() { writeText("Done"); });
      }
    </script>
  </head>
  <body onLoad="testIt();">
        <div id="my">&nbsp;</div>
  </body>
</html>



Pause one second

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.timing.Sequence");
      function writeText(msg) {
        dojo.byId("my").innerHTML += msg + "<br>";
      }
      function testIt() {
        var s = new dojox.timing.Sequence({});
        var funcs = [
          {func : [writeText, this, "Pause:  1 second"]},
        ];
        
        s.go(funcs, function() { writeText("Done"); });
      }
    </script>
  </head>
  <body onLoad="testIt();">
        <div id="my">&nbsp;</div>
  </body>
</html>



Repeat 5 times

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.timing.Sequence");
      function writeText(msg) {
        dojo.byId("my").innerHTML += msg + "<br>";
      }
      function testIt() {
        var s = new dojox.timing.Sequence({});
        var funcs = [
                    {func : [writeText, this, "Repeat: 5 times"],repeat : 5, pauseAfter : 1000},
        ];
        
        s.go(funcs, function() { writeText("Done"); });
      }
    </script>
  </head>
  <body onLoad="testIt();">
        <div id="my">&nbsp;</div>
  </body>
</html>



Set animation rate

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
 
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        dojo.animateProperty({
            node : box,
            duration : 10000,
            rate : 1000,
            properties : {
                height : {start : "200", end : "400"},
                width : {start : "200", end : "400"}
           }
        }).play(  );
    });
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click</div>
</body>
</html>



Wipeout animation

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.fx");
            dojo.addOnLoad(function(  ) {
                var box = dojo.byId("box");
                dojo.connect(box, "onclick", function(evt) {
                    dojo.fx.wipeOut({
                        node:box
                    }).play(  );
                });
            });
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red">click</div>
</body>
</html>



Wipeout animation easing function

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.fx");
dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        dojo.fx.wipeOut({
            node:box,
            easing : function(x) { return Math.pow(Math.sin(4*x),2);   },
            duration : 5000
        }).play(  );
    });
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red;height:400px">click</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/Animation&oldid=2009»