Display lottie animation in iOS WidgetKit

Question

I want to show lottie animation in iOS WidgetKit. I use this project https://github.com/airbnb/lottie-ios. It works well in APP. But same code not work in WidgetKit.

The code in APP is as bellow, which works well in APP:

struct widgetTestyView : View {

    var body: some View {
        VStack() {
            //Text("\(entry.date)")
            LottieView(animation: LottieAnimation.named("Samples/9squares_AlBoardman")!)

        }
    }
}

But same code did not work in WidgetKit, the code is as bellow:

//
//  widget.swift
//  widget
//

import WidgetKit
import SwiftUI
import Lottie

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date())
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date())
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
}

struct widgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack() {
            //Text("\(entry.date)")
            LottieView(animation: LottieAnimation.named("Samples/9squares_AlBoardman")!)

        }
    }
}

@main
struct widget: Widget {
    let kind: String = "widget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            widgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

struct widget_Previews: PreviewProvider {
    static var previews: some View {
        widgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

Is it possible to show lottie in WidgetKit?

score 0 · Answer 1 · answered Jul 11 '23 at 07:41

0

I don't think it's possible to have Lottie animations directly within widgets. In my knowledge, WidgetKit primarily focuses on displaying static and dynamic content such as text, images, and basic UI components. If we look at the documentation, it doesn't say anything about performing a Lottie (or any other package for that matter) animation.

In addition to the default transitions and animations that the system performs when views update their data, you can choose other built-in SwiftUI transitions and animations.

They only mention about the already built-in transitions and animations.

I suggest you take a look at the official documentation about animating widgets, maybe you can find something I missed. https://developer.apple.com/documentation/widgetkit/animating-data-updates-in-widgets-and-live-activities

answered Jul 11 '23 at 07:41

leopanic13

62
5

Could you have a loot at https://stackoverflow.com/questions/74506733/how-to-animate-widgetkit-widgets-like-other-apps-do-it ? – mars Jul 11 '23 at 10:29
Wow, there's an example app in that question that somehow found a workaround to this issue. This is really interesting, I hope we can find a way through this. – leopanic13 Jul 11 '23 at 15:23
Maybe if we can find a way to convert the Lottie animations to actual images and then we can create an animation sequence in the Widget. It could work. – leopanic13 Jul 11 '23 at 15:26
The refresh interval is less than 1 second, I don't know how it was done – mars Jul 12 '23 at 03:11

Display lottie animation in iOS WidgetKit

1 Answers1