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

by OG1

Slide 1

Slide 1 text

ϦονͳΞχϝʔγϣϯ Ͳ͏΍࣮ͬͯ૷͍ͯ͠·͔͢ʁ ϋʔυϧܹ௿LTେձοʂ#02 2023-04-20 OG1

Slide 2

Slide 2 text

ࢯ໊ɿTsuyoshi Ogihara ॴଐɿגࣜձࣾVoicy ۀ຿ɿAndroidΤϯδχΞ झຯɿπʔϦϯά/VRήʔϜ/DTM ຊ೔͸ΑΖ͓͘͠ئ͍͠·͢ʂ ೖࣾɿ2022.07~ @ogi2ogi

Slide 3

Slide 3 text

ϦονͳΞχϝʔγϣϯ Ͳ͏΍࣮ͬͯ૷͍ͯ͠·͔͢ʁ

Slide 4

Slide 4 text

ϦονͳΞχϝʔγϣϯ ྫ͑͹ɺɺɺ ϩʔσΟϯάΞχϝʔγϣϯ Կ͔ΞΫγϣϯʹରͯ͠දࣔ

Slide 5

Slide 5 text

ํ๏ᶃɹgifϦιʔεͱͯ͠ඳը͢Δ

Slide 6

Slide 6 text

ํ๏ᶃɹgifϦιʔεͱͯ͠ඳը͢Δ //... val url = "gifϦιʔεͷURL΍Ϧιʔε໊" Glide.with(fragment) .load(url) .into(imageView) //.... ͍͍ײ͡👍 Androidͷ৔߹ͷҰྫ https://bumptech.github.io/glide/

Slide 7

Slide 7 text

ํ๏ᶃɹgifϦιʔεͱͯ͠ඳը͢Δ //... val url = "gifϦιʔεͷURL΍Ϧιʔε໊" Glide.with(fragment) .load(url) .into(imageView) //.... ͍͍ײ͡👍 🤔gifϦιʔεͷαΠζେ͖͍ 🤔ιʔε಺Ͱ৭Λม͍͑ͨ Androidͷ৔߹ͷҰྫ https://bumptech.github.io/glide/

Slide 8

Slide 8 text

ํ๏ᶄɹLottieϥΠϒϥϦΛ࢖͏

Slide 9

Slide 9 text

ํ๏ᶄɹLottieϥΠϒϥϦΛ࢖͏ ● Android/iOS/Windows/WebͳͲ ɹɹෳ਺ͷϓϥοτϑΥʔϜʹରԠ ● JSONϕʔεͷΞχϝʔγϣϯϑΝΠϧΛѻ͏ ● gifʹൺ΂ܰྔͰ៉ྷͳΞχϝʔγϣϯϑΝΠϧ https://airbnb.design/lottie/ Lottieͱ͸

Slide 10

Slide 10 text

ํ๏ᶄɹ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ʹ΋ରԠ Ξχϝʔγϣϯදࣔ

Slide 11

Slide 11 text

·ͱΊ

Slide 12

Slide 12 text

● LottieϥΠϒϥϦʹ͍ͭͯ঺հ͠·ͨ͠ ● 1ͭͷJSONϑΝΠϧͰෳ਺ͷϓϥοτϑΥʔϜʹ࣮૷ग़དྷΔ ● gifͳͲʹൺ΂ϑΝΠϧͷ༰ྔ͕ܰྔ ● ෳࡶͳΞχϝʔγϣϯ΋࣮૷͠΍͘͢ͳΔʂ

Slide 13

Slide 13 text

͓ΘΓ