トランジションを編集する

まずは新しくトランジションを作るところから始めたいと思います。
リストから1列選択した状態にして、遷移先の画面へとリンクを繋げましょう。
ジェスチャーはタップ、トランジションは[New Transition]を選びます。

機能紹介

Unassigned Tag

f:id:ryo_pan:20151124110555p:plain

割り当てられていない（アニメーションの）タグが格納されているエリアです。デフォルトのトランジションを適用すると「このトランジションならこういうアニメーション（動き）が必要でっしゃろ？」とあらかじめテンプレートを用意してくれます（画面のものはPush Leftを選んだ場合）が、新規作成時は空っぽです。タグはレイヤーにD&Dで適用が可能です。

Connect Layers

f:id:ryo_pan:20151124110822p:plain

詳しくは次章で解説します。

Start & End

f:id:ryo_pan:20151124110857p:plain

トランジションの動きを確認することができる。 【豆知識】Shiftボタンを押下したままやるとスローモーションで動くぞ！（プレビュー画面でも同様）

Inspector

f:id:ryo_pan:20151124111106p:plain

インスペクタでは以下の編集が可能です。

Name
- 下記で設定した数値を変数名として持つことが可能。ここで作った動きはトランジション作成時に呼び出すことができる。
Properties
- X位置、Y位置、サイズ、XYZ回転、Origin、透明度、レイヤーの非表示とロックの編集が可能。
Timing
- イージングカーブの編集が可能。ディレイの設定もできる。

実践

ゴールはこんな感じです。

わかりやすいように最初のトランジションはスローモーションにしています。あと遷移後のスクロールはおまけ。

編集画面でさっそくアニメーションを確認してみると、↓のようになると思います。

画面がどのような動きでトランジションを作っているかが確認できます。どうやら新規作成したトランジションはPush Leftの動きが基準のようです。
赤い枠で囲まれた画面が遷移後のもの、青い枠が遷移元になります。でも、よく見ると開始時に選択されているのは赤枠の遷移後画面で、終了時に選択されているのは遷移元の画面ですよね。
このあたりがちょっとクセモノで、

トランジションが始まる前の画面の場合、遷移元のレイアウトはすでに（編集に移る）前画面で決まっているのだから、  
これから遷移してくる画面が「どのように遷移するか」、その「前準備段階を開始時に作る」のが編集画面の役割である

ということになっているようです（解釈が間違っていたらごめんなさい）。言葉で説明するとちょっと難しいですね。僕も触った当初はよく分かりませんでした。
なので、慣れることも兼ねてちょっと練習してみましょう。TabBarの件は一旦忘れてください。

f:id:ryo_pan:20151124115230p:plain

これが何も触っていない状態です。

f:id:ryo_pan:20151124115305p:plain

サムネイルを遷移元の画面まで移動して重ねてみましょう。もともとこのレイヤーは作業画面（編集画面に移る前の画面）でこの位置に置いてるものなので、「遷移が始まった瞬間からその場にあるレイヤー」となります。
動きを確認してみます。

リストをタップした瞬間にサムネイルが出現しているのが分かると思います。それ以外の要素は画面の右側に置いてありましたので、Push Left的な動きでトランジションが掛かっています。

では、サムネイルの透明度を0%に設定してみるとどうなるでしょうか。

作業画面ではもともと透明度100%だったので、0%（トランジション編集画面で編集した値）から100%（作業画面で指定していた値）へと変化しました。
これが、トランジション編集における基本的な概念です。
この辺りの理屈が分かるとFlinto for Macがぐっと身近に感じられて使いやすくなると思います。

もちろんこの反対で「遷移元の画面がどうなるかを終了時に編集することも可能」となっています（開始時は作業画面で指定済だが、終了時はこの編集画面で変えられることが可能、ということになる）。