用觀察者模式實現網頁動畫

我覺得觀察者模式是非常棒的模式，關于它的應用可謂非常之多啊，本著學習的態度，我用js進行了一次實踐，做的一個觀察者模式構建的網頁動畫，最后的效果是，點擊按鈕就會使得三個方塊做各自的動畫

我覺得觀察者模式是非常棒的模式，關于它的應用可謂非常之多啊，本著學習的態度，我用js進行了一次實踐，做的一個觀察者模式構建的網頁動畫，最后的效果是，點擊按鈕就會使得三個方塊做各自的動畫。如圖：

初始狀態

運動過程中截圖

那么具體是怎樣實現的呢？大致說一下思路吧：

1. 首先創建觀察者和被觀察者接口：

//被觀察者接口function IObserverable()
{
}
IObserverable.prototype={
    addObserver:
        function(observer){},
    removeObserver:
        function(observer){},
    notify:
        function(){}
};
//觀察者接口
function IObserver()
{
}
IObserver.prototype={
    update:
        function(){}
};

2. 然后分別建立按鈕類這個被觀察者和三個盒子對象作為觀察者，
在這里，我使用了靜態的簡單工廠來創建按鈕對象和盒子的jQuery對象,代碼如下：

//簡單工廠
function SimpleFactory()
{

}
SimpleFactory.createBox=function(id, jStyles){
    var $box=$("<div></div>");
    $box.attr("id",id);
    $box.css(jStyles);
    $(document.body).append($box);//自動加入到頁面中，其實工廠是不應該負責頁面顯示的，但為了方便起見，暫時這樣做嘍
    return $box;
};
SimpleFactory.createButton=function(id, value, jStyle){
    var $button=$("<input type='button' />");
    $button.attr("id",id);
    $button.attr("value", value);
    $button.css(jStyle);
    $(document.body).append($button);
    return $button;
};
//創建jQuery對象的實例
    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",
        "點我吧",
        {
            width:"100px"
        }
    );

而真正的觀察者和被觀察者創建過程如下：

var button=new Button();
var box1=new Box1($box1);
var box2=new Box2($box2);
var box3=new Box3($box3);

3. 創建完所需的對象之后，就要將觀察者加入被觀察者的引用集合之中了：

button.addObserver(box1);
button.addObserver(box2);
button.addObserver(box3);

4. 然后添加相應的點擊事件即可：

$button.click(function(){
        button.notify();
});

以上只是個初步的骨架，因為觀察者和被觀察者的具體代碼沒有建立，所以不會造成任何影響，下面我就把具體的觀察者和被觀察者的代碼貼出來，特別是觀察者的update方法，每一個update方法都能使自身產生某種動畫效果：

//按鈕類（被觀察者）
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.notify=function(){
    for(var i=0; i<this.observers.length; i++)
    {
        this.observers[i].update();
    }
};
//盒子類（觀察者），Box1, Box2, Box3 extends IBox
function IBox()
{
}
IBox.prototype=new IObserver();

function Box1($element)
{
    this.$element=$element;
}
Box1.prototype=new IBox();
//這個update實現向右移動300像素然后回到原位的效果
Box1.prototype.update=function(){
    this.$element.animate(
    {
        marginLeft:"+300px"
    },1000)
    .animate(
    {
        marginLeft:"0px"
    }
    ,100);
};

function Box2($element)
{
    this.$element=$element;
}
Box2.prototype=new IBox();
//這個update實現忽隱忽現并移動的效果，同時邊框大小也會變化
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();
//這個update實現寬度改變的效果，先變到900px，再變到100px
Box3.prototype.update=function(){
    this.$element.animate({
        width:"900px",
        height:"100px"
    },1000)
    .delay(500)
    .animate({
        width:"100px",
        height:"100px"
    },1000);
};

最后，將所有的代碼組織起來用一個html顯示，就能看到效果了，還不錯啊:) ，（在chrome中測試），點擊下方的按鈕，所有方塊開始運動了！哈哈。
其實做這個是有原因的，之前自己試著編寫過一個動畫引擎，但只能對一個元素應用動畫效果，很挫啊，不過實現了變色的功能（jquery里面沒有變色的API，不得不說有些遺憾），嘻嘻，蠻有趣的，所以我就想怎樣實現一個多元素的共同進行的動畫呢？學了觀察者模式之后，終于找到了答案（不過其實也可以直接用jQuery綁定事件就行了，但本著學習的態度嘛，所以搞這么一個，:)）
最后把我的代碼打個包吧，大家有興趣可以下載，直接運行其中的html文件查看效果（最好是在chrome下面運行）。

演示地址：http://jsfiddle.net/everdom/sBA2B/embedded/result/

附件：http://www.kuaipan.cn/file/id_18761907502579748.htm

posted @ 2012-08-09 20:09 everdom 閱讀(1429) 評論(0) 收藏舉報

刷新頁面返回頂部

深海拾貝

智慧與思想碰撞，科學與藝術匯合。

用觀察者模式實現網頁動畫

公告

深海拾貝

智慧與思想碰撞，科學與藝術匯合。

用觀察者模式實現網頁動畫

公告

智慧與思想碰撞，科學與藝術匯合。