Tiny Lottie

HomeGuidePrivacy PolicyAbout

Mobile Development with Lottie

iOS Implementation (Swift)

Installation

// CocoaPods
pod 'lottie-ios'

// Swift Package Manager
.package(url: "https://github.com/airbnb/lottie-ios.git", from: "4.0.0")

Basic Usage

import Lottie

class ViewController: UIViewController {
  private var animationView: LottieAnimationView?
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // Load animation from bundle
    animationView = .init(name: "animation")
    animationView!.frame = view.bounds
    animationView!.contentMode = .scaleAspectFit
    animationView!.loopMode = .loop
    animationView!.animationSpeed = 0.5
    view.addSubview(animationView!)
    
    // Start animation
    animationView!.play()
  }
}

Android Implementation (Kotlin)

Gradle Setup

// app/build.gradle
dependencies {
    implementation 'com.airbnb.android:lottie:6.1.0'
}

XML Layout

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_fileName="animation.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />

Programmatic Control

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
        
        // Load from assets
        animationView.setAnimation("animation.json")
        
        // Control playback
        animationView.playAnimation()
        animationView.pauseAnimation()
        
        // Set callbacks
        animationView.addAnimatorListener(object : AnimatorListener {
            override fun onAnimationEnd(animation: Animator) {
                // Animation completed
            }
        })
    }
}

Cross-Platform Solutions

React Native

// Install
npm install lottie-react-native

// iOS additional setup
cd ios && pod install

// Usage
import LottieView from 'lottie-react-native';

export default function Animation() {
  return (
    <LottieView
      source={require('./animation.json')}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

Flutter

// pubspec.yaml
dependencies:
  lottie: ^2.6.0

// Usage
import 'package:lottie/lottie.dart';

Widget build(BuildContext context) {
  return Lottie.asset(
    'assets/animation.json',
    width: 200,
    height: 200,
    fit: BoxFit.fill,
  );
}

Mobile Performance Tips

Mobile devices have specific performance considerations that require careful optimization when implementing Lottie animations. Enabling hardware acceleration when available can significantly improve rendering performance by offloading graphics processing to the GPU, resulting in smoother animations and reduced battery consumption. Optimizing animations for 60fps on mobile devices ensures fluid motion that matches the refresh rate of most modern smartphones, creating a more polished user experience.

For applications that use the same animations repeatedly, consider using cached compositions to reduce processing overhead and memory usage. This approach allows the animation engine to reuse previously loaded assets rather than parsing JSON and creating new elements each time. Implementing proper memory management practices is essential on memory-constrained mobile devices - be sure to destroy animations when they're no longer needed and avoid keeping references that prevent garbage collection.

Perhaps most importantly, always test animations on lower-end devices for performance validation. What works smoothly on flagship devices may cause significant frame drops on budget phones with less powerful processors. Establishing a minimum performance target device helps ensure your animations remain accessible to a broader audience without compromising the user experience.

Platform-Specific Considerations

iOS Considerations:

When implementing Lottie animations on iOS platforms, using CALayer backing provides better performance by leveraging Core Animation's hardware-accelerated rendering pipeline. For simpler animations where Lottie might be overkill, consider using Core Animation directly for improved efficiency and reduced overhead. Always be mindful of memory usage on older iOS devices, as animation assets can quickly consume available memory, especially on devices with limited RAM like older iPhone models or entry-level iPads.

Android Considerations:

Android's diverse ecosystem requires thorough testing across different API levels to ensure compatibility and consistent animation behavior. Enabling hardware acceleration where possible is particularly important on Android due to the wide variety of GPU capabilities across different devices. When packaging your application, consider the APK size impact of animation files, as larger animation files can significantly increase download size. Using the Android App Bundle format and implementing on-demand asset delivery can help mitigate size concerns for animations that aren't immediately needed at launch.

Tiny Lottie

HomeGuidePrivacy PolicyAbout