この文書は、Framerを学ぶ日本国内のユーザーが、日本語資料の不足による困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様の小さな助けとなれば幸いです。

始めに

まず、ボタンに入れる星を描きます。サイズを様々に設定し、そのフレームをコンポーネントに変換して、いくつかのバリアントを作成します。それぞれのバリアントでは、一つの星が大きくなり、他の星が小さくなるように設定します。その後、オン アピアーインタラクションを連結すると、指定された時間間隔で自動で切り替わるアニメーションが完成します。

自動再生アニメーションを作る

同じ方法で、シマーアニメーションを作成することができます。

• 一つは左から右へ

• もう一つは右から左へ

このように二種類のアニメーションを作成した後、ボタンの上下にそれぞれ配置します。そして紫の背景を被せて上下2pxの部分だけ見えるようにすると自然な輝きが演出されます。

ディテールを追加する

ボタンを一層特別にするためにディテールを追加してみましょう。ここでは有名なパーティクルコンポーネント（@benjaminnathan作成）を活用します。particles.pageから取得でき、✦ 文字を活用して小さな星が散らばるような効果を作ることができます。

ホバー状態で不透明度 1に切り替わるように設定すると、マウスを置いたときに柔らかい星光が現れます。最後に円形のグラデーションレイヤーを上に重ねて、遠くのパーティクルが見えないように処理すればスッキリと仕上がります。

ボタンの例を見て真似してみよう→

この記事はFramerの公式ブログ『FramerでAIボタンを作成する』を翻訳・改編したコンテンツです。