Skip to content

Instantly share code, notes, and snippets.

@legolasW
Forked from amosgyamfi/SiriAnimation.swift
Created November 28, 2022 14:58
Show Gist options
  • Save legolasW/539fcf731df252d03b4309422fbdb088 to your computer and use it in GitHub Desktop.
Save legolasW/539fcf731df252d03b4309422fbdb088 to your computer and use it in GitHub Desktop.
How to clone the Siri Animation with SwiftUI
//
// ListeningSiriAnimation.swift
// SwiftUI Siri Animation
//
import SwiftUI
struct ListeningSiriAnimation: View {
@State var isRotating = false
var body: some View {
ZStack {
ZStack {
Image("shadow")
Image("icon-bg")
Image("pink-top")
.rotationEffect(.degrees(isRotating ? 320 : -360))
.hueRotation(.degrees(isRotating ? -270 : 60))
Image("pink-left")
.rotationEffect(.degrees(isRotating ? -360 : 180))
.hueRotation(.degrees(isRotating ? -220 : 300))
Image("blue-middle")
.rotationEffect(.degrees(isRotating ? -360 : 420))
.hueRotation(.degrees(isRotating ? -150 : 0))
.rotation3DEffect(.degrees(75), axis: (x: isRotating ? 1 : 5, y: 0, z: 0))
Image("blue-right")
.rotationEffect(.degrees(isRotating ? -360 : 420))
.hueRotation(.degrees(isRotating ? 720 : -50))
.rotation3DEffect(.degrees(75), axis: (x: 1, y: 0, z: isRotating ? -5 : 15))
Image("intersect")
.rotationEffect(.degrees(isRotating ? 30 : -420))
.hueRotation(.degrees(isRotating ? 0 : 720))
.rotation3DEffect(.degrees(15), axis: (x: 1, y: 1, z: 1), perspective: isRotating ? 5 : -5)
Image("green-right")
.rotationEffect(.degrees(isRotating ? -300 : 360))
.hueRotation(.degrees(isRotating ? 300 : -15))
.rotation3DEffect(.degrees(15), axis: (x: 1, y: isRotating ? -1 : 1, z: 0), perspective: isRotating ? -1 : 1)
Image("green-left")
.rotationEffect(.degrees(isRotating ? 360 : -360))
.hueRotation(.degrees(isRotating ? 180 :50))
.rotation3DEffect(.degrees(75), axis: (x: 1, y:isRotating ? -5 : 15, z: 0))
Image("bottom-pink")
.rotationEffect(.degrees(isRotating ? 400 : -360))
.hueRotation(.degrees(isRotating ? 0 : 230))
.opacity(0.25)
.blendMode(.multiply)
.rotation3DEffect(.degrees(75), axis: (x: 5, y:isRotating ? 1 : -45, z: 0))
}
.blendMode(isRotating ? .hardLight : .difference )
Image("highlight")
.rotationEffect(.degrees(isRotating ? 360 : 250))
.hueRotation(.degrees(isRotating ? 0 : 230))
.padding()
.onAppear{
withAnimation(.easeInOut(duration: 12).repeatForever(autoreverses: false)) {
isRotating.toggle()
}
}
}.scaleEffect(0.6)
}
}
struct ListeningSiriAnimation_Previews: PreviewProvider {
static var previews: some View {
ListeningSiriAnimation()
.preferredColorScheme(.dark)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment