[開発]] ES6遠位約束属性アニメーションパッケージJS

ここで私は、デモのソースコードを書いたものです。

あなたは、ああ効果を確認するために開くためにブラウザで直接コピーすることができます。

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <メタ文字セット= "UTF-8"> 
        <タイトル> </ TITLE> 
        <スタイルタイプ= "テキスト/ cssの"> 
            #box { 
                幅：は50px; 
                高さ：は50px; 
                背景：赤; 
                位置：絶対; 
                左： 0 ; 
                トップ： 0 ; 
            }
         </スタイル> 
    </ HEAD> 
    <BODY> 
        の<divのid = "ボックス"> </ div> 
       <スクリプトタイプ= "テキスト/ javascriptの">
           
            戻り 新しいプロミス（（RES、REJ）=> {
                  VAR B = のparseInt（getComputedStyle（OBJ）ATTR]）;
                  VARの C =ターゲット- B;
                  VARの D = 期間;
                  VARの温度= 新しい。日付（）getTime（）;
                  VaRのタイマー=たsetInterval（関数（）{
                      VARの T = 新しい日付（）getTime（） - 温度;
                      もし（T> = D）{ 
                         てclearInterval（タイマ）; 
                         T =D; 
                     }     
                 VARの V = C / B + T D *; 
                 obj.style [ATTR] = V + 'PX' ;
                  IF（T === D）{ 
                     RES（）
                 } 
             }、 20である）
         }）
         } 
         // 約束パッケージが無限軌道アニメーション、簡潔なコード増加させることができる後 
         movePromise（ボックス、 "幅"、200500 ）
         .then（（） => movePromise（ボックスは、 "左"、300、100 ））
         .then（（） => movePromise（ボックス、 "トップ"、300、100 ））
         .then（（） => movePromise（ボックス、 "高さ"、300、100 ））
         .then（（）=> movePromise（ボックス、 "上部"、100300 ））
         .then（（） => movePromise（ボックス、 "上部"、200,300 ））
         .then（（） => movePromise（ボックス、 "上部"、150300 ））
        < /スクリプト> 
    </ BODY> 
</ HTML>

ソースアニメーショントラックとして：

--- ---右方向は下向き上向き増加---移動動かさ - ---移動上向きの下方移動を（移動時間が制御を所有することができます）

[開発]] ES6遠位約束属性アニメーションパッケージJS

おすすめ