Kony Visualizerでアニメーションを作成する（Controller上で設定する場合）

#目次
1. はじめに
2. KonyのAnimateの基本的な説明
3. 実装準備
4. 実装の確認
3. まとめ

#はじめに
アプリを開発する際にアニメーションは欠かせません。
アニメーションを作成したい場合、
KonyではGUIで設定する方法と、Contoller上で設定する方法の2通りがありますが、
細かなアニメーションを作成したい場合、後者の作成方法で実行できますので、
今回はその方法についてご紹介したいと思います:relaxed:

GUIでアニメーションを作成する方法はこちらをご覧ください。
https://qiita.com/Kony_Team/items/fe366974dd72dc2af345

#Konyのanimateの基本的な説明
**animate**は（animationObj、animationConfig、animationCallbacks）で構成されています。
**AnimationObj**:アニメーションを定義するオブジェクトを作成します。kony.ui.createAnimationのAPIを使用します。
**AnimationConfig**：アニメーション中のオブジェクトの表現動作を指定します。例えば、アニメーションの時間等があげられます。
**AnimationCallbacks**：関数を呼び出すことができます。AnimationStart：アニメーション開始時、AnimationEnd：アニメーション終了時。

#実装準備

今回は3人の子供が同時に走り出すアニメーションを作成したいと思います。
完成イメージは↓のようになります。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/TtdijCCTQF">pic.twitter.com/TtdijCCTQF</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1346991249589354501?ref_src=twsrc%5Etfw">January 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

3人がそれぞれのペースで走るアニメーションとなるように、設定していきましょう！

**画面の作成**
このような画面を作成してみました。
![スクリーンショット 2021-01-07 10.30.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/21baa3bb-39b4-cb8e-eaa6-f07daf0296f5.png)

フォームを新規作成し、ImageWidgetを配置して、
Imageタブ => Source => Editをクリックしてそれぞれ画像を指定してください。
![スクリーンショット 2021-01-07 10.32.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/906788e6-cebe-a4da-62a0-14fa48248da0.png)

動かす対象を作成できたので、
次にControllerでアニメーションを設定する方法を紹介します。

###実装方法：

**`Form1Controller.js`の設定**

```Form1Controller.js
define({ 
  animateWidget: function(){
    var self = this;
    //男の子が走るアニメーションを実行
    self.view.imgBoy.animate(self.animateDefBoy(), self.animateConfig(), {
      animationStart: function(){},
      animationEnd: function(){}
    });
    //女の子が走るアニメーションを実行
    self.view.imgGirl.animate(self.animateDefGirl(), self.animateConfig(), {
      animationStart: function(){},
      animationEnd: function(){}
    });   
    //女の子がゆっくり走るアニメーションを実行 
    self.view.imgGirlWalk.animate(self.animateDefWalkGirl(), self.animateConfig(), {
      animationStart: function(){},
      animationEnd: function(){}
    });    
  },

  //アニメーションの実行タイミングを指定
  animateConfig: function(){
    var config = {
      "duration": 3,
      "iterationCount": 1,
      "delay": 3,
      "fillMode": kony.anim.FILL_MODE_FORWARDS
    };
    return config;
  },
  //走る男の子のアニメーションの設定
  animateDefBoy: function(){
    var animDefinition = 
        {
          0: {
            "left":0
          },
          100: {
            "left": 400,
          }
        } ;
    var animDef = kony.ui.createAnimation(animDefinition);
    return animDef;
  },
  //走る女の子のアニメーションの設定
  animateDefGirl: function(){
    var animDefinition = 
        {
          0: {
            "left":0
          },
          50: {
            "left":100
          },
          75: {
            "left":200
          },
          100: {
            "left": 400,
          }
        } ;
    var animDef = kony.ui.createAnimation(animDefinition);
    return animDef;
  },
  //ゆっくり走る女の子のアニメーションの設定
  animateDefWalkGirl: function(){
    var animDefinition = 
        {
          0: {
            "left":0
          },
          25: {
            "left":100
          },
          50: {
            "left":200
          },
          75: {
            "left":300
          },
          100: {
            "left": 400,
          }
        } ;
    var animDef = kony.ui.createAnimation(animDefinition);
    return animDef;
  },
});
```

上の説明を行います。
アニメーションをContollerで作成する場合、
`対象のWidget.animate(animationObj, animationConfig, animationCallbacks)`
でアニメーションを生成することができます。

**animateConfig**：どのタイミングでアニメーションを行うか設定ができる関数です。

今回は、開始3秒後に一斉にスタートダッシュを切りたいため、`delay`の値を3に設定しています。
また、3秒かけてアニメーションを実行したいため、`duration`の値も3秒に設定しています。

下にanimateConfigで使用する値について簡単に説明します。

| 値 | 説明 |
| ------- |  ------- |
| duration | アニメーションが1サイクルを完了するのにかかる時間を秒単位で定義します。 |
| iterationCount  | アニメーションサイクルが再生される回数を指定します。デフォルト値は1です。:large_blue_diamond:今回はここを0に設定して、無限ループさせています。 |
| direction | アニメーションを逆再生する必要があるかどうかを定義します。<br>**kony.anim.DIRECTION_NONE（デフォルト）**：アニメーションは、指定されたとおりに再生されます。<br>**kony.anim.DIRECTION_ALTERNATE**：カウントが奇数の場合、アニメーションサイクルの反復は指定方向に、カウントが偶数の場合、アニメーションサイクルの反復は逆方向に再生されます。|
| delay | アニメーションがいつ開始されるかを定義します。 |
|fillMode| アニメーションが終了した時のウィジェットに適用される値を定義します。 |

**animDefinition**：アニメーションを実行する0~100%の間で、どんな動きをさせたいか設定できる値です。

今回走る男の子には、`animateDefBoy`を設定しており、
速いペースで一気に走りきるように値を指定しています。

走る女の子には、`animateDefGirl`で設定をしており、
最初ゆっくりのペースで後から追い上げるようなアニメーションとなるよう値を指定しています。

ゆっくり走る女の子には、`animateDefWalkGirl`を設定しており、
一定のゆっくりペースでゴールするよう指定しました。

ちなみに、GUIでアニメーションを設定した場合、
内部でどんな処理が実行されているか確認したい場合、
`Generate Code`をクリックすると内部処理が確認できます。
![スクリーンショット 2021-01-06 11.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e25e201a-3b1d-31d7-16f9-01e1ebae26f2.png)

flxGUIに設定したアニメーション処理の内容をみてみると、
100%の場合の動きのみ設定されていることがわかります。
![スクリーンショット 2021-01-06 11.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3a69c893-bea4-af2f-c47c-dc7c3d18bc13.png)
こちらの動きを細かく設定したい場合、Contollerでのアニメーションを作成すると良いでしょう。

ここまでで、
Controllerでアニメーションを設定する場合の準備が完了しました。

実際にどうなるかみていきましょう！

#実装の確認
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/TtdijCCTQF">pic.twitter.com/TtdijCCTQF</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1346991249589354501?ref_src=twsrc%5Etfw">January 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

3人それぞれが、
速いペース、ゆっくりペース、一定のペースでゴールしていることがわかります！
このようにアニメーションに緩急を付けたい場合や、抑揚を付けたい場合は、
Controllerでの設定で行うことができます:relaxed:

#まとめ
Contoller上で細かなアニメーションの設定を行う紹介を致しました。
GUIの設定で十分様々なアニメーションを実行できますが、
より細かなアニメーションが必要な場合などは、是非参考にしてみてくださいね＾＾！


#参考
アニメーションのプロパティ、イベント、メソッド: 
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Widget_Level_Animations/Widget_animatable_properties.htm

アニメーションコンフィグ：
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Widget_Level_Animations/Animation_Configurations.htm

kony.ui.createAnimation：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.ui_functions_createanimation.htm