Using Lottie for your iOS apps

  • Published on
    12-Apr-2017

  • View
    178

  • Download
    1

Embed Size (px)

Transcript

  • Using Lottie!Jinju Jang

  • What is Lottie? Lottie is an iOS, Android, and React Native library built by the

    Airbnb engineering & design team.

    It converts After Effects animations to a format for use in your app.

    After Effects animations in your app?! So tempting!

  • This is a lightning talk! The learning curve - Time, difficulty, shippable or not.

    My honest review - Good, bad, or weird experience through the exploring.

  • Part 1.

    The Learning curveLottie workflow & Time spent

  • Lets make art!

  • Lottie Workflow

    .JSON

    Export Import

    Body-movin

    Lottie

  • Time spent & Difficulty

    DAY 1

    Started learning

    After Effects

    DAY 4

    Made something

    okay

    Day 5++

    Trying it with

    Xcode!

  • Setting up Workflow = DONE!

  • Part 2.

    (My honest) ReviewGood, bad, and weird things

  • First impression = Easier than i thought!

  • creating conditions

  • Good = min-maxing! From an idea to actual screen = less than 7 days

    FYI, This type of idea usually gets rejected by your PM. (Because it takes too much time!)

    A designer can work in parallel with a developer.

    You can boost up creativity!

    Super light. The whole animation is only 9-15kb.

  • Bad? Perhaps?

    Its less smart when you want to swap an animation to something else. (We ended up using layer order)

    Honestly, there is nothing *seriously* bad.

  • Weird = Frame rates Frame rates seem slightly off compared to After Effects.

    I dont know what exactly causes this issue.

    Let me know if you know how to solve this!

    Note: After the talk, many developers came to me and explain why. It wasnt smooth because the CPU was rendering each single frame to show the animation. (That was how Lottie worked!) > Hmm I guess thats something you need to trade off to get convenience for now!

  • Not now, but One day Complex layer effects

    Merged vector layers

    Gradient

    Buttons

    Will be supported!

  • Please.

  • Conclusion Recommend it, its really fun.

    Until it becomes more clever, the best place to use it is somewhere you dont have to worry too much. (e.g: Replace static illustration with a looping animation?)

    Treat it as decoration.

  • Thank you!@arle13