✍️
注意事項
ご注意ください！Phaseでは、定期的にアップデートや改善を行っています。そのため、チュートリアルの内容が現在のアプリとは多少異なる場合があります。
パス
Phaseで複雑なシェイプを作成する際には、パスを使用します。パスは、線、曲線、ポリゴン、アメーバ形状、またはこれら全てを組み合わせることもできます。パスは非常に多用途ですが、作成はシンプルで直感的です。
✍️
注意事項
シェイプやレイヤーパネルの使い方に慣れていない場合は、シェイプの記事を確認してください。
パスの作成
ペンツールを使用して三角形を作成する方法.
- キャンバスの左上にあるメニューバーからペンアイコンを選択します。ペンツールは、複雑なシェイプを形成するためのポイントの繋がりを作るために使用します。
- キャンバス上をクリックして、点を追加します。次の点を打つと線で繋がります。この際、キーを押しながらツールを動かすと45度ごとに角度をスナップできます。また、Escキーを押すとその前の点との繋がりが消えて、新たなシェイプの作成を開始することができます。⇧ Shift
- パスのプロパティを変更します。この機能については、下記の「パスのプロパティ」セクションをご覧ください。
- キーを押すか、他のシェイプを選択すると、パスが確定されます。パスには、基本シェイプにはない特有の設定がありますが、確定後はその他のシェイプと同様に編集できます。確定後のパス上でもう一度⏎ Enterキーを押すと、ポイントを編集できます。⏎ Enter
パスとシェイプ
パスのプロパティは、ポイントを編集しているのか、またはシェイプ全体を編集しているのかによって異なります。を押すか、または選択解除する前の、点を編集している場合でも、パス特有のシェイプに関するプロパティが表示され、4つのオプションがあります:
⏎ Enter
1. 直線
直線のパスとシェイプは、曲線が無い鋭い角度を表現します。これはデフォルトのシェイプであり、調整するための方向線はありません。
2. ミラー
パスとシェイプでミラーを選択すると、中心が湾曲し、方向線が両側に広がって表示されます。両端のハンドルポイントは、鏡のように曲線を左右対称に調整することができます。
3. アシンメトリック
アシンメトリックは、鏡のように動作しますが、方向線の長さが異なります。片側のハンドルポイントを回転させることで、両側が動作しますが、内側／外側への調整は、操作したハンドルの方だけに影響します。
4. インデペンデント
インデペンデントは、それぞれの点の回転と長さを全て別々に操作できます。曲線を自由に編集できる一方で、直線以外の方向線は、中心点に極端な凹凸を作ります。
パスのプロパティ
パスシェイプ特有のプロパティの他に、Phaseの他の要素と共通の、編集可能なプロパティがパネル内にあります。X/Y座標、角丸の半径、不透明度の種類と度合い、また塗り、塗りおよびパスのトリミングなどの追加効果です。
📖
詳細を読む
Phaseのプロパティについて、詳細が記載された特集ページがありますので、ご確認ください。
パスをアニメーション化する
パスを使用して作成されたアザラシのアニメーション.
パスの補間（シェイプのモーフィング、または単純に補間とも呼ばれます）は、二つの異なるシェイプやパスの間にある変化を表現するアニメーション技術です。開始点から終了点の間に、中間的なシェイプを生成する機能です。
- シェイプを選択後、キーを押します。⏎ Enter
- ペンツールをクリックし、シェイプに新しくいくつかポイントを追加します。ペンツールは、アニメートモードでは使用できないので注意してください。ポイントをさらに追加するには、デザインモードに戻ります。
- シェイプのいずれかの線にカーソルを合わせると、線が赤く表示されるので、クリックして新たにポイントを追加します。望む数のポイントが追加されるまで、この手順を繰り返します。
- アニメートモードを有効にします。アニメーションとキーフレームに関する詳細は、アニメーションの記事をご覧ください。
- 必要な場合のみ、0秒の位置にキーフレームを加えます。
- 再生ヘッドを任意の位置まで移動させます。
- シェイプ上のポイントを任意の場所まで移動させます。
- シェイプを変化させたい位置までポイントを移動させたら、新たにキーフレームを追加します。キーフレーム間の時間によって、シェイプが変化する継続時間を制御します。必要に応じて調整しましょう。
- 再生ボタンを押して、要素が別のシェイプに滑らかに変化していく様子を見てみましょう。
アニメーション制作を始めましょう
無料のウェブベースプラットフォームで始めます。