Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

OG1
April 20, 2023

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

OG1

April 20, 2023
Tweet

More Decks by OG1

Other Decks in Programming

Transcript

  1. ϦονͳΞχϝʔγϣϯ


    Ͳ͏΍࣮ͬͯ૷͍ͯ͠·͔͢ʁ
    ϋʔυϧܹ௿LTେձοʂ#02
    2023-04-20


    OG1

    View full-size slide

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

    View full-size slide

  3. ϦονͳΞχϝʔγϣϯ


    Ͳ͏΍࣮ͬͯ૷͍ͯ͠·͔͢ʁ

    View full-size slide

  4. ϦονͳΞχϝʔγϣϯ


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

    View full-size slide

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

    View full-size slide

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


    val url = "gifϦιʔεͷURL΍Ϧιʔε໊"


    Glide.with(fragment)


    .load(url)


    .into(imageView)


    //....
    ͍͍ײ͡👍
    Androidͷ৔߹ͷҰྫ
    https://bumptech.github.io/glide/

    View full-size slide

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


    val url = "gifϦιʔεͷURL΍Ϧιʔε໊"


    Glide.with(fragment)


    .load(url)


    .into(imageView)


    //....
    ͍͍ײ͡👍
    🤔gifϦιʔεͷαΠζେ͖͍
    🤔ιʔε಺Ͱ৭Λม͍͑ͨ
    Androidͷ৔߹ͷҰྫ
    https://bumptech.github.io/glide/

    View full-size slide

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

    View full-size slide

  9. ํ๏ᶄɹLottieϥΠϒϥϦΛ࢖͏
    ● Android/iOS/Windows/WebͳͲ


    ɹɹෳ਺ͷϓϥοτϑΥʔϜʹରԠ


    ● JSONϕʔεͷΞχϝʔγϣϯϑΝΠϧΛѻ͏


    ● gifʹൺ΂ܰྔͰ៉ྷͳΞχϝʔγϣϯϑΝΠϧ
    https://airbnb.design/lottie/
    Lottieͱ͸

    View full-size 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 full-size slide

  11. ● LottieϥΠϒϥϦʹ͍ͭͯ঺հ͠·ͨ͠


    ● 1ͭͷJSONϑΝΠϧͰෳ਺ͷϓϥοτϑΥʔϜʹ࣮૷ग़དྷΔ


    ● gifͳͲʹൺ΂ϑΝΠϧͷ༰ྔ͕ܰྔ


    ● ෳࡶͳΞχϝʔγϣϯ΋࣮૷͠΍͘͢ͳΔʂ

    View full-size slide