Adding animations

絵本アプリには物語をわかりやすく,読み手にとって面白いものにするためにアニメーションをつけことがあります.ページのタイトルと2つのボタンにアニメーションをつけます.では,タイトル部分から始めましょう.

先ず Titleレイヤーを選択し,次にToolset Animationsのツールセット(ロケットのアイコン)から、Linear Animationを選択します。

下記のウィンドウが開きます:

Linear Animation はある点A(スタート)から点B(ゴール)まで移動させます.このA->Bの移動の間,様々なアニメーション設定を与えることができます. 例えば

  • Fixed end positions(終了地点の指定)
    • x, y: 73, 70
  • duration: 3 seconds (アニメーションの時間)
  • loop: 1 times (ループ回数)
  • easing: outBounce (補間)

    Kwikは選択されたレイヤーの現在地点をstart pointとして扱います.今回のケースでは,設定しないといけないのはアニメーションの終了する場所です。スライダー操作もしくはテキストフィールドに値を設定します, 指定した場所がアニメーションの停止する場所になります.では animation duration の項目を3seconds,loopを1 times,easingをoutBounce(少し跳ねるような補間)に設定しましょう.

Createボタンを押してアニメーションを作成します。Linear Animation が下図のようにComponent view に追加されます。

パブリッシュ

Publish ボタンを押してコードを生成してみましょう.

注意:画像は、前回に全て読み込みされ、出力されていますので,画像出力を再度行う必要はありません.Export imagesボタンを灰色にして無効にしてください.無駄な読み込みがなくなりパブリッシュの時間が早くなります.

 開始地点

コンテンツの位置を動かしたい場合はそのコンテンツのレイヤーをドラックして新しい場所に持っていくか,Windowsの場合は(Ctrl+T),Macの場合は(Command+T)を押しFree Transformを適用します.これがアニメーションの開始地点になります.

終了地点

アニメーション設定で、X,Y座標を入力すると,その地点がゴール地点となります.

オブジェクトを隠す

アニメーションの作り方を学んだので,次にタイトルのアニメーションが終了したら、出現するボタンを作成しましょう.

1ページ目が始まったときにはボタンが見えてしまうと不都合です.このボタンは,見えない状態でアプリが開始されて、タイトルのアニメーションが終わったときに、見えるようにならなければいけません.それでは readToMeレイヤーを選択しましょう. Toolbox Project and Pages(一番最初のアイコン)に移動して,Hide layer or group を選択します.すると下記のウィンドウが開きます:

アプリ開始時に、ボタンが隠されます.同様の操作を readMyselfレイヤーでも行いましょう.

次に,ボタンが現れるようにアニメーションをつけます.もう一度各レイヤーを選択して、Linear Animationを付加させます:

  • duration: 2 seconds
  • delay: 2 seconds
  • loop: 1 times
  • easing: Linear
  • alpha: 100% (不透明度)

このシナリオでは,ページがロードされてから2秒間で完全に透明な状態(alpha: 0%)から見える状態(alpha: 100%)に遷移するように設定しました. そしてこの動作は一度のみ発生します.

以下の画像のようにlinear_readMySelf と linear_readToMeが作成されました.ここまでで下の画像のように項目が追加されていれば大丈夫です.

もう一度パブリッシュしてみて,ボタンが2秒後に現れるかどうか確認してみましょう.

results matching ""

    No results matching ""