このドキュメントは、Framerを学ぶ国内ユーザーが日本語資料の不足によって直面する課題を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆さんに少しでも役立つことを願っています。

エフェクトおよびリミックスプロジェクト→

このプロジェクトをリミックスすることで学べるのは、アニメーションセグメント制御をどのように設定するか、イベントを使って他のコンポーネントとどのように結合するか、また自動再生ギャラリーを作成する方法です。

例を通して、あなたはアニメーションセグメント制御を作成し、イベントを利用して他のコンポーネントと接続し、自動で再生されるギャラリーを実装する過程を学ぶことができます。最も良い点は、このプロジェクトを自分でリミックスして、自分のニーズに合わせてカスタマイズできることです。

制御コンポーネント

まず、Controlコンポーネントを詳しく見てみましょう。このコンポーネントは2つのスタックで構成されています。上部のスタックにはクリック可能なアイテムが含まれており、各アイテムは他のVariantに切り替わりながら同時にイベントを発生させます。このイベントは後でGalleryコンポーネントで正しいVariantに切り替えるのに重要です。

下部のスタックはボタンの位置を制御します。アクティブな状態をアニメーション化すると、ボタンが各Variantで異なる位置に動き、残りはFramerが自動的に処理します。これにより、整然とした完成度の高いセグメント制御を簡単に作成できます。

自動再生ギャラリー

次に写真コンポーネントを見てみましょう。このコンポーネントは数枚の写真を重ねた単純な構造です。各Variantでは不透明度が変わることで、どの写真が表示されるかが異なります。これに一定時間が経過すると次の写真に移る設定を加えると、自動再生するギャラリーを簡単に作成できます。

ギャラリーコンポーネント

次にControlとPhotosコンポーネントを組み合わせてGalleryコンポーネントを作成します。ここでは3つのVariantを作成し、2つのコンポーネントをそれぞれ正しいVariantに合わせて設定します。以前にControlコンポーネントで作成したイベントを活用し、イベントが発生するとGalleryコンポーネントが適切なVariantに切り替わるように接続する方法です。

ギャラリーコンポーネントのカスタマイズ

最後のステップではVariantに簡単なインタラクションを追加します。こうすることで、一定時間が経過した後に自動で次のVariantに転換するように設定できます。

また、ControlとPhotosコンポーネントの変数をギャラリーコンポーネントを通じて露出させておきました。これにより、このコンポーネントを再利用したり、CMSに接続したりすることが簡単になります。

結論

全体として今回のプロジェクトは、コードを一行も書かずに再利用可能で反応型のギャラリーコンポーネントを作成するプロセスを学ぶ良い機会です。さらに、リミックスして希望通りにカスタマイズすることも可能です。

ですので、ためらわずにプロジェクトを開いてスタートしてみてください。

エフェクトプロジェクトを試す→

本記事はFramer公式ブログの‘Creating an auto-playing gallery — learn with a free Framer project’を翻訳・アダプテーションしたコンテンツです。