
トランスフォームレイヤーで描き、動画またはビデオの変形をキーフレームすることができます。キーフレームとカーブのシステムを活用すると、描きまたは動画を簡単にトランスフォーム及び動かすことができるようになります。


トランスフォームレイヤー上の三つのアイコンは他のレイヤータイプにない、特徴的で、よく使う機能となります。




各子レイヤーの個別アンカーポイントを調整するには、カーブエディターを開きます。
レイヤーメニューのアイコンをタップすると、以下のオプションを表示します。











階層構造
トランスフォームレイヤーに複数のレイヤーをリンクすることができます。トランスフォームレイヤーにリンクされたレイヤーは子レイヤーになり、子レイヤーをリンクしたトランスフォームレイヤーは親レイヤーになります。子レイヤーは親レイヤーの設定に従います。
トランスフォームレイヤー以外のレイヤータイプを親レイヤーとして設定することができません。逆に子レイヤーとして設定できるレイヤータイプが複数あります。描きレイヤー、トランスフォームレイヤーとビデオレイヤーは子レイヤーとして設定可能です。

トランスフォームレイヤーを選択すると、子レイヤーとのリンクが表示されます。子レイヤーがトランスフォームレイヤーの右側に押しやります(インデント)。
トランスフォームレイヤー名の下にある矢印アイコンをタップすると、子レイヤーを非表示にします。
子レイヤーをリンクしたトランスフォームレイヤーが別のトランスフォームレイヤーの子レイヤーになることができます。その場合は階層構造の段階が増えます。
トランスフォームレイヤーにリンクされたレイヤーのレイヤー名の隣にダイヤモンドアイコンを付けます。

レイヤーをトランスフォームレイヤーの上にドラッグドロップすると、リンクせずに、レイヤースタック内の順番を変えます。その場合は移動したレイヤーとトランスフォームレイヤーが無関係です。


レイヤーをトランスフォームレイヤーと子レイヤーの間にドラッグドロップすると、トランスフォームレイヤーにリンクし、既存の子レイヤーの上に配置されます。ドロップしたレイヤーはそのトランスフォームレイヤーの子レイヤーになります。トランスフォームレイヤーはドロップしたレイヤーの親レイヤーになります。

タイムライン
新規トランスフォームレイヤーを作成すると、選択したレイヤー(描きレイヤーまたはビデオレイヤー)に自動的にリンクします。 レイヤーをトランスフォームレイヤーの真ん中にドラッグドロップし、リンクします。トランスフォームレイヤーのリンクを外すには、カーブエディターを開きます。



キーフレームとカーブ
子レイヤーをトランスフォームレイヤーにリンクすると、タイムライン上でキーフレームを追加することができます。描きレイヤーをリンクした場合はキーフレームアニメーションの希望のタイミングに合わせて動画用紙の尺を伸ばしてください。
トランスフォームレイヤーでトランスフォームできる素材は描き、動画またはビデオです。


トランスフォームレイヤーを使用すると、変形ツールと似ているトランスフォームボックスが表示されます。ボックスのハンドルをドラッグし、内容をトランスフォームすることができます。
描画を1本指で長押ししながら、トランスフォームボックスをドラッグすると、ガイドラインが表示されす。ペンシルをボックスの横線、縦線、対角線、中心にドラッグし、近づくと、その先スナップします。
サイドバーメニューのオプションは以下の通りです。
ズームと回転ジェスチャーを有効・無効にするアイコンです。有効にすると、トランスフォームボックス自体をペンシルで調整できると共に、指で描画の拡大縮小と回転ができます。無効にすると、指でトランスフォームボックスを調整することが可能ですが、指で描画の拡大縮小と回転ができません。
前のキーフレームに移動します。
次のキーフレームに移動します。
トランスフォームボックスの内容を水平に反転します。
トランスフォームボックスの内容を垂直に反転します。
変形操作をリセットします。

キーフレームを作成するには、トランスフォーム数値を変更するかカーブをダブルタップします。
キーフレームを作成する前、希望のフレーム及びタイミングを選択します。

カラー丸の隣にある黒いダイヤモンドをタップすると、キーフレームを作成することができます。
キーフレームされたパラメーター(位置、スケール、回転)を白いダイヤモンドアイコンで示します。
キーフレームを外すには、もう一度白いダイヤモンドアイコンをタップします。
選択した内容のトランスフォームボックスの移動、拡大縮小、回転により自動的にキーフレームを作成します。
トランスフォームボックスを調整すると、位置のXY座標、スケールのXY座標と回転座標が変わります。変更によりカーブの表示を合わせます。
新規キーフレームのタイミングはタイムライン上で選択したタイミングとなります。キーフレームをタイムライン上でドラッグし、移動することができます。移動に合わせて座標の数値が変わります。
回転は回転軸に合わせて選択した内容のを回転させます。設定にある「x」は回転数を示します。「+ 0°」は回転数とプラスになる角度を示します。

複数のキーフレームを選択するにはダブルタップ・ドラッグ操作を行います。

複数のキーフレームの選択の場合は表示されたカーブのキーフレームが選択されます。特別なカーブのキーフレームを選択するには、他のパラメータの目のアイコンをタップし、選択から外すカーブを非表示にします。
全てのカーブのキーフレームを選択するには、パラメーターから全てのカーブを表示し、選択します。

キーフレームを選択すると、タイムラインの上にアクションパネルが開きます。







二つのキーフレームの間にあるカーブの勾配を調整できるアイコンです。カーブの種類によって動きの加速度が変わります。カーブの勾配を調整すると、イージーイーズイン・アウトを作ることができます。

こちらの事例にはYの位置のカーブをベジエカーブに設定しました。複数のカーブの勾配に応じて動きの加速が変わります。


こちらの事例にはキーフレームの位置が先と同じ位置ですが、カーブを直線タイプに設定しました。