Computer Science Diaries
5 Unknown Beautiful Animation Libraries for iOS Applications in SwiftUI

5 Unknown Beautiful Animation Libraries for iOS Applications in SwiftUI

CS Diaries's photo
CS Diaries
·

6 min read

SwiftUI is a modern declarative framework for building user interfaces on Apple platforms. It offers a simple and expressive way to create views, animations, transitions, and interactions. However, sometimes you may need more than what SwiftUI provides out of the box. That’s where animation libraries come in handy.

Animation libraries are collections of reusable components that can enhance your app’s UI/UX with stunning effects, transitions, and interactions. They can save you time and effort by providing ready-made solutions for common animation scenarios. In this article, we will explore five unknown but beautiful animation libraries for iOS applications in SwiftUI. These libraries are:

  • swiftui-animations
  • Liquid
  • shiny
  • SwiftUIPathAnimations
  • SwiftSunburstDiagram

Let’s dive into each one of them and see what they can do for your app!

swiftui-animations

swiftui-animations is a SwiftUI animation library that contains useful animations for loading/progress, looping, on-off, enter, exit, fade, spin, and background effects. You can directly implement these animations in your next iOS project with minimal code. The library also contains huge examples of spring animations such as inertial bounce, shake, twirl, jelly, jiggle, rubber band, kitchen sink, and wobble**1**.

Some of the benefits of using swiftui-animations are:

  • It supports accessibility features such as voice over and dynamic type.
  • It allows you to customize the animation duration, delay, repeat count, curve, and easing.
  • It provides a convenient modifier syntax that can be chained with other SwiftUI modifiers.

Here is an example of how to use swiftui-animations to create a loading animation with a spinning circle:

import SwiftUI
import swiftui_animations

struct LoadingView: View {
var body: some View {
Circle()
.fill(Color.blue)
.frame(width: 100, height: 100)
.spin()
}
}

And here is the result:

Transition a hamburger menu to a back icon Swift file

You can find more examples and documentation on the GitHub repository of swiftui-animations.

Liquid

Liquid is a SwiftUI library that helps you create playful backsplash effects with fluid dynamics. You can use it to add some fun and interactivity to your app’s background or foreground. Liquid supports both static and dynamic modes, where you can either specify the initial shape and color of the liquid blobs or let them react to the device’s motion**2**.

Some of the benefits of using Liquid are:

  • It uses Metal to render the liquid simulation with high performance and low power consumption.
  • It allows you to customize the liquid properties such as viscosity, density, tension, damping, and gravity.
  • It provides a simple modifier syntax that can be applied to any SwiftUI view.

Here is an example of how to use Liquid to create a dynamic liquid background that responds to the device’s tilt:

import SwiftUI
import Liquid

struct LiquidBackgroundView: View {
var body: some View {
ZStack {
Liquid()
.frame(width: 300, height: 600)
.foregroundColor(.blue)
.opacity(0.3)
.isDynamic(true)
Liquid()
.frame(width: 200, height: 400)
.foregroundColor(.blue)
.opacity(0.6)
.isDynamic(true)
Text("Hello, World!")
.font(.largeTitle)
.foregroundColor(.white)
}
}
}

And here is the result:

You can find more examples and documentation on the GitHub repository of Liquid.

shiny

shiny is a SwiftUI library that uses your device’s gyroscope to simulate lighting and motion effects on colors. It works on almost every SwiftUI view and can add some realism and depth to your app’s UI.

Some of the benefits of using shiny are:

  • It uses Core Motion to access the device’s orientation data and Core Image to apply the lighting effect.
  • It allows you to customize the light source position, intensity, color, and radius.
  • It provides a simple modifier syntax that can be applied to any SwiftUI view.

Here is an example of how to use shiny to create a shiny button that reflects light as you move your device:

import SwiftUI
import shiny

struct ShinyButtonView: View {
var body: some View {
Button(action: {
// do something
}) {
Text("Shiny Button")
.font(.largeTitle)
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
.shiny()
}
}

And here is the result:

You can find more examples and documentation on the GitHub repository of shiny.

SwiftUIPathAnimations

SwiftUIPathAnimations is a SwiftUI library that helps you perform path and shape animations, such as morphing circle or shape transformations. It provides two types of views: SimilarShape and InterpolatedShape, that can be used to animate between two or more similar or different paths respectively.

Some of the benefits of using SwiftUIPathAnimations are:

  • It uses Core Animation to interpolate between paths with different number and types of elements.
  • It allows you to customize the animation duration, delay, curve, and repeat count.
  • It provides a convenient initializer syntax that takes an array of paths and a progress value.

Here is an example of how to use SwiftUIPathAnimations to create a morphing circle that changes shape as you drag it:

import SwiftUI
import SwiftUIPathAnimations
struct MorphingCircleView: View {
@State private var dragPoint \= CGPoint(x: 100, y: 100)

var body: some View {
let circle \= Path(ellipseIn: CGRect(x: 0, y: 0, width: 200, height: 200))
let drag \= Path { path in
path.move(to: CGPoint(x: 100, y: 100))
path.addLine(to: dragPoint)
path.addArc(center: dragPoint,
radius: 50,
startAngle: Angle(degrees: 0),
endAngle: Angle(degrees: 360),
clockwise: true)
path.addLine(to: CGPoint(x: 100, y: 100))
}
let progress \= min(max((dragPoint.x - 50) / 100, 0), 1)
return SimilarShape(paths: [circle, drag], progress: progress)
.fill(Color.blue)
.frame(width: 200, height: 200)
.gesture(
DragGesture(minimumDistance: 0)
.onChanged { value in
dragPoint \= value.location
}
)
}
}

And here is the result:

You can find more examples and documentation on the GitHub repository of SwiftUIPathAnimations.

SwiftSunburstDiagram

SwiftSunburstDiagram is a SwiftUI library that helps you create beautiful sunburst diagrams given a tree of objects. A sunburst diagram is a radial chart that shows hierarchical data with concentric circles. It can be useful for visualizing complex data structures or relationships.

Some of the benefits of using SwiftSunburstDiagram are:

  • It uses Core Graphics to draw the diagram with high performance and quality.
  • It allows you to customize the diagram properties such as colors, labels, fonts, angles, and animations.
  • It provides a simple view syntax that takes a configuration object and a data object.

Here is an example of how to use SwiftSunburstDiagram to create a sunburst diagram that shows the distribution of programming languages on GitHub:

import SwiftUI
import SwiftSunburstDiagram

struct SunburstDiagramView: View {
var body: some View {
let data \= SunburstData(name: "Languages",
children:
[
SunburstData(name: "JavaScript", value: 26.8),
SunburstData(name: "Python", value: 20.3),
SunburstData(name: "Java", value: 16.9),
SunburstData(name: "TypeScript", value: 11.4), SunburstData(name: "C#", value: 7.3), SunburstData(name: "PHP", value: 6.7), SunburstData(name: "C++", value: 5.1), SunburstData(name: "C", value: 4.9), SunburstData(name: "Other", value: 1.6) ])
let configuration \= SunburstConfiguration(nodes: data,
calculationMode: .parentDependent(totalValue: 100))

return SunburstView(configuration: configuration)
.padding()
}

You can find more examples and documentation on the GitHub repository of SwiftSunburstDiagram.

Conclusion

In this article, we have explored five unknown but beautiful animation libraries for iOS applications in SwiftUI. These libraries can help you create stunning effects, transitions, and interactions for your app’s UI/UX with minimal code. They are:

  • swiftui-animations: A SwiftUI animation library that contains useful animations for loading/progress, looping, on-off, enter, exit, fade, spin, and background effects.
  • Liquid: A SwiftUI library that helps you create playful backsplash effects with fluid dynamics.
  • shiny: A SwiftUI library that uses your device’s gyroscope to simulate lighting and motion effects on colors.
  • SwiftUIPathAnimations: A SwiftUI library that helps you perform path and shape animations, such as morphing circle or shape transformations.
  • SwiftSunburstDiagram: A SwiftUI library that helps you create beautiful sunburst diagrams given a tree of objects.

We have seen how to use each library with some code examples and screenshots. We have also discussed some of the benefits and features of each library.

If you are interested in learning more about these libraries, you can check out their GitHub repositories and documentation. You can also try them out in your own projects and see what amazing animations you can create with SwiftUI.

I hope you enjoyed this article and found it useful. Happy coding! 😊