lottie-animations

What this skill does

# Lottie Animations Skill

Comprehensive Lottie animation integration for mobile platforms, enabling high-quality vector animations from After Effects in iOS, Android, React Native, and Flutter applications.

## Overview

This skill provides capabilities for integrating Lottie animations into mobile applications, including animation playback control, performance optimization, interactive animations, and proper asset management across platforms.

## Capabilities

### Animation Integration
- Import and validate Lottie JSON files
- Configure lottie-ios for native iOS apps
- Set up lottie-android for native Android apps
- Integrate lottie-react-native for React Native
- Configure lottie for Flutter apps

### Playback Control
- Implement play, pause, stop controls
- Configure animation speed and direction
- Set up loop modes (none, loop, autoReverse)
- Implement progress-based playback
- Handle animation completion callbacks

### Interactive Animations
- Implement gesture-driven animations
- Configure animation markers/segments
- Sync animations with scroll position
- Implement drag-based animation control
- Handle touch interaction with animation

### Performance Optimization
- Optimize animation file size
- Configure rendering modes (software/hardware)
- Implement animation caching
- Handle memory management
- Preload animations for smooth playback

### Asset Management
- Organize animation assets
- Configure dynamic text replacement
- Handle color theming
- Manage animation versioning
- Implement asset preloading

## Prerequisites

### iOS Development
```ruby
# Podfile
pod 'lottie-ios'

# Or Swift Package Manager
# https://github.com/airbnb/lottie-ios.git
```

### Android Development
```groovy
// build.gradle
dependencies {
    implementation 'com.airbnb.android:lottie:6.3.0'
}
```

### React Native
```bash
npm install lottie-react-native
# or
yarn add lottie-react-native

# iOS pods
cd ios && pod install
```

### Flutter
```yaml
# pubspec.yaml
dependencies:
  lottie: ^3.0.0
```

## Usage Patterns

### iOS (SwiftUI)
```swift
import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    let animationName: String
    let loopMode: LottieLoopMode
    let animationSpeed: CGFloat
    @Binding var isPlaying: Bool

    func makeUIView(context: Context) -> LottieAnimationView {
        let animationView = LottieAnimationView(name: animationName)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = loopMode
        animationView.animationSpeed = animationSpeed
        return animationView
    }

    func updateUIView(_ animationView: LottieAnimationView, context: Context) {
        if isPlaying {
            animationView.play()
        } else {
            animationView.pause()
        }
    }
}

// Usage
struct ContentView: View {
    @State private var isPlaying = true

    var body: some View {
        VStack {
            LottieView(
                animationName: "loading",
                loopMode: .loop,
                animationSpeed: 1.0,
                isPlaying: $isPlaying
            )
            .frame(width: 200, height: 200)

            Button(isPlaying ? "Pause" : "Play") {
                isPlaying.toggle()
            }
        }
    }
}
```

### iOS (UIKit)
```swift
import Lottie

class AnimationViewController: UIViewController {
    private var animationView: LottieAnimationView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupAnimation()
    }

    private func setupAnimation() {
        animationView = LottieAnimationView(name: "success")
        animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        animationView.center = view.center
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .playOnce
        view.addSubview(animationView)
    }

    func playAnimation() {
        animationView.play { completed in
            if completed {
                print("Animation completed")
            }
        }
    }

    func playSegment(from: CGFloat, to: CGFloat) {
        animationView.play(fromProgress: from, toProgress: to, loopMode: .playOnce)
    }

    func setProgress(_ progress: CGFloat) {
        animationView.currentProgress = progress
    }
}
```

### Android (Kotlin - Jetpack Compose)
```kotlin
import com.airbnb.lottie.compose.*

@Composable
fun LottieAnimationScreen() {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(R.raw.loading)
    )
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )

    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(200.dp)
    )
}

// Controllable animation
@Composable
fun ControllableLottieAnimation() {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(R.raw.success)
    )
    var isPlaying by remember { mutableStateOf(false) }
    val progress by animateLottieCompositionAsState(
        composition = composition,
        isPlaying = isPlaying,
        restartOnPlay = true
    )

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        LottieAnimation(
            composition = composition,
            progress = { progress },
            modifier = Modifier.size(200.dp)
        )

        Button(onClick = { isPlaying = true }) {
            Text("Play")
        }
    }
}

// Progress-based animation
@Composable
fun ScrollSyncedAnimation(scrollProgress: Float) {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(R.raw.scroll_animation)
    )

    LottieAnimation(
        composition = composition,
        progress = { scrollProgress },
        modifier = Modifier.fillMaxWidth()
    )
}
```

### Android (XML Views)
```kotlin
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable

class AnimationActivity : AppCompatActivity() {
    private lateinit var animationView: LottieAnimationView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animation)

        animationView = findViewById(R.id.animation_view)
        setupAnimation()
    }

    private fun setupAnimation() {
        animationView.apply {
            setAnimation(R.raw.loading)
            repeatCount = LottieDrawable.INFINITE
            speed = 1.0f
        }
    }

    fun playAnimation() {
        animationView.playAnimation()
    }

    fun pauseAnimation() {
        animationView.pauseAnimation()
    }

    fun setProgress(progress: Float) {
        animationView.progress = progress
    }

    fun playSegment(startFrame: Int, endFrame: Int) {
        animationView.setMinAndMaxFrame(startFrame, endFrame)
        animationView.playAnimation()
    }
}
```

### React Native
```javascript
import React, { useRef, useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

const AnimationScreen = () => {
  const animationRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const playAnimation = () => {
    animationRef.current?.play();
    setIsPlaying(true);
  };

  const pauseAnimation = () => {
    animationRef.current?.pause();
    setIsPlaying(false);
  };

  const resetAnimation = () => {
    animationRef.current?.reset();
    setIsPlaying(false);
  };

  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        source={require('./animations/success.json')}
        style={styles.animation}
        autoPlay={false}
        loop={false}
        onAnimationFinish={() => setIsPlaying(false)}
      />

      <View style={styles.controls}>
        <Button
          title={isPlaying ? 'Pause' : 'Play'}
          onPress={isPlaying ? pauseAnimation : playAnimation}
        />
        <