ツールとチュートリアル
直帰率を下げるためにカスタム読み込みアニメーションを作成する方法
元々はスロバーとして知られていましたが、読み込みアニメーションは、データ収集またはインターフェイスレンダリングの進行状況を示すために使用されます。鈍いプログレスバーを使用してこれを示すことで一度は取得できましたが、当時は過ぎ去りました。
今日、CSS、jQuery、または単純なアニメーションGIFを活用した巧妙に作成されたアニメーションは、インターフェイスを活性化し、製品に個性を加える機会です。
思いやりのあるアニメーションは、ユーザーがコンテンツの読み込みを待つ間、ユーザーを楽しませることができます。優れた読み込みアニメーションは、関心を維持することで期待を管理し、ユーザーエクスペリエンスを向上させるのに役立ちます。
このチュートリアルでは、Sketchを使用して基本的な形状を作成し、Principleを使用して簡単なカスタム読み込みアニメーションをすばやく作成します。 （これらのアプリはどちらもMac用です。）Trello、Flickr、Slackなどで使用されるカラフルな読み込みアニメーションを作成する方法を学習します。
それを手に入れましょう。
スラックローディングアニメーション
スケッチで、辺が50ピクセル、または半径がそれぞれ100ピクセルの4つの丸い正方形をトレースします。完全な円のように見えるはずですが、アニメーションで線を伸ばす効果を作成するために、角が丸い正方形を使用しています。
各辺の間に150pxのスペースがある架空の正方形を作成するように4つの形状を配置します。 4つの異なる色（＃35BA90緑、＃69CADD青、＃EBA900黄色、および＃E20661ピンク）を適用します。
シェイプをPrincipleにインポートしてグループ化し、[コンポーネントの作成]をクリックしてグループをネストします。
ネストされたグループ内に入り、アートボードを15度回転させます。次に、個々の円を選択し、元の位置（後方15度）に回転させます。これにより、直線でストレッチ効果が生まれます。
アートボードに「自動」トリガーを適用してから、丸みを帯びた各長方形をアートボードの反対側に295pxの長さに伸ばします。両方のアートボードの各形状に75％の不透明度を与えます。
別の「自動」トリガーを2番目のアートボードに適用します。新しいアートボードで、各線を元の50pxの幅に縮小しますが、元の位置とは反対側にします。
「自動」トリガーを使用して、最後のアートボードを最初のアートボードにリンクします。 「親に戻る」ボタンをクリックして、最終結果をプレビューします。
ヒント：「親に戻る」に移動すると、メイングループを-30度回転して、Slackのように見せることができます。また、「Animate」パネル内でアニメーションのペースを変更し、「EaseBoth」エフェクトを適用してトランジションをスムーズにすることもできます。
Trelloローディングアニメーション
Sketchを使用して、100pxの青い正方形をトレースします。幅60px、高さ140pxの白い長方形を描きます。前の正方形の左上に30pxの上下の余白を合わせます。その白い長方形を複製し、30pxの右マージンで正方形の右側に揃え、高さを70pxに減らします。
アートボードをPrincipleにインポートし、「自動」トリガーを適用して新しいキーフレームを作成します。新しいアートボードで、白い長方形の高さを逆にします（左側の長方形の高さを70ピクセル、右側の長方形を140ピクセルにします）。 「アニメート」パネルで「イーズ-両方」エフェクトを適用して、トランジションをスムーズにします。
ローリングサークル
Sketchで円をトレースします。 「ダッシュ」と「ギャップ」の値を使用し、塗りつぶしを行わない10pxの境界線を適用します。後で作成する回転効果を強調する境界線に「角度グラデーション」カラーを使用します。
新しいPrincipleファイルを開き、[インポート]ボタンを使用してSketchから円を転送します。 2つの「自動」トリガーを続けて適用します。
回転効果を作成するには、中央のアートボードで円を選択し、その「角度」の値を360度に変更します。次に、3番目の円を選択し、左側のパネル内で別の名前（つまり、「コピー」）を付けます。これは無限の回転を偽造します。
最後に、別の「自動」トリガーを使用して、3番目のアートボードを最初のアートボードにリンクバックします。アートボード1と2の間のタイムラインに「線形」トランジションを適用します。プレビューウィンドウで作成したアニメーションを確認します。
Flickrの読み込みアニメーション
青い円とピンクの円を並べてトレースします。それらをPrincipleにインポートし、「自動」トリガーを適用して新しいアートボードを作成します。
円の位置を反転し、新しい「自動」トリガーを適用して3番目のアートボードを作成します。その新しいアートボードで、左側のパネルの円のレイヤーの順序を逆にします。
3番目の「自動」トリガーを適用して4番目のアートボードを作成します。その最後のアートボードで、円の位置をもう一度反転し、最後のアートボードから最初のアートボードに戻る最後の「自動」トリガーを適用します。
ローディングタイプ
Principleで新しいプロジェクトを作成し、テキストツールを使用して「LOADING」と記述します。テキストを左揃えにし、アートボードの垂直方向の中央に配置します。
「自動」トリガーを5回続けて適用します。最後のアートボードループから最初のアートボードに戻る5番目のトリガーがあります。
一体何を作ったの？
最初のアートボードから始めて右に移動し、各アートボードのテキストを編集して、元の「LOADING」テキストの横にそれぞれ0、1、2、3、2、および1のピリオドを追加します。アートボードの進行は次のようになります。
ローディングローディング。 LOADING ..LOADING…LOADING..LOADING。
これで、作成したアニメーションをプレビューできます。
脈動ドット
60pxのドットをトレースします。もう1つのドットをコピーして貼り付け、60px右に配置します。 60pxのギャップを含む両方のドットが、アートボードの中央に完全に配置されていることを確認してください。
「自動」トリガーを4回続けて適用します。
2番目のアートボードで、2番目のドットを30pxに減らします。
3番目のアートボードで、2番目のドットを0pxに減らし、最初のドットを30pxに減らします。
4番目のアートボードで、2番目のドットを30pxに拡大縮小し、最初のドットを0pxに縮小します。
5番目のアートボードで、最初のドットを30pxに縮小し、「自動」トリガーを使用してアートボードを最初のボードにリンクします。
ローリングドット
6面のサイコロにある配置に5つのドットを配置します。アートボードをPrincipleにインポートし、中央に配置します。
アートボードに「自動」トリガーを適用します。
新しいアートボードで、ドットのグループを360度回転します。
「自動」トリガーを使用して、2番目のアートボードを最初のアートボードにリンクします。
脈動円
50pxの円から始めます。これは、5pxの境界線があり、塗りつぶしがない150pxの円内に中央揃えで配置されています。
「自動」トリガーを3回続けて適用します。
最初のアートボードで、線の円を50ピクセルに縮小し、内側の円を10ピクセルに縮小します。
3番目のアートボードで、線の円を200ピクセルまで拡大し、不透明度を0％にします。内側の円を150pxまで拡大縮小し、不透明度を50％にします。
最後のアートボードで、内側の円を200pxまで拡大縮小し、不透明度を0％にします。線の円を50pxに縮小し、不透明度を25％にします。
最後のアートボードに「自動」トリガーを適用します。内側の円を50％の不透明度で10pxに縮小します。
「自動」トリガーを使用して、最後のアートボードを最初のアートボードにリンクします。
ジャンプドット
イオン2対イオン3
高さ50px、間隔50pxの完全な円を3つ並べます。
「自動」トリガーを適用します。 2番目のアートボードで、最初の円を50px上に移動します。
2番目のボードに「自動」トリガーを適用します。 3番目のアートボードで、最初の2つの円を選択し、それらを50px上に移動します。 3つの円は対角線上にある必要があります。
3番目のボードに「自動」トリガーを適用します。 4番目のアートボードで、最初の円を50px下に移動します。最後の2つの円を選択し、50px上に移動します。
4番目のボードに「自動」トリガーを適用します。 5番目のアートボードで、最初の2つの円を50px下に移動します。最後の円を選択し、50px上に移動します。
5番目のボードに「自動」トリガーを適用します。 6番目のアートボードで、最後の2つの円を50px下に移動します。
最後に、最初のアートボードに戻り、最初のドットを50ピクセル上に移動し、「自動」トリガーを使用して最後のアートボードを最初のアートボードにリンクします。最終結果をプレビューできます。
クラシックローダー
Sketchで円をトレースし、塗りつぶしのない20pxの灰色の境界線を付けます。
その上に同じ円のコピーを貼り付け、コピーの塗りつぶしを別の色に変更します。この例では、青を使用します。
青い円の4分の1に重なる正方形をトレースします。長方形レイヤーを円レイヤーの下に移動し、長方形レイヤーに「マスク」を適用します。
Principleに移動し、「インポート」ボタンを使用してスケッチアートワークをインポートします。
最初のアートボードに「自動」トリガーを適用し、青い円を360度回転させます。
2番目の「自動」トリガーを2番目のアートボードに適用します。生成された3番目の円レイヤーの名前を「コピー」に変更し、「自動」トリガーを使用して最初のアートボードにリンクします。
結論
これらの実証済みの読み込みアニメーションのいくつかを作成する練習をしたら、ここで学んだスキルを使用して、独自のアプリ用の独自のアニメーションを作成する能力に自信を持つ必要があります。
少し想像力とSketchand Principleにある便利なツールを使用すると、アプリのデザインに一致する独自の読み込みアニメーションを数分で作成できます。ユーザーは、プロフェッショナルな外観と、アプリが一生懸命働いていることを示すフレンドリーな指標を高く評価します。
•••
