升級進度條動畫的處理思路

 

養成模塊，經常有升級進度條，每次進度條滿了之後會升級，然後進度從0開始累積。

最開始想到的方法（根據需求直接翻譯的需求，有時候策劃給出的邏輯，不一定要按照策劃的邏輯來寫，換一種邏輯也可以，只要最後達到的效果是一樣的就行）是每次升級完成之後，減掉升級已經消耗得進度值，然後再撥進度條動畫，再次滿進度之後，再減再播動畫，這樣寫也不是不可以，但是很容易出問題，這裏提供一個更簡單的思路。

獲得進度值之後，先判斷能否升級，能升級直接判斷能升多少級，能升多少級就播放多少次滿進度進度條動畫，最後一次播放的時候，播到剩餘進度值就停止；如果不能升級，則進度條直接播動畫延長到指定值即可。這裏也涉及到滿級問題，參見另一篇博文關於升級模塊是否滿級的詳細描述https://blog.csdn.net/qq_22794043/article/details/88114963

//打開view的時候初始化isTweening爲false，關閉view的時候，重置isTweeing爲false
isTweening = false;
//打開view的時候，初始化進度條位置,sw和preSw爲全局變量，可根據實際情況，將變量定義爲指定數據類型
private var sw:*;
private var preSw:*;
private function initProgressBar():void{
    sw = model.getInstance().sw;
    /**preSw = model.getInstance().sw;
    * 注意，這裏不能這麼寫，原因是這麼寫是引用賦值，sw與preSw永遠全等，
    * 無法做進度條升級重置的處理
    */
    var lv:int = model.getInstance().level;
    preSw.level = lv;
    if(preSw == null || sw == null){
        return;
    }
    var cfg:Qexcel = Tb.getInstance.getCfgByLevel(sw.level);
    progressBar.scaleX = sw.progress / cfg.levelUpProgress;
}

//信息變更，計算進度條變化情況
private function infoUpdate():void{
    //preSw爲進度變更前的信息，sw爲進度變更後的信息
    //preSw雖然爲存儲在view類的臨時變量，但是這裏不是用完即刪，
    //因爲界面打開過程中可能會再次調用。sw則直接從model裏面取最新的數據
    sw = model.getInstance().sw;
    if(preSw == null || sw == null){
        return;
    }
    var cfg:Qexcel = Tb.getInstance.getCfgByLevel(sw.level);
    var cfgNext:Qexcel = Tb.getInstance.getCfgByLevel(sw.level+1);
    if(preSw.level == sw.level){
        //沒有升級,levelUpProgress爲當前等級升級所需要的進度，sw.progress爲當前等級積累的進度
        proTargets.push(sw.progress / cfg.levelUpProgress);
    }else{
        //升級了，進度條播滿之後需要再從0播放當前進度
        var addLv:int = sw.level - preSw.level;
        for(var i:int = 0;i<addLv;i++){
            //滿進度爲1
            proTargets.push(1);
            if(nextVo){
                //如果沒有滿級，進度條播滿之後重置爲0，如果滿級了，進度條保留爲滿進度
                proTargets.push(0);
            }
        }
        //播放完滿進度動畫後，剩餘的應顯示進度
        proTargets.push(sw.progress / cfg.levelUpProgress);
    }
    if(proTargets.length>0&&!isTweening){
        //把數組的第一個元素從其中刪除，並返回第一個元素的值
        tweenProgress(proTargets.shift());
    }
}

//播放進度條動畫
private function tweenProgress(target:Number):void{
   if(target == 0){
 //在這裏做相應的升級處理，伴隨進度條每次重置，有些東西可能需要實時變化，如進度條上面的等級進度文字
        //升級了，+1
        preSw.level +=1;
    }
    isTweening = true;
    //speed可根據需求自行調節快慢,speed = 1000ms/進度條從0到1需要的時間（ms）
    var speed:int = 100;
    var duration:Number = 0;
    if(target == 0){
        duration = 10;
    }else{
        duration = (target - progressBar.scaleX)*speed;
    }
    Tween.to(progressBar,{scaleX:target},duration,Ease.bounceInOut,
    Handler.create(this,
        function():void{
            if(proTargets.length>0){
                //沒播完繼續播下一個進度條動畫
                tweenProgress(proTargets.shift())
            }else{
                isTweening = false
            }
        }
    ));
}

//關閉界面的時候，如果進度條動畫還沒播完，則強制清除掉
override protected function onClose():void{
    super.onClosed();
    Tween.cleaAll(progressBar);
    //移除監聽
    removeLis();
}