Adobe XDで画像をアニメーション化

Adobe Studioチームのデザイナー、Cynthia Fong氏は、あらゆるクリエイティブプロジェクトに情熱を注ぎ、人々を刺激する制作に取り組んでいます。

Larson氏は、2つ目のアートボードを複製することから作業を開始します。アートボード名をクリックして、Alt（Windows）またはOption（macOS）キーを押しながらアートボードを右側にドラッグします。

Adobe XDのアートボード間でオブジェクトをアニメーション化するには、レイヤー名が一致している必要があります。アートボードを複製すると、レイヤー名を維持して複製されます。2つ目のアートボードから上のアイスを削除し、アイスクリームコーンを上に移動します。次に、新しいScoops - 2用に文字と金額を更新します。

プロトタイプは最終的に5つのアートボードになります。前の手順と同様にアートボードを複製していきます。複製したアートボードから2つ目のアイスを削除してコーンを上に移動し、文字と金額を更新します。さらにこのアートボードを複製して、最後のアートボードから文字を削除します。

アセットパネルのコンポーネントセクションには再利用可能な要素があり、このアプリデザインでいつでも使用できます。注文を促すコピーテキストとボタンのグラフィックスを最後のアートボードにドラッグします。

プロトタイプモードに切り替えて、インタラクションを定義します。最初のアートボードをクリックして、ワイヤーを2つ目のアートボードにドラッグします。次に、トリガーを「タップ」に、アクションを「自動アニメーション」に設定します。XDではアニメーション設定が保持されるため、効率的に繰り返し同じ設定を適用できます。各アートボードから次のアートボードにワイヤーをドラッグし、最初のアートボードに戻します。最後に、デスクトッププレビューでインタラクションをテストします。

モバイルアプリ用に楽しいインタラクティブアニメーションをデザインしましょう。

注意：このチュートリアル付属のプロジェクトファイルは練習目的でのみご利用ください。