この文書は、Framerを学ぶ日本のユーザーが日本語資料の不足で直面している困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様に少しでも役立つことを願っています。

落書き効果で伝える創造性と個性

ウェブサイトに落書き要素を追加すると、創造的で遊び心のある雰囲気を伝えることができます。このプロジェクトは リミックスして要素をコピー・貼り付けすることができ、好みに合わせてカスタマイズすることも可能です。コーディングなしで細かくダイナミックな落書き効果を作れるのが利点です。

ドローイングアニメーション

落書きが描かれるようなアニメーションは、@benjaminnathan が作ったAnimator コンポーネントを使って実現できます。ScribbleにAnimatorをつなげると、簡単に落書きしているような効果が完成します。

このプロジェクトは、特定のセクションが画面に表示された時にアニメーションが開始されるように構成されています。それには、二つのVariantsを持つコンポーネントを作成し、一つはAnimatorが隠れている状態（Default）、もう一つはAnimatorが表示されアニメーションが実行される状態（Animate）です。Scroll Variant Effectを適用し、画面に表示された時に自動で切り替わるように設計しました。

微細な動きの設定

落書きに微細な動きを持たせるには、同じ落書きに二つの変形コンポーネントを作って変化を付ければ良いです。

二つの変形コンポーネントの形を少し異なるようにし、Appear Interactionをつないで往復アニメーションを実行します。Delayを0.2秒に設定すると滑らかで自然な動きが演出できます。ページに活気とリズム感を加えつつも、過度に表現しないようにできます。

落書きの配置

テキストコンテンツはStackで整理し、落書きはAbsolute Positionで配置してレイアウトを少し崩すように演出しました。PropertiesパネルのPosition TypeでAbsoluteを選んで自由に位置を決められます。こうすることで整然としたテキストの間で落書きがより動的に動くような効果を与えます。

さらなる落書きを見る

このプロジェクトにはもっとたくさんの落書きが含まれており、前述の方法を使って落書きアニメーションを適用することができます。これを利用して多様な場所に配置し、変形を加えながら自由に使ってみてください。

Remix →

この記事は、Framer公式ブログの「Incorporating dynamic scribbles into your website」を翻訳・改編したコンテンツです。