本ドキュメントは、Framerを学ぶ国内ユーザーが韓国語資料の不足から感じる困難を解決するため、公式ブログの内容を韓国語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様に少しでも助けになれば幸いです。

アニメーションが好きなら、Framerが最近発売したループ機能の最新ニュースを喜ばれることでしょう。この機能を使うことで、終わりなく繰り返されるアニメーションを非常に簡単に作成できます。このチュートリアルでは、Framerの新しいループ機能を使って3つのアニメーションアイコンを制作する方法をご紹介します。

準備物

アニメーションアイコンを作るには、コンピュータにFramerがインストールされている必要があります。公式ウェブサイトからダウンロードでき、Framerの基本的なデザイン及びアニメーションツールの使い方を理解する必要があります。

始め方

1. Framerのインストールが完了したら、新しいプロジェクトを開始してください。

2. 次に、アイコンを配置するために新しいフレームを作成します。

3. フレーム内に3つの図形を追加し、お好みの位置に配置します。（このチュートリアルでは、円、四角、三角を例として使用します。）

アニメーションの作成

図形の配置が完了したら、次はアニメーションを作成してみましょう。

1. 最初の図形のフレームを選択し、右側のアニメーションパネルに移動します。

2. 'Effects'をクリックした後、繰り返し再生(Loop)を選択してください。（こうすることでアニメーションが終わりなく繰り返されます）

3. パネル内で望むアニメーション属性を設定してください。例えば、サイズ調整(Scale)属性にアニメーションを適用すると、図形が弾むような効果を作り出すことができます。

インタラクションの追加

アニメーションアイコンをさらに生き生きとさせるために、インタラクション機能を追加してみましょう。図形の1つを選択し、希望するインタラクショントリガーを設定します。Framerでは、クリック(Press)、ホバー(Hover)、ドラッグ(Drag) など様々なオプションを提供しています。
この例では、クリックインタラクションを利用してアニメーションを再生し、停止してみます。

まとめ

Framerの新しいループ機能のおかげで、複雑な設定をせずとも魅力的なアニメーションアイコンを簡単に作成できるようになりました。この内容に基づいて、自作アイコンを作成し、インタラクションまで追加してあなた独自のループアニメーションアイコンを制作してみてください。
効果とリミックスプロジェクトを見る

本記事はFramer公式ブログの‘Creating animated icons with Framer’s loop functionality’を翻訳・アレンジしたコンテンツです。