LottieView - Wrapper around Lottie in SwiftUI that allows chaining animations & triggering callbacks at certain frames

Related tags

Animation LottieView
Overview

About LottieView

LottieView is a Wrapper around Lottie in SwiftUI that allows chaining animations & triggering callbacks at certain frames

Requirements

  • iOS 13.0
  • Swift 5+

Demo

CleanShot.2022-01-23.at.22.55.52.mp4

Dependencies

  • Lottie

Installation

Swift Package Manager (SPM)

Usage

var body: some View {
    VStack {
      /* Lottie Wrapping Begins */
    LottieView(animation: .splash /* 1 */, animationFramesHandlers: [
      .init(startFrame: 0, endFrame: 80, onComplete: { didFinish in // 2
        guard didFinish else { return }
        withAnimation(.spring()) {
          showFooterText = true // 3
        }
      }),
      .init(startFrame: 80, endFrame: 147, onComplete: { didFinish in
        guard didFinish else { return }
        withAnimation {
          finishSplash = true
        }
      })
    ])
      /* Lottie Wrapping Ends */
      
      if showFooterText {
        Text("Al Najd".localized)
          .font(.pTitle2.bold())
          .foregroundColor(.mono.offblack)
          .opacity(showFooterText ? 1 : 0)
          .offset(y: showFooterText ? 0 : 100)
      }
      
      if showFooterText {
        Text("The Compass towards discipline \nwith Allah")
          .font(.pHeadline)
          .foregroundColor(.mono.label)
          .multilineTextAlignment(.center)
          .opacity(showFooterText ? 1 : 0)
          .offset(y: showFooterText ? 0 : 100)
      }
    }.background(
      Color
        .primary
        .background
        .ignoresSafeArea()
    )
  }

In your View code

  1. You pass the JSON file name
  2. set the frames and if you want to take action in them, the default is to play from start to end with no callbacks
  3. handle happy and cases where animation didn't finish

Known Issues

  • None so far

Contributions

You know the drill, Fork, Make your edits, and open a PR if you want

You might also like...
Match animations in SwiftUI and UIKit/AppKit
Match animations in SwiftUI and UIKit/AppKit

MatchedAnimation Match animations in SwiftUI and UIKit/AppKit. /// Draw a box in

Tools for SwiftUI that helps perform Path and Shape animations, such us morphing circle or shape transformations
Tools for SwiftUI that helps perform Path and Shape animations, such us morphing circle or shape transformations

SwiftUI+PathAnimations 🔵 Introduction This packages contains SimilarShape and InterpolatedShape, both can be used to achieve shapes animations with S

Easily pause and resume SwiftUI animations
Easily pause and resume SwiftUI animations

swiftui-pausable-animation Easily pause and resume SwiftUI animations! Installation This component is distributed as a Swift package. Just add this re

Swiftui Spring Animations
Swiftui Spring Animations

Swiftui Spring Animations This repository serves as your reference for SwiftUI Spring Animations. It demonstrates use cases for the various types of s

Compose SpriteKit animations quickly in a declarative SwiftUI-style

ActionBuilder Caveat developer: As this package is pre-release, the API may change significantly without notice. It has not been tested, so use it at

A concept to more easily define simple keyframe / multi-step animations in SwiftUI

🎞 Animate A concept to more easily define simple keyframe / multi-step animations in SwiftUI, without: Defining an @State value for each property to

Physics-based animations for iOS, tvOS, and macOS.

Advance An animation library for iOS, tvOS, and macOS that uses physics-based animations (including springs) to power interactions that move and respo

Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers
Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers

Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers. It's magic. Features Animate a

Advanced Natural Motion Animations, Simple Blocks Based Syntax
Advanced Natural Motion Animations, Simple Blocks Based Syntax

FlightAnimator Moved to Swift 3.1 Support: For Swift 3.1 - Use tag Version 0.9.9 See Installation Instructions for clarification Introduction FlightAn

Owner
Ahmed Ramy
Nerdmaster by day 👨🏻‍💻 Hogwarts Geek by night 🧙‍♂️ Jedi Master in another matrix 😎 Chi Sao-er every Friday night 🥷 And a full-time meme addict 🤷‍♂️
Ahmed Ramy
Swiftui-animation-observer - Track SwiftUI animation progress and completion via callbacks

SwiftUI Animation Observer Track SwiftUI animation progress and completion via c

Gordan Glavaš 9 Nov 5, 2022
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

ver 2.0 NB! Breaking changes in 2.0 - due to a lot of requests EasyAnimation does NOT automatically install itself when imported. You need to enable i

Marin Todorov 3k Dec 27, 2022
LottieUI - A library developed to make Lottie easy to implement. It supports iOS and macOS

LottieUI It is a library developed to make Lottie easy to implement. It supports

jasu 51 Dec 24, 2022
A collection of animations for iOS. Simple, just add water animations.

DCAnimationKit A collection of animations for iOS Simply, just add water! DCAnimationKit is a category on UIView to make animations easy to perform. E

Dalton 797 Sep 23, 2022
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
MotionBlur allows you to add motion blur effect to iOS animations.

MotionBlur MotionBlur allows you to add motion blur effect to your animations (currently only position's change). See the accompanying blog post to le

Arek Holko 1.5k Nov 3, 2022
Inspired by Fabric - Answers animation. Allows to "build" given view with pieces. Allows to "destroy" given view into pieces

ADPuzzleAnimation Whats inside Custom animation for UIView inspired by Fabric - Answers animation. Easy to use To create your first animation you need

Anton 126 Dec 25, 2022
Animations created with SwiftUI.

A repository containing a variety of animations and Animated components created in SwiftUI that you can use in your own projects.

Shubham Kr. Singh 1.5k Jan 2, 2023