リッチなアニメーションどうやって実装していますか？

Transcript

1. ϦονͳΞχϝʔγϣϯ Ͳ͏΍࣮ͬͯ૷͍ͯ͠·͔͢ʁ ϋʔυϧܹ௿LTେձοʂ#02 2023-04-20 OG1
2. ࢯ໊ɿTsuyoshi Ogihara ॴଐɿגࣜձࣾVoicy ۀ຿ɿAndroidΤϯδχΞ झຯɿπʔϦϯά/VRήʔϜ/DTM ຊ೔͸ΑΖ͓͘͠ئ͍͠·͢ʂ ೖࣾɿ2022.07~ @ogi2ogi
3. ϦονͳΞχϝʔγϣϯ Ͳ͏΍࣮ͬͯ૷͍ͯ͠·͔͢ʁ
4. ϦονͳΞχϝʔγϣϯ ྫ͑͹ɺɺɺ ϩʔσΟϯάΞχϝʔγϣϯ Կ͔ΞΫγϣϯʹରͯ͠දࣔ
5. ํ๏ᶃɹgifϦιʔεͱͯ͠ඳը͢Δ
6. ํ๏ᶃɹgifϦιʔεͱͯ͠ඳը͢Δ //... val url = "gifϦιʔεͷURL΍Ϧιʔε໊" Glide.with(fragment) .load(url) .into(imageView) //.... ͍͍ײ͡👍 Androidͷ৔߹ͷҰྫ https://bumptech.github.io/glide/
7. ํ๏ᶃɹgifϦιʔεͱͯ͠ඳը͢Δ //... val url = "gifϦιʔεͷURL΍Ϧιʔε໊" Glide.with(fragment) .load(url) .into(imageView) //.... ͍͍ײ͡👍 🤔gifϦιʔεͷαΠζେ͖͍ 🤔ιʔε಺Ͱ৭Λม͍͑ͨ Androidͷ৔߹ͷҰྫ https://bumptech.github.io/glide/
8. ํ๏ᶄɹLottieϥΠϒϥϦΛ࢖͏
9. ํ๏ᶄɹLottieϥΠϒϥϦΛ࢖͏ • Android/iOS/Windows/WebͳͲ ɹɹෳ਺ͷϓϥοτϑΥʔϜʹରԠ • JSONϕʔεͷΞχϝʔγϣϯϑΝΠϧΛѻ͏ • gifʹൺ΂ܰྔͰ៉ྷͳΞχϝʔγϣϯϑΝΠϧ https://airbnb.design/lottie/ Lottieͱ͸
10. ํ๏ᶄɹLottieϥΠϒϥϦΛ࢖͏ //… ɹval composition by rememberLottieComposition( ɹ LottieCompositionSpec.RawRes(LottieͷJSONϦιʔε) ɹ) val dynamicProperties = rememberLottieDynamicProperties { //ΞχϝʔγϣϯϦιʔεͷ৭ΛมߋͰ͖Δ val property = LottieProperty.STROKE_COLOR val newColor = Color(0xFFFF0000) val keyPath = "Fill 1".toKeyPath() rememberLottieDynamicProperty(property, newColor, keyPath) } LottieAnimation( composition = composition, dynamicProperties = dynamicProperties, ) //.... ͞Βʹ͍͍ײ͡👍 👍ϦιʔεϑΝΠϧ͕ܰྔ 👍ιʔε಺Ͱಈతʹ৭ΛมߋՄ Androidͷ৔߹ͷҰྫ 👍એݴతUIʹ΋ରԠ Ξχϝʔγϣϯදࣔ
11. ·ͱΊ
12. • LottieϥΠϒϥϦʹ͍ͭͯ঺հ͠·ͨ͠ • 1ͭͷJSONϑΝΠϧͰෳ਺ͷϓϥοτϑΥʔϜʹ࣮૷ग़དྷΔ • gifͳͲʹൺ΂ϑΝΠϧͷ༰ྔ͕ܰྔ • ෳࡶͳΞχϝʔγϣϯ΋࣮૷͠΍͘͢ͳΔʂ
13. ͓ΘΓ