バーアニメーションの不具合対応編 PHPポケモン 54

開始地点０％問題

プログラミングでの基本は不具合の原因を突き止めることです。エラーが出ていればそれを辿っていくだけなのですが、今回はエラーが出ていないため、ある程度目星をつけて当たっていく必要があります。

そして、実際のcssの変動値を確認することでその問題が判明しました。

そうです、HPのアニメーションが開始されると、widthが０％にリセットされています。これは、開始位置が０％、終了位置が残りHPの割合となっているからです。

もしHPが満タン（１００％）で計算結果が７０％の場合、animateメソッドが起動することでHPが０％になります。そこでcssの動きとしてHPバーが減っていくのですが、animateメソッドによりwidthを７０％にするという動きも介入するため、平行的に処理が行われているのでしょう。（予想）

対応方法

とにかく、開始位置の０％をどうにかしなければ、よりスムーズなHPバーの演出はできません。ですが、animateメソッドでは開始位置を設定する方法がありません。

開始位置がセットできるとなれば、まず最初に上がったのがcssのkeyframesです。しかし、jQueryの標準機能ではkeyframesはセット出来ませんし、毎回値も異なります。なので、これを動的にセットする方法がないかを探しました。

そこでたどり着いたのが「jQuery.Keyframes」というライブラリです。今回は、こちらのライブラリを使ってanimateでは対応できなかったHPバーの演出を再度作成します。

キーフレームの設定

 このライブラリの仕組みとしては、まずキーフレームを作成し、そこから要素に対して用意されたキーフレームのアニメーションを割り当てるといったものです。

なので、まずはHPバー用のキーフレームを作成します。

メッセージ用JS（/Public/Assets/js/Battle/message.js） 

// コードの先頭（グローバル）でjquery.keyframeを有効可
var supportedFlag = $.keyframe.isSupported();
 
// doAnimateHpBar関数内
$.keyframe.define({
    name: target + 'hpbar-animation',
    from: {
        width: hpbar.width()
    },
    to: {
        width: width + '%'
    }
});

キーフレーム名については、相手ポケモンとの重複を回避するためにも、接頭語にtargetを付与しました。あとはfrom（開始位置）に現在のHPバーの長さ、to（終了位置）に算出結果をセットするだけです。

これでキーフレームが用意できたので、次に要素に対してアニメーションを割り当て、実行します。animateメソッドを以下のplayKeyFrameメソッドに置き換えましょう。

hpbar.playKeyframe({
    name: target + 'hpbar-animation',
    duration: '1000ms',
    timingFunction: 'ease',
    delay: '0s',
    iterationCount: 1, // 繰り返し回数
    direction: 'normal',
    fillMode: 'forwards',
    complete: function(){
        // 処理完了(css変更のズレがあるため0.5秒後にresolveを返却)
        if(target === 'friend'){
            // HPバーの色チェック
            hpbar.removeClass('bg-success bg-warning bg-danger');
            if(width <= 20){
                hpbar.addClass('bg-danger');
            }else if(width <= 50){
                hpbar.addClass('bg-warning');
            }else{
                hpbar.addClass('bg-success');
            }
        }
        setTimeout(function() {
            resolve();
        }, 500);
    }
});

cssのanimationに必要なパラメーターを割り当て、completeにはanimateと同様のコールバック関数を宣言しています。

これで実際の動きを見てみましょう。

スムーズに動いてくれるようになりましたね。これでHPバーのアニメーション不具合修正は完了です。

レベルアップ処理

レベルアップバーについても同様にキーフレームを使って処理をしました。ですが、レベルアップ後の処理にだけ１つ追加の記述が必要です。

// ==============================================
// レベルアップ処理 =============================
//
/**
* 経験値バーのアニメーションを実行
* @param json
* @return Promise
**/
var doAnimateLevelUp = function(param){
    return new Promise ((resolve, reject) => {
        var expbar = $("#expbar");
        expbar.pauseKeyframe();
        expbar.hide();
        expbar.css('width', 0);

レベルアップ時、widthを０にしてリセットしていますが、そのまま０にしてもkeyframeが残っているためアニメーションが発火してしまいます。

それを防ぐためにも、経験値バーを非表示にする際、一緒にpauseKeyframeメソッドでアニメーションをストップさせておきましょう。

こうしておけば、レベルアップ時に経験値バーがリセットされ、残量計算でも正常に０スタートで始めることができます。