JavaScript DHTML/YUI Library/Animation

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

Animate the motion of an HTMLElement.

   <source lang="html4strict">


<html> <head> <title>Animating Motion</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   height:30px;
   width:30px;

} </style> </head> <body class=" yui-skin-sam">

Animating Motion

Use the YUI Animation to animate the motion of an HTMLElement.

<button id="demo-run">run</button> <script type="text/javascript"> (function() { 

   var attributes = {
       points: { to: [600, 10] }
   };
   var anim = new YAHOO.util.Motion("demo", attributes);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });

})(); </script> </body> </html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Animating Along a Curved Path

   <source lang="html4strict">


<html> <head> <title>Animating Along a Curved Path</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script>


<style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   height:30px;
   width:30px;

} </style>

</head> <body class=" yui-skin-sam">

Animating Along a Curved Path

This demonstrates how to use the YUI Animation to animate along a curved path. Click the button to begin the demo.

<button id="demo-run">run</button> <script type="text/javascript"> (function() { 

   var attributes = {
       points: { to: [600, 10], control: [ [300, 100], [800, 800] ] }
   };
   var anim = new YAHOO.util.Motion("demo", attributes);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Animating Colors

   <source lang="html4strict">


<html> <head> <title>Animating Colors</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   height:100px;
   width:100px;

} </style> </head> <body class=" yui-skin-sam">

Animating Colors

Use the YUI Animation to animate colors.

Demo

<button id="demo-run">run</button> <script type="text/javascript"> (function() { 

   var attributes = {
       color: { to: "#06e" },
       backgroundColor: { to: "#e06" }
   };
   var anim = new YAHOO.util.ColorAnim("demo", attributes);
   YAHOO.util.Event.on(document, "click", function() {
       anim.animate();
   });

})(); </script> </body> </html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Animating From a Given Value

   <source lang="html4strict">


<html> <head> <title>Animating From a Given Value</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   overflow:hidden;
   width:200px;

} </style> </head> <body class=" yui-skin-sam">

Animating From a Given Value

Start a YUI Animation from a given value.

Demo

<button id="demo-run">run</button> <script type="text/javascript"> (function() { 

   var attributes = {
       width: { from: 600, to: 0 }
   };
   var anim = new YAHOO.util.Anim("demo", attributes);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });

})(); </script> </body> </html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Animating Multiple Attributes

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Animating Multiple Attributes</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script>


<style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   height:100px;
   width:100px;

} </style>

</head> <body class=" yui-skin-sam">

Animating Multiple Attributes

This demonstrates how to animate multiple attributes of an HTMLElement using the YUI Animation Utility. Click the button to begin the demo.

Demo

<button id="demo-run">run</button> <script type="text/javascript"> (function() { 

   var attributes = {
       height: { to: 50 },
       width: { to: 50 }
   };
   var anim = new YAHOO.util.Anim("demo", attributes);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Animating multiple elements with StyleSheet

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Animating multiple elements with StyleSheet</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/stylesheet/stylesheet-min.js"></script>


<style id="demo_style" type="text/css"> 

   .shrinky_dink {
       overflow: hidden;
       width: 450px;
   }
   .shrinky_dink div {
       display: inline;
       float: left;
       background: #000;
       margin: 1em;
       height: 150px;
       width: 150px;
       opacity: 1,
       filter: alpha(opacity=100);
   }

</style>

</head> <body class=" yui-skin-sam">

Animating multiple elements with StyleSheet

In this example, we"ll use the Animation Utility in concert with StyleSheet to apply style changes to a group of elements in concert over time.

<button type="button" id="demo_go">Start</button>

<script type="text/javascript"> YAHOO.util.Event.onDOMReady(function () { 

       // Default animation duration is 1 second
   var anim  = new YAHOO.util.Anim(),
       // Modify the existing style node"s stylesheet
       sheet = new YAHOO.util.StyleSheet("demo_style"),
       floor = Math.floor,
       go    = YAHOO.util.Dom.get("demo_go");

   // Update the StyleSheet on each frame of the animation
   anim.onTween.subscribe(function (type,data) {
       var factor  = data[0].duration / 1000,
           dim     = (150 - floor(100 * factor)) + "px",
           opacity = 1 - (0.8 * factor);
       sheet.set(".shrinky_dink div", {
           height : dim,
           width  : dim,
           opacity: opacity
       });
   });
   anim.onComplete.subscribe(function () {
       go.disabled = false;
   });
   YAHOO.util.Event.on(go, "click", function () {
       go.disabled = true;
       anim.animate();
   });

}); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Apply an Easing to a YUI Animation instance.

   <source lang="html4strict">

<html> <head> <title>Animation Easing</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   overflow:hidden;
   width:200px;

} </style> </head> <body class=" yui-skin-sam">

Animation Easing

Apply an Easing to a YUI Animation instance.

Demo

<button id="demo-run">run</button> <script type="text/javascript"> (function() { 

   var attributes = {
       width: { to: 0 }
   };
   var anim = new YAHOO.util.Anim("demo", attributes, 1.5, YAHOO.util.Easing.backIn);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });

})(); </script> </body> </html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Apply a simple animation effect to an HTMLElement.

   <source lang="html4strict">

<html> <head> <title>Basic Animation</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   overflow:hidden;
   width:200px;

} </style> </head> <body class=" yui-skin-sam"> Apply a simple animation effect to an HTMLElement. Click the button to begin the demo.

Demo

<button id="demo-run">run</button> <script type="text/javascript"> (function() { 

   var attributes = {
       width: { to: 0 }
   };
   var anim = new YAHOO.util.Anim("demo", attributes);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });

})(); </script> </body> </html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Chaining Animations Using onComplete

   <source lang="html4strict">


<html> <head> <title>Chaining Animations Using onComplete</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <style type="text/css"> 

 #animator {
   background-color:#003366; 
   color:#fff; 
   height:15em; 
   width: 15em; 
   position:relative;
   margin:1em;
   padding:1em;
 }

</style> </head> <body class=" yui-skin-sam"> 

   
       <a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a>
   


 This element will animate position
   and then color when you click the 
   button.

<script language="javascript"> //Setup the example once the animator div is present //in the DOM. YAHOO.util.Event.onAvailable("animator", function() { 

 //This is the first animation; this one will 
 //fire when the button is clicked.
 var move = new YAHOO.util.Anim("animator", {
   left: {from:0, to:75}
 }, 1);
 
 //This is the second animation; it will fire
 //when the first animation is complete.
 var changeColor = new YAHOO.util.ColorAnim("animator", {
   backgroundColor: {from:"#003366", to:"#ff0000"}
 }, 1);
 //Here"s the chaining glue: We subscribe to the
 //first animation"s onComplete event, and in 
 //our handler we animate the second animation:
 move.onComplete.subscribe(function() {
   changeColor.animate();
 });
 
 //Here we set up our YUI Button and subcribe to
 //its click event.  When clicked, it will
 //animate the first animation:
 var startAnim = new YAHOO.widget.Button("startAnim");
 startAnim.subscribe("click", function() {
   //reset the color value to the start so that
   //the animation can be run multiple times:
   YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366");
   move.animate();
 });
 
 changeColor.onStart.subscribe(function() {
 });
 changeColor.onTween.subscribe(function(s, o) {
 });
 
 changeColor.onComplete.subscribe(function(s, o) {
 });

}); </script> </body> </html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Use the YUI Animation to animate the scrolling of an HTMLElement.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Animated Scrolling</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script>


<style type="text/css">

  1. demo {
   height:6em;
   width:20em;
   overflow:auto;
   margin-bottom:1em;

} </style>

</head> <body class=" yui-skin-sam">

Animated Scrolling

This demonstrates how to use the YUI Animation to animate the scrolling of an HTMLElement. Click the button to begin the demo.

<style>

  1. demo {
   height:6em;
   width:20em;
   overflow:auto;

} </style>

Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.

<button id="demo-run">run</button> <script> (function() { 

   var attributes = {
       scroll: { to: [0, 200] }
   };
   var anim = new YAHOO.util.Scroll("demo", attributes);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Using Custom Units for an Animation

   <source lang="html4strict">


<html> <head> <title>Using Custom Units for an Animation</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <style type="text/css">

  1. demo {
   background:#ccc;
   margin-bottom:1em;
   overflow:hidden;
   width:30em;

} </style> </head> <body class=" yui-skin-sam">

Using Custom Units for an Animation

Use YUI Animation with units other than pixels. Click the button to begin the demo.</p>

Demo

<button id="demo-run">run</button> <script> (function() { 

   var attributes = {
       width: { from: 30, to: 10, unit:"em" }
   };
   var anim = new YAHOO.util.Anim("demo", attributes);
   YAHOO.util.Event.on("demo-run", "click", function() {
       anim.animate();
   });
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script> </body> </html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/Animation&oldid=4057»