簡単! Bubbleでお手軽にアイコンアニメーションを実装する方法!

みなさんこんにちは! Ryoです!

普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。

今回はBubbleのデザインに悩んでる方向けにCSSなどを使わずに、お手軽にアイコンにアニメーションをつける方法を伝授します!
実はちょっとしたコツだけで簡単に実装できちゃうアイコンアニメーション!
知っておいて損はありません。

それでは行ってみましょう!

アイコンアニメーション:下準備

まずは下準備からです!

今回はアイコンにアニメーションをつけていく!といっても実際にはアイコンエレメントは使用しません!
実は「テキストエレメントでアイコンを表示できる」って知っていましたか?

実はBubbleはfontawesomeというアイコンサイトのアイコンをテキストエレメントに表示させることができます!

まずは、いつものようにBubbleエディタにテキストエレメントを配置していきましょう!
今回は、見栄えが良くなるように縦横それぞれ80pxで配置してあります。

次にfontawesomeのサイトに行ってどんなアイコンを使うか物色してみましょう!

fontawesomeでは有料プランも含めて7,865個ものアイコンを取り揃えています
これだけあればそこまでアイコンに困ることはないですね!

欲しいアイコンを検索して、いいアイコンがあったらクリックして詳細画面へ移動します。
今回はcubeという立方体のアイコンを使っていきます!

詳細画面にはこんな感じでいろんなcubeアイコンが並んでいるのでどれにしようか結構悩みますねw

それでは実装に移っていきます!

詳細画面左上のここ!
こちらに書いてある<i class=”fas fa-cube”></i>とかいてありますが、今回使うのはこの中のfa-cubeという部分です!

これをコピーしてBubbleエディタに戻ります!

先ほど設置したBubbleエディタにこんな感じでコードを書きます!

[fa] fa-cube [/fa]

fontawesomeと違って囲みの部分が<>ではなく[]なので注意が必要です!
アイコンによってはこちらのコードに対応していないものもあるみたいなので反応しなかった場合は潔く諦めるしかないですね

アイコンの色や大きさはテキストエレメントの色設定やfont sizeで調整可能なので適宜調整してみてください!

せっかくなのでBubbleカラーにしておきました!
ちなみにBubbleカラーは「#0205D3」です。

アイコンアニメーション:アニメーション実装

それではいよいよアニメーション実装へ参りましょう!

テキストエレメントの詳細設定から下の方へスクロールし、[Show text shadow]にチェックをつけます。
次に[Blur radius]を0にしたまま、[Horizontal offset]と[Vertical offset]を少しあげましょう!
そして色設定を元のアイコンと同じ色で透明度を50まで落としてみましょう!

するとこんな感じでアイコンにいい感じの影ができたと思います!

次にアイコンをホバーした時にこの影が表示されるようにconditional設定をしていきましょう!

先ほどアイコンに影をつけたので、今度はホバーしていない時にこの影を表示しないというconditionalを設定します。

次にアイコンが滑らかに表示・非表示を切り替えてくれるようにtransitionsを設定します。

今回は、影の表示・非表示に0.5秒かけるように指示出しをしました。

これでアイコンアニメーションは完成です!
早速プレビューでみてみましょう!

こんな感じで実装できたら完成です!
アイコンに少し遊びが欲しい時、ぜひ使ってみてください!

あとがき

今回も記事を読んでいただき、ありがとうございます!

今回はちょっとしたTipsということで、アイコンのアニメーション化について書いていきました。
実はデザイン面でもBubbleの初期機能を活用すれば対応できる部分って意外と多いんですよね!

またこんな感じのTipsも投稿しようと思っていますので気に入ったらTwitterやFacebookでシェアをお願いします!

それではまた、次回の記事でお会いしましょう!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次