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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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ʹ΋ରԠ
    Ξχϝʔγϣϯදࣔ
    

    View Slide

11. ·ͱΊ
    

    View Slide

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

    View Slide

13. ͓ΘΓ
    

    View Slide