Lottieによるリッチアニメーション実装のためのAfterEffectsハマりどころ｜まりーな／エンジニア
この資料は2018/02/14の第二回iOS UI実装勉強会で発表した内容です。当時調査した内容をそのまま編集しているので情報が古い場合があります。 ご了承ください。最新情報はドキュメントを参照してください。 下記がドキュメントです。 はじめにiOSにAfter Effectsで作ったリッチアニメーションを導入できるLottieライブラリすごい！とおもったのですが，AfterEffectsのすべての機能を使えるわけではありませんでした・・・・・・ アニメーションをデザイナーさんにお願いする前に，エンジニア側も何ができて何ができないのか知っておくと、作ってもらったのに動かないという事故が発生しづらいのではないかと考え、知見を共有することにしました この文章全体で言いたいこと Lottieのドキュメントは要確認，意図通りの動きができてるか逐次チェック webだったら動くけどAndroidやiO
【After Effectsで手軽にWebアニメーション】Lottieを使えるようにするまで – 制作編 | ティブる！
TOP デザイン 【After Effectsで手軽にWebアニメーション】Lottieを使えるようにするまで – 制作編 【After Effectsで手軽にWebアニメーション】Lottieを使えるようにするまで – 制作編 アニメーションを作る できる事・できない事 さあ後は作るだけだろう！といきたいのですが、Lottieには出来ないことがあります。 サポートされているAfterEffectsの機能 特に厄介なのはillustratorのAiファイルが、そのままだとLottieで読み込めない事です。 なので一度AfterEffects内でシェイプにする必要があります。 AiデータをAfter Effects上でシェイプに変換する まずはシェイプにしたい部分をillustrator上でレイヤーに分けます。 （レイヤー名はちゃんとつけた方が良いですが見逃してください…） レイヤーを分けた
Webディレクター向け！業務がはかどるGoogle Chromeのおすすめ拡張機能7選！ | ティブる！
みなさん、こんにちは。 Google Chromeには便利な拡張機能がたくさんあるのはみなさんご存知かと思います。 いろいろなウェブサイトをチェックしたり、出来上がったサイトを確認したりするのもWebディレクターの仕事の一つ。 そこで今日は、ディレクターの業務を効率良く進めていくために役立つ拡張機能をご紹介します。 ページのスクリーンショットに便利な「FireShot」！ https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg Webディレクターがもっとも使う機能の一つがスクリーンショットと言っても過言では無いでしょう。 参考画像の共有から修正の指示出しまで、使う機会は数え切れないほど。 このFireshotの場合、ウインドウに収まりきらない縦長の
Lottieで作ったアニメーションをWebサイトで実装（レスポンシブ対応） | ティブる！
Lottieでjsonファイルとして書き出されたアニメーションをWebサイトで表示させてみたいと思います。 https://airbnb.design/lottie/ After Effectsでjson形式で書き出すまでの記事やスマホアプリに組み込む記事はちらほらあったのですが、webで表示させるための手順はあまりなかったので実際にWebページで実装してみたいと思います。 といっても、もうできあがっているアニメーションを表示させるだけなので難しいことはありませんでした。 After Effectsでjson形式で書き出すまではこちらの記事をご覧ください。 【After Effectsで手軽にWeb用アニメーション】Lottieを使えるようにするまで – インストール編 【After Effectsで手軽にWebアニメーション】Lottieを使えるようにするまで – 制作編 ファイルを用意
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Supported After Effects Features · Lottie
