コンテンツ
デザインプロトタイピングの背後にある理由は新しいものではありません。これは、ブラウザでのデザインに関するすべての話題と同じです。実際の状況でデザインを見ると、まったく異なります。インターフェースがどのように機能し、感じられるかについて推測する必要がない場合は、より適切な決定を下すことができます。これは余分な作業のように聞こえるかもしれませんが、設計が機能していることを確認することで得られる洞察は非常に貴重です。
Framerは、新しいコードベースのプロトタイピングツールです。通常どおりにSketch（またはPhotoshop）でモックアップを作成し、Framerにインポートできます。次に、CoffeeScriptを少し書くと、多くのことを達成できます。
縦断ビューとユーザーのアバター画像の拡大ビューの2つのビューを持つiOSアプリのプロトタイプの例を使用して、Framerでのプロトタイピングの基本を説明します。拡大された写真ビューがどのように開閉するかをプロトタイプ化し、アニメーション化します。ここでオンラインデモを表示します（ソースコードを表示するには、左上隅のアイコンをクリックするだけです）。また、framerjs.comで入手できるFramerの無料トライアルも必要です。
Sketchからインポート
最初のステップは、SketchからFramerにレイヤーをインポートすることです。デザインをSketchで開いているときに、Framerの[インポート]ボタンをクリックし、次のダイアログで正しいファイルを選択するだけです。フレーマーは各レイヤーから画像を自動的にインポートし、次のようなコードを介して画像にアクセスできるようにします。
スケッチ= Framer.Importer.load "imported / profile"
その変数を使用して、インポートされたレイヤーにアクセスします。たとえば、Sketchファイルで「content」という名前のレイヤーを参照するには、Framerにsketch.contentと入力します。
マスクとアバターのレイヤーを作成する
このプロトタイプのコア機能は、アバター画像をタップすると拡大し、もう一度タップすると閉じることです。まず、ネストされたマスク、または別のマスク内のマスクの2つのマスクレイヤーを作成します。両方のマスクを一度にアニメーション化して、微妙な開閉効果を作成します。 headerMaskレイヤーは、アバターの写真を拡大すると長方形にトリミングし、マスクレイヤーは縦断ビューの小さな円にトリミングします。
次のようにheaderMaskレイヤーを作成します。
headerMask = newレイヤー幅：Screen.width、高さ：800 backgroundColor： "transparent"
コードの最初の行は、新しいレイヤーを作成して名前を付けます。次に、CoffeeScriptのインデント構文を使用して、幅、高さ、背景のプロパティを設定します。アバターの写真が拡大されたときに下のレイヤーが表示されるように、透明な背景を使用します。
次に、マスクレイヤーを作成します。
mask = new Layer width：1000、height：1000 backgroundColor： "transparent"、borderRadius：500 y：sketch.header.height-100 superLayer：headerMask scale：0.2、originY：0
同じ方法で新しいレイヤーを作成し、プロパティを設定します。大きなborderRadiusは、このレイヤーを円にします。 Sketchからインポートしたヘッダーレイヤーと重なるようにマスクレイヤーを配置します。また、20％、つまり0.2にスケールダウンします。 originYがゼロの場合、アンカーポイントまたは画像の位置合わせが上端に設定されます。
残りのプロパティsuperLayerは、この新しいレイヤーの親として作成したheaderMaskレイヤーを設定します。これがフレーマーでのマスキングの仕組みです。 superLayerプロパティを設定するだけで、親レイヤーが子をマスクします。
次に、アバターグラフィックを作成し、それらの新しいマスク内に配置する必要があります。トリミング境界をズームしてアニメーション化するために、アバターレイヤーを手動で作成します。写真をプロジェクトフォルダの「画像」サブフォルダにコピーします。次に、その画像を使用してレイヤーを作成します。
avatar = new Layer image： "images / avatar.png" width：mask.width、height：mask.height superLayer：mask、force2d：true
アバターのsuperLayerをマスクレイヤーに設定していることに注意してください。両方がheaderMask内にネストされるようになりました。また、画像がマスクされた領域を完全に埋めるように幅と高さを設定します。
最後に、アニメーションに使用するマスクのY位置を格納する変数を作成します。画面よりも大きいため、水平方向の中央に配置します。
状態を定義する
アニメーションを作成する最初のステップは、開始状態と終了状態を定義することです。 Framerでは、状態はコードで記述されたキーフレームのようなものです。状態は、プロパティの単なるコレクションです。すべてのレイヤーにはデフォルトの状態があります。このプロトタイプでは、そのデフォルトがアニメーションの開始点として機能するため、各レイヤーに2番目の状態を設定するだけで済みます。
状態の構文は非常に単純です。レイヤーを参照し、layer.states.add（）メソッドを使用して、含めるプロパティを一覧表示します。
Sketch.content.states.add（hide：{opacity：0}）headerMask.states.add（move：{y：120}）mask.states.add（grow：{scale：1.1、y：maskY-420}）
Sketchからインポートされ、他のすべてのプロファイル画面要素を含むコンテンツレイヤーの2番目の状態は、完全に透明である必要があります。このように、アバターを展開すると、背景が黒になり、インポートされた残りのアイコンと要素が透けて見えます。
コードの2行目は、headerMaskの状態を作成します。これにより、headerMaskがY位置120に移動します。これにより、アバターの写真が拡大されたときに、タイトルと閉じるボタンが画面の上部に表示されます。また、アバター写真のトリミング境界をアニメーション化します。
最後に、マスクレイヤーの新しい状態は、前に作成したmaskY変数を使用して、スケールアップと移動の両方を行います。マスクレイヤーのoriginY（またはアンカーポイント）はその上端であるため、画像の中心が見えるように、マスクレイヤーを420ピクセル上に移動する必要があります。
州間でアニメーション化
デフォルトの状態と作成したばかりの新しい状態の間をアニメーション化するには、あと4行のコードが必要です。アバターレイヤーにクリックハンドラーを設定します。ユーザーがプロフィール画面でタップすると、状態を循環させることで拡大表示に移行します。もう一度タップすると、デフォルトの状態に戻り、小さな円に戻ります。同じコード行で両方の操作が処理されます。
avatar.on Events.Click、-> headerMask.states.next（）mask.states.next（）sketch.content.states.next（）
このブロックの最初の行は、アバターレイヤーにクリックハンドラーを設定します。タップされるたびに、トリミング方法やサイズに関係なく、次のステートメントが実行されます。
次に、各レイヤーを参照し、layer.states.next（）メソッドを使用して状態を切り替えます。 layer.states.next（）を使用すると、Framerは内部のデフォルトのアニメーション設定を使用します。これは非常に便利ですが、アニメーションカーブを微調整することで、さらに優れたアニメーションを作成できます。
ここにあるような状態を使用する場合、layer.states.animationOptionsプロパティを使用して、各アニメーション曲線を個別に簡単に変更できます。わずか3つのわずかな調整で、アニメーションは完全に異なった感じになります。
Sketch.content.states.animationOptions =曲線： "ease"、時間：0.3 headerMask.states.animationOptions =曲線： "spring（150、20、0）" mask.states.animationOptions =曲線： "spring（300、30、 0）」
フェードアウトおよびフェードインするコンテンツレイヤーについては、単純なカーブプリセットを選択し、簡単にし、アニメーションの長さを0.3に設定して、非常に高速にします。
headerMaskレイヤーとマスクレイヤーには、スプリングカーブを使用します。私たちの目的では、スプリングカーブの値がアニメーションの速度とバウンスを変更することを知っておく必要があります。マスクレイヤーの値により、そのアニメーションはheaderMaskやコンテンツよりもはるかに高速になります。スプリングカーブ設定の詳細については、framerjs.com / docsにあるFramerのドキュメントを参照してください。
実際のモバイルデバイスで試してみてください
実際のデバイスでデザインを確認することは、エミュレーターを使用するよりもはるかに効果的であり、作業にメリットがあります。 Framerには、ローカルネットワークを介してプロトタイプへのURLを提供する組み込みサーバーであるミラー機能が含まれています。デバイスを使用してURLにアクセスするだけです。
Framerで独自のデザインのプロトタイプを作成するために知っておく必要のあるすべてのことを学びました。何を待っていますか？
言葉：ジャロッド・ドライズデール
Jarrod Drysdaleは、著者、デザインコンサルタント、デジタル製品メーカーです。この記事はもともとネットマガジンの270号に掲載されました。
これが好きですか？これらを読んでください！
- Sketchでクリック可能なライブプロトタイプを作成する
- ブログを始める方法
- 最高の写真編集者
