ぶろスマートフォン用の表示で見るよりぶろアプリのUIとかについて書いてく予定この広告は、90日以上更新していないブログに表示しています。Effectsに移行しようかなあと年末に思い始めて早2週間。小一時間ほどですがさっくり習作を作ったので自分のためにメモメモ。AEを使おうと思ったかは単純明快で、Photoshopよりもやれることが多い・扱いが特化している、でもFlashより簡単そう、というイメージからです。あと、ゆくゆくはXcode上でプロトタイプ作れるようにならんといけんなあという思いがあるので、そのための準備期間的なノリです(今のところの目標は、今年前半にAEをマスターして後半でXcode(のアニメーション部分)をマスターする)。あと、Psでできないことの1つに「特定のパーツをループさせることができない」があるんですよね。これ、どういった部分が当てはまるかというとローディング画面なんかが該当します。「画面遷移したらここで少し待たされますよー」なんてシチュエーションをクライアントに伝える時に重宝するんですよね。こんなの作ってみた成果物はこんなの。やりたかったこととしては「ローディングのインジケータをループさせる」「オブジェクトを追従させる」「イーズインを適用してみる」だったので、ひとまず成功です。自分用なので語句とか割と適当です。前準備PSDファイルはD&Dでコンポジションに追加するのが◯。読み込みから入れたらフレーム数が0.2fだったり延長できなかったり?よくわからないことになってしまった。D&Dで追加すればコンポジション設定で指定したデュレーションが適用される。あと個人的に困ったのが、オブジェクトに設定されたストロークは設定が外されるので、線を入れているオブジェクトはレイヤー効果から設定する。加えて、なぜかカラーオーバーレイの効果も外れてしまったので要注意。ループループはめちゃ簡単だった。こちらの記事を参考に、キーフレーム設定して回転プロパティにエクスプレッション設定すればOK。簡単...!これに縮小の数値を入れると↑みたいに小さくなりながら消えてくれる。追従は変数使ったらうまくいった。1つ基準の動きを持たせたオブジェクトを作ったら、後は他のオブジェクトのエクスプレッションにx=this_comp.layer(thisLayer,+1).position.value_at_time(time-0.1);x+150を入れれば大丈夫。x+150てのは、横位置にズラして並べるため。Y方向は前のオブジェクトの位置を参考にするだけだから、特に指定はナシ。書き方を工夫すれば、基準のオブジェクトを中心に左右に並べることもできると思う。ホントは「あるオブジェクトの不透明度が100%になったらオブジェクトを移動させる」ていうのも作ってみたかったけど、これはif文とか使うっぽいのでまた今度。イーズインイーズインはグラフエディターから簡単にできた。グラフの見方が慣れない。いうわけで、Google先生に尋ねつつ小一時間程度でこれくらいのものができました。アニメーションの幅も広がるし、作るのにこなれたらエンジニアとのコミュニケーションロスも減りそう。最終的には、コードで渡せるくらいになりたいですね(今年後半の目標)。次はトランジション系を頑張って習得してみようと思います。Toがこれくらいしかないので、独学でやっていくしかないかな。今回作ったサンプルはDropboxに置いたので、興味ある方はどうぞ。作成したUIアニメーション習作Tweet広告を非表示にする関連記事2016-11-09Sketchのバージョン41で追加された『シンボルのOverrides』を使ってUIデザインの状態管...Sketchが装いも新たにバージョン41に上がりました。Macの使い方シリーズになります。バージョン47で待望のLibraries機能が追加!されるので試してみたできるのは通話だけ。(1)はてなブログをはじめよう!ryo_panさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。