Animationをアプリに導入してみる

最近のイケてるアプリにはアニメーションがいい感じに入っている。どういう実装が良いのか調べてみた。Airbnbのライブラリを紹介する。

Transcript

1. AnimationΛ ΞϓϦʹಋೖͯ͠ΈΔ ngo275 2017/09/22
2. ࡢࠓ࿩୊ʹͳͬͨΞϓϦ
3. paymoͷϩΰΞχϝʔγϣϯ • UIImageViewͷΞχ ϝʔγϣϯΛར༻ • 86ຕͷpngΛ࠶ੜ
4. gifͰΞχϝʔγϣϯΛ࠶ੜ͢Δ • FLAnimatedImagegif͕ਓؾʢstar: 6k~ʣ • Flipboard͕։ൃ͍ͯ͠Δ • MediumɺFacebookɺPinterestͱ͔͕ར༻ • WebViewΛ࢖͏ • ϥΠϒϥϦΛ௥Ճ͢Δඞཁͳ͠ • ϩʔυ͢Δ࣌ʹͪΒͭ͘
5. AirbnbͷΞχϝʔγϣϯ
6. AirbnbͷΞχϝʔγϣϯ
7. Airbnb͕ϥΠϒϥϦΛग़͍ͯͨ͠
8. lottieͱ͸ • Airbnb͕ग़͍ͯ͠ΔΞχϝʔγϣϯΛ؆୯ʹඳը͢ΔϥΠ ϒϥϦ • AdobeAfterEffectsΛ࢖ͬͯjsonͰExportͨ͠ϑΝΠϧΛར ༻͢Δ • σβΠφʔ͕ΞχϝʔγϣϯΛ࡞ͬͯΤϯδχΞ͕ΞϓϦ ʹ؆୯ʹ૊ΈࠐΊΔ • iOSɺAndroindɺReact NativeʹରԠ ࢀߟ http://airbnb.io/lottie/
9. AfterEffectsΛ࢖͏ • AdobeAfterEffectsΛΠϯετʔϧʢମݧ൛͸Ұिؒແྉʣ • ϓϥάΠϯBodymovinΛΠϯετʔϧ
 url: https://exchange.adobe.com/addons/products/12557#.WcR4stMjHXG • Preferences > General > Allow Script to Write Files and Access Network Λtrueʹ͢Δ • mp4ϑΝΠϧ౳ΛυϥοάɾΞϯυɾυϩοϓͯ͠ฤू • compositionΛjsonʹॻ͖ग़͢
10. αϯϓϧ΋ॆ࣮͍ͯ͠Δ • https://www.lottiefiles.com/
11. iOSʹ૊ΈࠐΜͰΈΔ ΞχϝʔγϣϯΛͱΓ͋͑ͣྲྀ͢
12. iOSʹ૊ΈࠐΜͰΈΔ Ұճ࠶ੜ͠ऴΘͬͨΒΞχϝʔγϣϯΛফ͢
13. iOSʹ૊ΈࠐΜͰΈΔ ೚ҙͷλΠϛϯάͰΞχϝʔγϣϯΛग़ͨ͠Γফͨ͠Γ͢Δ
14. ·ͱΊ • Ξχϝʔγϣϯॏཁ • UIImageViewɾgifͷ࠶ੜɾjson(Airbnbྲྀ)Ͱ૊ΈࠐΉ౳ʑ • UIImageView: ֦ுͷඞཁͳ͕ͩ͠ɺͨ͘͞Μ૊ΈࠐΉʹ͸େม • gifͰ࠶ੜ: FLAnimatedImagegif͕Ԧಓײ͋Δ • Airbnbྲྀ: ৽ͯ͘͠։ൃ͕੝Μ • https://qiita.com/ngo275/items/c9e94bad7a7afc85e4f4