Easy animation in SwiftUI

Let me introduce you Rive, the interactive graphics tool to create animations for major platforms

For beginners like us, we can make a free account in Rive and start creating animations for iphone apps. In this blog I am going to create an animation using Rive and make it as a background for my app

background animation using Rive

These circles moves from one position to another and also expands in size. This .riv file can be exported for the newest/oldest runtime available from Rive.

Now open Xcode and add the Rive runtime package using the package manager in Xcode.

Once the package is added to the project, you have to import the package in the ContentView using command import RiveRuntime

importing RiveRuntime to the ContentView

Sometimes Xcode cannot run the package and you will get error from the rive runtime package. In such case, download the package from github and add it as a local package to Xcode

Now add the .riv file that you have downloaded from Rive.app, to Xcode. While adding the file do not forget to tick "Add to targets" checkmark.

Finally some coding!!

This is a sample ContentView file

import SwiftUI
import RiveRuntime
struct ContentView: View {
var body: some View {
    ZStack{
        Color.black.ignoresSafeArea()
        RiveViewModel(fileName:"newfile").view().ignoresSafeArea()
    }
  }
}

Output:

Now by adding blur to the RiveViewModel, you will get a nice background for your app

import SwiftUI
import RiveRuntime
struct ContentView: View {
var body: some View {
ZStack{
Color.black.ignoresSafeArea()
RiveViewModel(fileName:"newfile").view().blur(radius:10).ignoresSafeArea()
Text("Welcome to Rive").padding().fontWeight(.bold).frame(width: .infinity, height: 30).foregroundColor(.white).background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10, style: .circular)).scaleEffect(1.5).padding()
    }
  }
}

Expected Background:

Output from Xcode

This is just an example, you can do a lot using Rive, do check it out.

If you like this blog, please do a clap and follow me for more, thanks!