jsAnim学习

examples

This page offers some simple examples, we will call the mushroom experiments. First, let us begin with the basic setup for the html page. Create a file index.html and a file main.js, in the head of the index.html file, add the following code:

  1. <!-- jsAnim -->  
  2. <script type="text/javascript" src="jsAnim.js"></script>  
  3. <script type="text/javascript" src="main.js"></script>  

Make sure to put something to animate in the index.html file. For our experiments, we will be using a png image of a mushroom, which will give an id of mushroom. If you want the animations to begin when the page loads, it might be beneficial to create a function named init() and add onload="init()" to the body tag of your page.

In our main.js file, we can now instantiate the jsAnimManager object, with the following basic code:

  1. var manager = new jsAnimManager();  

We can now consider a basic example. We will give the mushroom a relative positioning, and then animate the left parameter to make it move from the left to the right of the page.

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. shroom.style.position = "relative";  
  4.   
  5. var anim = manager.createAnimObject("mushroom");  
  6.   
  7. anim.add({property: Prop.left, to: 500, duration: 2000});  

Now let's take a look at the same example, but instead, let's use the jsAnim positioning system.

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(-250,25);  
  6.   
  7. var anim = manager.createAnimObject("mushroom");  
  8.   
  9. anim.add({property: Prop.position, to: new Pos(250,25),   
  10.     duration: 2000});  

The real power of the positioning system is that we can animate both a vertical and horizontal component at the same time, without having two animation objects.

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(-250,25);  
  6.   
  7. var anim = manager.createAnimObject("mushroom");  
  8.   
  9. anim.add({property: Prop.position, to: new Pos(250,100),  
  10.     duration: 2000});  

We can also animate from one position to the next in some path other than a straight line!

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(-250,25);  
  6.   
  7. var anim = manager.createAnimObject("mushroom");  
  8.   
  9. anim.add({property: Prop.positionSemicircle(false),   
  10.     to: new Pos(250,25), duration: 2000});  

Or, we can even use the neat circle feature. This allows the object to be animated in a complete circle, where the to point represents the far-end of the circle.

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(0,25);  
  6.   
  7. var anim = manager.createAnimObject("mushroom");  
  8.   
  9. anim.add({property: Prop.positionCircle(true), to: new Pos(0,100),  
  10.     duration: 2000});  

Of course, we can animate more than just position. For instance, we can animate colors.

  1. var anim = manager.createAnimObject("colorDiv");  
  2.   
  3. anim.add({property: Prop.backgroundColor, to: new Col(00,255,133),  
  4.     duration:2000});  

Animations can also be chained, such that one immediately follows the other. Note that we can also use the wait property to pause a chain for a set amount of time!

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(-250,25);  
  6.   
  7. var anim = manager.createAnimObject("mushroom");  
  8.   
  9. anim.add({property: Prop.position, to: new Pos(250,25),  
  10.     duration: 2000});  
  11. anim.add({property: Prop.wait, duration: 1000});  
  12. anim.add({property: Prop.position, to: new Pos(0,100),  
  13.     duration: 2000});  

To animate more than one property at the same time, we must create more than one jsAnimObject.

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(-250,75);  
  6.   
  7. var anim1 = manager.createAnimObject("mushroom");  
  8. var anim2 = manager.createAnimObject("mushroom");  
  9.   
  10. anim1.add({property: Prop.position, to: new Pos(250,75),  
  11.     duration: 2000});  
  12. anim2.add({property: Prop.dimension, to: new Dim(140,20),  
  13.     duration: 2000});  

You can use the onComplete callback to trigger events when animations are done.

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(-250,25);  
  6.   
  7. var anim = manager.createAnimObject("mushroom");  
  8.   
  9. anim.add({property: Prop.position, to: new Pos(250,25),   
  10.     duration: 2000, onComplete: function() {alert("HEY!")}});  

To make animations look really nice, easing is absolutely vital. There are several different types of easing, and the best way to explain them is to simply show them. So for this, example, the different buttons describe which easing method was used in code like the following:

  1. shroom = document.getElementById("mushroom");  
  2.   
  3. manager.registerPosition("mushroom");  
  4.   
  5. shroom.setPosition(-200,25);  
  6.   
  7. var anim = manager.createAnimObject("mushroom");  
  8.   
  9. anim.add({property: Prop.position, to: new Pos(200,25),  
  10.     duration: 2000, ease: /*[EASE METHOD HERE]*/});  
         

So there you have it; that's everything I have to say about my animation library. If you have anything to say, just email me.

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chinatefl/p/2321779.html