コース: Adobe XD 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
時間トリガーを使用する
このレッスンでは 時間トリガーについて説明します。 教材として エクササイズファイルのフォルダーにある 10 フォルダーの中の 10_07.xd を使います。 Splash_screen01 というアートボードは スプラッシュ画面、もしくは ローンチスクリーンと呼ばれる アプリケーションを起動したときに 最初に表示させる画面をイメージして 作成してあります。 レイヤーパネルで構成を確認すると、 横長のこの長方形は プログレスバーという名前が つけてあって、 ローディングがどの程度 完了しているかを視覚的に表す プログレスバーです。 ２つ重ねている状態にしています。 まずこのアートボードを 複製したいと思います。 Splash_screen のアートボードを 選択し、 Mac は command+D、 Windows は Ctrl+D を押します。 ２つ目のアートボードの名前を Splash_screen02 と名前を変更しておきます。 Splash_screen01 のアートボードにある プログレスバーを選択して、 プロパティインスペクタで 幅を１に変更します。 W のところに１と入力して return キー、Enter キーを押します。 このようにとても狭い 長方形になりました。 モードをデザインモードから プロトタイプモードに切り替えます。 Splash_screen01 のアートボードから 遷移を作っていきます。 アートボードを選択し、 アートボードの横に表示される 接続ハンドルをドラッグして、 Splash_screen02 の アートボードの上で離します。 この時「インタラクション」の 「トリガー」を 「時間」に設定します。 「ディレイ」というのは 遅延時間のことで このアートボードを開いたら 何秒立った後に アニメーションが起こるかを 設定するところです。 このように設定することができますが、 今回はすぐに 次のアートボードにアニメーションが 起こってほしいので ０秒と設定するために 00 と入力します。 「ディレイ」を０秒にしておきます。 「アクション」の「種類」を 「自動アニメーション」に設定します。 移動先は２枚目のアートボード、 Splash_screen02 です。 「イージング」は 一旦「なし」としておきます。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。