dotLottie iOS Player Examples

This page provides practical examples for using the dotLottie iOS player.

Setup

Ensure you have added the DotLottie framework to your project and import it where needed:

import DotLottie

DotLottiePlayerView (SwiftUI) Examples

1. Basic Animation

import SwiftUI
import DotLottie

struct BasicPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .frame(width: 300, height: 300)
    }
}

2. Async Loading with Placeholder

import SwiftUI
import DotLottie

struct AsyncPlayerView: View {
    var body: some View {
        DotLottiePlayerView({
            try await DotLottieAnimation(
                webURL: "https://assets.lottiefiles.com/samples/animation.lottie",
                config: AnimationConfig(autoplay: true, loop: true)
            )
        }, placeholder: {
            ProgressView("Loading...")
        })
        .looping()
        .playing()
        .frame(width: 300, height: 300)
    }
}

3. Custom Speed and Mode

import SwiftUI
import DotLottie

struct CustomPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .animationSpeed(2.0)
        .mode(.bounce)
        .useFrameInterpolation(true)
        .frame(width: 300, height: 300)
    }
}

4. Animation Loaded Callback

import SwiftUI
import DotLottie

struct CallbackPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .animationDidLoad {
            print("Animation is ready!")
        }
        .frame(width: 300, height: 300)
    }
}

5. Segment Playback

import SwiftUI
import DotLottie

struct SegmentPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .segments((0, 60)) // Play only frames 0–60
        .frame(width: 300, height: 300)
    }
}

DotLottiePlayerView (SwiftUI) Examples

1. Basic Animation

import SwiftUI
import DotLottie

struct BasicPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .frame(width: 300, height: 300)
    }
}

2. Async Loading with Placeholder

import SwiftUI
import DotLottie

struct AsyncPlayerView: View {
    var body: some View {
        DotLottiePlayerView({
            try await DotLottieAnimation(
                webURL: "https://assets.lottiefiles.com/samples/animation.lottie",
                config: AnimationConfig(autoplay: true, loop: true)
            )
        }, placeholder: {
            ProgressView("Loading...")
        })
        .looping()
        .playing()
        .frame(width: 300, height: 300)
    }
}

3. Custom Speed and Mode

import SwiftUI
import DotLottie

struct CustomPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .animationSpeed(2.0)
        .mode(.bounce)
        .useFrameInterpolation(true)
        .frame(width: 300, height: 300)
    }
}

4. Animation Loaded Callback

import SwiftUI
import DotLottie

struct CallbackPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .animationDidLoad {
            print("Animation is ready!")
        }
        .frame(width: 300, height: 300)
    }
}

5. Segment Playback

import SwiftUI
import DotLottie

struct SegmentPlayerView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .segments((0, 60)) // Play only frames 0–60
        .frame(width: 300, height: 300)
    }
}

DotLottiePlayerUIView (UIKit) Examples

1. Basic Animation

import UIKit
import DotLottie

class BasicUIKitController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let playerView = DotLottiePlayerUIView(
            name: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        )
        playerView.frame = CGRect(x: 50, y: 100, width: 300, height: 300)
        view.addSubview(playerView)
    }
}

2. With Playback Controls

import UIKit
import DotLottie

class ControlledUIKitController: UIViewController {
    var playerView: DotLottiePlayerUIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        playerView = DotLottiePlayerUIView(
            name: "animation",
            config: AnimationConfig(autoplay: false, loop: false)
        )
        playerView.frame = CGRect(x: 50, y: 100, width: 300, height: 300)
        view.addSubview(playerView)

        setupControls()
    }

    func setupControls() {
        let playButton = UIButton(type: .system)
        playButton.setTitle("Play", for: .normal)
        playButton.addTarget(self, action: #selector(playTapped), for: .touchUpInside)
        playButton.frame = CGRect(x: 50, y: 420, width: 80, height: 40)
        view.addSubview(playButton)

        let pauseButton = UIButton(type: .system)
        pauseButton.setTitle("Pause", for: .normal)
        pauseButton.addTarget(self, action: #selector(pauseTapped), for: .touchUpInside)
        pauseButton.frame = CGRect(x: 150, y: 420, width: 80, height: 40)
        view.addSubview(pauseButton)

        let stopButton = UIButton(type: .system)
        stopButton.setTitle("Stop", for: .normal)
        stopButton.addTarget(self, action: #selector(stopTapped), for: .touchUpInside)
        stopButton.frame = CGRect(x: 250, y: 420, width: 80, height: 40)
        view.addSubview(stopButton)
    }

    @objc func playTapped() { playerView.play() }
    @objc func pauseTapped() { playerView.pause() }
    @objc func stopTapped() { playerView.stop() }
}

3. Loading from URL

import UIKit
import DotLottie

class URLUIKitController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let playerView = DotLottiePlayerUIView(
            url: URL(string: "https://assets.lottiefiles.com/samples/animation.lottie")!,
            config: AnimationConfig(autoplay: true, loop: true)
        )
        playerView.frame = CGRect(x: 50, y: 100, width: 300, height: 300)
        view.addSubview(playerView)
    }
}

4. Marker Playback

import UIKit
import DotLottie

class MarkerUIKitController: UIViewController {
    var playerView: DotLottiePlayerUIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        playerView = DotLottiePlayerUIView(
            name: "animation_with_markers",
            config: AnimationConfig(autoplay: true, loop: false, marker: "intro")
        )
        playerView.frame = CGRect(x: 50, y: 100, width: 300, height: 300)
        view.addSubview(playerView)

        // List available markers
        let markers = playerView.markers()
        print("Available markers: \(markers)")

        // Switch to a different marker
        playerView.play(marker: "outro", loopMode: .playOnce)
    }
}

5. Animation Loaded Callback

import UIKit
import DotLottie

class CallbackUIKitController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let playerView = DotLottiePlayerUIView(
            name: "animation",
            config: AnimationConfig(autoplay: true, loop: true)
        )
        playerView.frame = CGRect(x: 50, y: 100, width: 300, height: 300)
        view.addSubview(playerView)

        playerView.animationLoaded = {
            print("Animation loaded — total frames: \(playerView.totalFrames)")
        }
    }
}

DotLottieAnimation Examples

1. Basic Animation (SwiftUI)

import SwiftUI
import DotLottie

struct BasicSwiftUIView: View {
    @StateObject var animation = DotLottieAnimation(
        fileName: "animation",
        config: AnimationConfig(autoplay: true, loop: true)
    )

    var body: some View {
        VStack {
            animation.view()
                .frame(width: 300, height: 300)
        }
    }
}

2. Controlled Animation (SwiftUI)

import SwiftUI
import DotLottie

struct ControlledSwiftUIView: View {
    @StateObject var animation = DotLottieAnimation(
        fileName: "animation",
        config: AnimationConfig(autoplay: false, loop: false)
    )

    var body: some View {
        VStack {
            animation.view()
                .frame(width: 300, height: 300)

            HStack {
                Button("Play") { animation.play() }
                Button("Pause") { animation.pause() }
                Button("Stop") { animation.stop() }
            }
            .padding()
        }
    }
}

3. Event Handling with Observer

import UIKit
import DotLottie

class MyAnimationObserver: Observer {
    func onLoad() { print("Loaded") }
    func onPlay() { print("Play") }
    func onPause() { print("Pause") }
    func onStop() { print("Stop") }
    func onComplete() { print("Complete") }
    func onLoop(loopCount: UInt32) { print("Loop \(loopCount)") }
    func onFrame(frameNo: Float) { }
    func onRender(frameNo: Float) { }
    func onLoadError() { print("Load Error") }
}

class EventUIKitController: UIViewController {
    var dotLottieAnimation: DotLottieAnimation?
    let observer = MyAnimationObserver()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let config = AnimationConfig(autoplay: true, loop: false)
        dotLottieAnimation = DotLottieAnimation(fileName: "animation", config: config)

        if let animation = dotLottieAnimation {
            let animationView = animation.view()
            animationView.frame = CGRect(x: 50, y: 100, width: 300, height: 300)
            view.addSubview(animationView)

            // Subscribe the observer
            animation.subscribe(observer: observer)
        }
    }

    deinit {
        dotLottieAnimation?.unsubscribe(observer: observer)
    }
}

4. Theming

import SwiftUI
import DotLottie

struct ThemedView: View {
    @StateObject var animation = DotLottieAnimation(
        fileName: "themed_animation",
        config: AnimationConfig(autoplay: true, loop: true, themeId: "dark")
    )

    var body: some View {
        VStack {
            animation.view()
                .frame(width: 300, height: 300)

            HStack {
                Button("Light") { animation.setTheme("light") }
                Button("Dark") { animation.setTheme("dark") }
                Button("Reset") { animation.resetTheme() }
            }
        }
    }
}

5. Typed Slots

import SwiftUI
import DotLottie

struct SlotView: View {
    @StateObject var animation = DotLottieAnimation(
        fileName: "slotted_animation",
        config: AnimationConfig(autoplay: true, loop: true)
    )

    var body: some View {
        VStack {
            animation.view()
                .frame(width: 300, height: 300)

            Button("Apply Red") {
                animation.setColorSlot(slotId: "primaryColor", r: 1.0, g: 0.0, b: 0.0)
            }
            Button("Change Text") {
                animation.setTextSlot(slotId: "title", text: "Hello!")
            }
            Button("Clear All Slots") {
                animation.clearSlots()
            }
        }
    }
}

6. State Machine

import SwiftUI
import DotLottie

struct StateMachineView: View {
    @StateObject var animation = DotLottieAnimation(fileName: "interactive_animation")

    class MyObserver: StateMachineObserver {
        func onTransition(previousState: String, newState: String) {
            print("Transition: \(previousState) -> \(newState)")
        }
        func onStateEntered(enteringState: String) {
            print("Entered: \(enteringState)")
        }
        func onStateExit(leavingState: String) {
            print("Exited: \(leavingState)")
        }
    }

    let smObserver = MyObserver()

    var body: some View {
        VStack {
            animation.view()
                .frame(height: 300)
                .onAppear {
                    if animation.stateMachineLoad(id: "myFSM") {
                        animation.stateMachineSubscribe(observer: smObserver)
                        animation.stateMachineStart()
                    }
                }
                .onDisappear {
                    animation.stateMachineStop()
                    animation.stateMachineUnsubscribe(observer: smObserver)
                }

            Button("Click") {
                animation.stateMachinePostEvent(Event.click(x: 150, y: 150))
            }
        }
    }
}