![見出し画像](https://assets.st-note.com/production/uploads/images/57729204/rectangle_large_type_2_fdffb3540911adf998d22dd88a445281.png?width=1200)
【Robo Blocksの使い方】簡単なアニメーションを作る
ソフトバンクロボティクスでPepperを使ったプログラミング教育を担当してる佐藤です!
今回はRobo Blocksを使って、Pepperのタブレットに簡単なアニメーションを表示する方法を紹介します。
準備
現バージョンのRobo Blocksではgifアニメーションを使用することができません。
そのため、jpgかpngの静止画を使ってアニメーションを表現する必要があります。
静止画でアニメーションを作るためには、パラパラ漫画のように画像を切り替える必要があります。
下記のように1部分が変化した画像を用意しましょう。
![数字入力 (2)](https://assets.st-note.com/production/uploads/images/57729713/picture_pc_40529f315355d346f5d4741da6c553ce.jpg?width=1200)
![数字入力 (3)](https://assets.st-note.com/production/uploads/images/57729726/picture_pc_684a948c0d872eebe820d0634fecfdc9.jpg?width=1200)
![数字入力 (4)](https://assets.st-note.com/production/uploads/images/57729735/picture_pc_3971f321e3ed38eaf1f276348c697cfd.jpg?width=1200)
作り方
画像を用意したらRobo Blocksにアップロードします。
全ての画像をアップロードしたら、画像を表示するボックスでそれらの画像を切り替えて表示しましょう。
アニメーションの切り替えスピードを、いろいろ試せるように切り替え時間は変数にしておくと便利です。
![スクリーンショット 2021-07-28 22.10.23](https://assets.st-note.com/production/uploads/images/57730093/picture_pc_9cc757029bd09a97f5dee83ee1186a10.png)
これですと1度だけアニメーションして終わってしまいますので、無限に繰り返すように設定します。
以下の例では、頭が触られるまでアニメーションを繰り返すように設定しました。
![スクリーンショット 2021-09-28 12.56.53](https://assets.st-note.com/production/uploads/images/62249554/picture_pc_19a3118c07de3a9a5d1b2514b0bf89b6.png?width=1200)
再生してみると、以下のようにアニメーションになっていることが確認できると思います。
![アニメ](https://assets.st-note.com/production/uploads/images/57730799/picture_pc_d542d3aea0fdd6d816c50d3e8e6fcb4b.gif)
まとめ
今回は簡単なアニメーションを作る方法を紹介しました。
特に人にタッチしてもらうのを待っている場面など、Pepperが待機しているような場面では画面を賑やかにすることができるのでオススメです。
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ソフトバンクロボティクス株式会社 ホームページ
https://www.softbankrobotics.com/jp/
Pepper教育関係者フォーラム
https://pepper-schoolchallenge.com/
Pepper for Education
https://www.softbankrobotics.com/jp/product/education/
STREAMチャレンジ
https://www.softbankrobotics.com/jp/product/academy/stream/
━━━━━━━━━━━━━━━━━━━━Pepperブログ編集部━┛