jQuery anime? それとも CSS Animation?


こんにちは !Fujiです!

ちょっと更新をサボってましたすみません・・・

さて、昨年ですが、ひょんな事から佐賀県の焼酎、「魔界への誘い」を知りまして、これを飲んでみたんですが結構美味しくて家に常備してみようかと思った次第です。鹿児島生まれの人間が言っていい事なのかはわからないですが。

まぁ、九州地方の焼酎は美味しいですよね!あと、カツ丼とか。ボルシチは知りませんけど。

本題に入ります。PepperのディスプレーはWebブラウザであるため、何かを表示するときにはHTML / CSS / JSでもいけるという話は過去の記事にあったかと思います。

CSSとJSが使えるということは、ディスプレー上でものを動かすこともできるわけです。手段としては3つ。自分でJSでゴリゴリ処理を書くか、jQueryの「animate」を使うか、CSSアニメーションを使うかです。

jQueryで書くとしたらこんな感じで、

CSSで書くとしたらこんな感じですかね。

ご存知かもしれませんが、CSSアニメーションの場合、オプションで「alternate」をつけると、アニメーション後、その状態を保持し続けてくれます。

ただ、これはちょっと体感なんですが、Pepperのディスプレーの性能を考慮すると、要素の位置を更新させながら動かすjQuery Animationよりも、
CSSアニメーションの方がいい感じがします。

実際に、ちょっとここで出すのは難しいのですが、実は世界時計アプリ開発時に、最初はjQueryでやってて、どうにもアニメーションがカクカクするのでCSSアニメーションに変更した事で気づいたんですよね。

ただ、CSSアニメーションを使うと、アニメーション終了時のコールバックを受け取れるかどうかちょっとわからないんですよね。

ただ、その場合は、アニメーションスタートのタイミングでChoregraphe側にシグナルを飛ばして、アニメーションの時間分Waitをかけて、そのあと次の動作をさせればいいのかな、と思います。

こんな感じで、作ってみれば、Pepperのディスプレーで表示要素をグリグリ動かせるようになって、さらにPepperアプリを作るのが得意なフレンズになれるような気がします!

それではまた!!

 

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です