忘れそうなので、書いておく。
react-native log-android
最近、実際の仕事のAndroidのアプリにLottieを導入してアニメーションを入れてます。 Lottieを導入する時にチームに「Lottieをやりたい!」ということを伝えるために、issueに書いたのですが、公開します。
目次
Lottieは、Adobe After Effectsで作ったアニメーションを様々なプラットフォーム(web/ iOS / Android...)上で動かすためのライブラリ。
Lottieを使って、ネイティブのプラットフォームにアニメーションを組み込む開発の流れとしては、以下のようになる。
Before
<ImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawble/your_drawable" />
After
<com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" app:lottie_fileName="your_animation.json" />
animationView.playAnimation()
でアニメーションを動かすことができます。*1 : ボタンのような1部品のアニメーションであれば、1ファイル10~30kb程度だが、サンプルサイトにあるような画面全体を使うようなアニメーションだと、200kb程度あるものも存在した。)
*2 : 対応表はこれです。 http://airbnb.io/lottie/supported-features.html#
(参考) http://airbnb.io/lottie/ https://github.com/airbnb/lottie-android https://ferret-plus.com/6214 https://airbnb.design/introducing-lottie/ http://tech.starttoday-tech.com/entry/swift-lottie https://inside.pixiv.blog/matsurai/3138
bundleで自動で生成される
依存gemのバージョンと取得先が記録される
http://normalse.hatenablog.jp/entry/2015/11/14/135835 https://qiita.com/tnoda_/items/a04e761d595a742fcdca
bundle install
というのは Bundlerを使ってGemをインストールするコマンドbundle install
してGemfile.lockファイルを作って、それをみんなに配布して、配布された側はそのGemfile.lockを基にbundle install
すればハッピーハッピーになれる。って感じらしい。Ruby全然分からないので、ツッコミ大歓迎です。
React Nativeでリストってどう作るんだっけ、とちょっと忘れかけていたので、作った。
sandbox/react-list-lesson at master · ujikawa/sandbox · GitHub
この辺のコードを参考にしている。
あと、JavaScriptとReact周りの知識が全くと言っていいほどないので分からない時は下の本を読みながら進めている。
最近、2日に1回は小さいアプリだけどとりあえず動くものを1つgithubに載せるようにしてみている。少しずつテンポが出てきて良い感じ。
React Nativeで画面遷移させたかったので、React Navigationを使いました。
書いたコードはこれです。
sandbox/react-navigation-lesson at master · ujikawa/sandbox · GitHub
React Native、基本的に動くコードを書くのは辛くない。どちらかと言えばちゃんとeslintに従って綺麗に書く方が辛いんだな、ということが分かってきた。なので、実はサンプルでは「propのvalidationしているか」のルールをちゃっかり無視している。
出来るだけeslintに対応するけど、個人で作っているので、なんかテンポが悪いなぁと思ったら一旦無視して、あとで知識がついて直せるようになったら直していこうと思う。
タスク管理の仕方。メモ帳とか、オンラインエディタとか、torelloとか散々色々やった結果、付箋での管理が一番生理的に気持ち良いので、それでfixという感じになりそう
— うじかわ (@ujiujikawa) 2018年2月26日
「あれ、昨日何してたんだっけ、、、あー思い出したりするの時間勿体ないな。よし。明日から帰る前にtodoリストを作って、スケジュールに自分のやることも書いてしっかりタスク管理していくぞ!!」
その2日後の帰る前
「あぁ、今日はなんか疲れたな。明日のtodoは明日の朝書くか。」
その1日後の帰る前
「あ、書くの忘れてたわ」
みたいなループを僕は社会人になったときから繰り返していて、いい加減、継続的にやった方が良いよなと思って、その辺のタスク管理についてどうしてます?っていうことを先輩に話したところ、「帰る前に付箋にやること貼っておく、とかで良いんじゃない?」と助言を貰った。
先輩の意見を真に受けて良かったことしかないので、素直に守って続けた。やってることは本当に簡単で、付箋とぺんを机の見える場所に置いておいて、帰るときにシュッと5秒くらいで明日やることを書いておくだけだ。これだと、「あ、忘れてた」とか「しんどいから」とかそういうものが発生しないのが良いポイント。
本当にとっても簡単なので、なんと2ヶ月以上継続できている。今まで色々な方法を試してきたけど、どれも「忙しくてつい」みたいな理由で継続出来なかったのが初めてちゃんと出来ている。
それでいて、今日はいっつも1行書いているところを負担なくもうちょい詳細に3行くらい書けた。本当堂々と言えないほどちっちゃいちっちゃい進化だけど。続けた結果、許容できる量が増えたんだと思う。
勝間和代さんもどこかで書いていたけど、習慣付けたいと思うことは歯磨きより簡単でないといけない、というのは割と真理で、まず何かを習慣づけたいと思った時は本当に簡単なことから習慣づける、というステップを踏み、そこからちょいちょい進化させていく、というのが正しいのかもしれない、と思った。
あと、突然誰かからメッセージをもらえたりするのも良いです。
todoの付箋に誰かの応援メッセージ pic.twitter.com/mv4REF8SP4
— うじかわ (@ujiujikawa) 2018年3月11日
Lottieをアプリに入れていきたくて、とりあえず簡単にアプリを作ってみた。
というか、この方の記事とコードがとても分かりやすかったので、ほぼほぼこれを見ながら写経したらいけました。
コードはここにある。 Lottie by ujikawa · Pull Request #14 · ujikawa/sandbox · GitHub
binding.animationView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (clickedFavFlag) { binding.animationView.setProgress(0f); clickedFavFlag = false; } else { binding.animationView.playAnimation(); clickedFavFlag = true; } } });
サンプルではbindingしたアニメーションのビューが押されたらplayAnimation()
して、アニメーションを再生。
ビューが押された状態のときに押されたら、setProgress()
で初期状態に戻す、みたいなことをやっているっぽい。
アニメーションのファイルも、jsonに変換されていて、それを引っ張ってくるだけなので、楽チンだった。
とりあえず実装としては簡単にいけそうなことが分かった。