Implement webpage animation in observer Mode

I think the observer mode is a very good mode, and there are a lot of applications about it. With a learning attitude, I used Js for a practice, the final effect of a webpage animation built in the Observer mode is that clicking the button will make the three squares animated separately.

Initial status

 

In Motion

 

So how is it implemented? Let's give a general idea:

1. First, create the observer and the observer interface:

//Function iobserverable (){} Iobserverable. Prototype={Addobserver:Function(Observer) {}, removeobserver:Function(Observer) {}, policy:Function(){}};//Observer InterfaceFunctionIobserver () {} iobserver. Prototype={Update:Function(){}};
 

2. Create a button class named "Observer" and "Three box objects" as the observer respectively,
Here, I use a static simple factory to create button objects and jquery objects in the box,CodeAs follows:

 //  Simple Factory  Function  Simplefactory () {} simplefactory. createbox = Function  (ID, jstyles ){  VaR $ Box = $ ("<div> </div>" ); $ Box. ATTR ( "ID" , ID); $box.css (jstyles); $ (document. Body). append ($ box );  //  In fact, the factory is not responsible for page display because it is automatically added to the page, but for convenience, this is done temporarily.     Return  $ Box ;}; simplefactory. createbutton = Function  (ID, value, jstyle ){  VaR $ Button = $ ("<input type = 'button '/>" ); $ Button. ATTR ( "ID" , ID); $ button. ATTR ( "Value" , Value); Response button.css (jstyle); $ (document. Body). append ($ button );  Return  $ Button ;};  //  Create an instance of the jquery object      VaR $ Box1 = simplefactory. createbox ("box1" , {Border: "2px solid red" , Width: "100px" , Height: "100px" , Background: "Yellow" });  VaR $ Box2 = simplefactory. createbox ("box2" , {Border: "2px solid yellow" , Width: "100px" , Height: "100px" , Background: "Blue"});  VaR $ Box3 = simplefactory. createbox ("box3" , {Border: "2px solid blue" , Width: "100px" , Height: "100px" , Background: "Green" });  VaR $ Button = Simplefactory. createbutton ( "Button" , "Click me" , {Width: "100px"}); 

The real creation process of the observer and the observer is as follows:

 
VaRButton =NewButton ();VaRBox1 =NewBox1 ($ box1 );VaRBox2 =NewBox2 ($ box2 );VaRBox3 =NewBox3 ($ box3 );
 

 

3. After creating the required object, add the observer to the reference set of the observer:

 
Button. addobserver (box1); button. addobserver (box2); button. addobserver (box3 );
 

4. Then add the corresponding click event:

$ Button. Click (Function() {Button. Policy ();});
 

The above is just a preliminary skeleton, because the actual code of the observer and the observer is not established, so it will not cause any impact. Next I will paste the specific observer and the code of the observer, in particular, the update method of the observer, each update method can make itself produce a certain animation effect:

 //  Button class (observed)  Function  Button ($ element ){  This . Observers = New  Array ();} button. Prototype = New  Iobserverable (); button. Prototype. addobserver = Function (Observer ){  This  . Observers. Push (observer) ;}; button. Prototype. removeobserver = Function  (Observer ){  This  . Observers. Remove (observer) ;}; button. Prototype. Policy = Function  (){
  For ( VaR I = 0; I < This . Observers. length; I ++ ){ This  . Observers [I]. Update ();}};  //  Box class (observer), box1, box2, box3 extends ibox  Function  Ibox () {} ibox. Prototype = New  Iobserver ();  Function  Box1 ($ element ){  This . $ Element = $ Element;} box1.prototype = New  Ibox (); //  This update is implemented by moving 300 pixels to the right and returning to the original position. Box1.prototype. Update = Function  (){  This  . $ Element. animate ({marginleft: "+ 300px" }, 1000 ). Animate ({marginleft: "0px" }, 100 );};  Function  Box2 ($ element ){  This . $ Element =$ Element;} box2.prototype = New  Ibox ();  //  This update implements the effect of flickering and moving, and the border size also changes. Box2.prototype. Update = Function  (){  This  . $ Element. animate ({opacity: "Hide" , Borderwidth: "10px" }, 1000, "Swing ", Function  () {$ ( This  ).Css ({marginleft: "100px" });});  This  . $ Element. animate ({opacity: "Show" , Borderwidth: "20px" }, 1000, "Swing" );  This  . $ Element. animate ({opacity: "Hide" , Borderwidth: "2px" , Marginleft: "0px"}, 1000, "Swing ", Function  () {$ (  This ). Fadein (1000 );});};  Function  Box3 ($ element ){  This . $ Element = $ Element;} box3.prototype = New  Ibox ();  //  This update implements the effect of changing the width, first to 900px, then to 100px Box3.prototype. Update =Function  (){  This  . $ Element. animate ({width: "900px" , Height: "100px" }, 1000 ). Delay ( 500 ). Animate ({width: "100px" , Height: "100px" }, 1000 );}; 

 

 

Finally, organize all the code and display it in HTML to see the effect, which is good: (test in chrome), click the button below, all the squares are moving! Haha.
In fact, there is a reason for doing this. I tried to write an animation engine before, but I can only apply the animation effect to one element, which is quite frustrating, however, the color-changing feature is implemented (jquery does not contain the color-changing API, so I have to say that I am sorry, so how can I achieve a multi-element animation? After learning the observer mode, I finally found the answer (but you can also bind events directly with jquery, but with a learning attitude, so let's do this ,:))

Finally, pack my code. If you are interested, you can download it and directly run the HTML file to view the effect (preferably in chrome ).

Demo address: http://jsfiddle.net/everdom/sBA2B/embedded/result/

Attachment: http://www.kuaipan.cn/file/id_18761907502579748.htm