Apple Logo With RGB Offset

AppleLogoWIthRgbOffset.swift

import SwiftUI
import CoreMotion

// Main View
struct AppleLogoWithRgbOffset: View {
  
    // Initiate and pass a motion manager instance as 
    // an enviromental dependency when you initilize this view
    @EnvironmentObject var motion: MotionManager 
  
    @State private var offset: CGPoint = CGPoint(x: 0, y: 0)
    @State private var snapOffset: CGPoint = CGPoint(x: 0, y: 0)
    @State private var screenSize: CGRect = .zero
    @State private var blockGyro: Bool = false
    let mult: Double = 120 // Acceleration data is normalized so it defines the offset amount
    
    var body: some View {
        VStack {
            Spacer()
            ZStack {
                AppleLogo(
                    offset: $offset,
                    xMultiplier: -mult,
                    yMultiplier: mult,
                    color: .blue)
                    
                AppleLogo(
                    offset: $offset,
                    xMultiplier: 0,
                    yMultiplier: 0,
                    color: .green)
                
                AppleLogo(
                    offset: $offset,
                    xMultiplier: mult,
                    yMultiplier: -mult,
                    color: .red)
            }
            .padding(96)
            Spacer()
        }
        .animation(.spring(duration: 1, bounce: 0.5), value: offset)
        .ignoresSafeArea(.all)
        .background(.black)
        .onChange(of: motion) { oldValue, newValue in
            if !blockGyro {
                offset.x = newValue.x - snapOffset.x
                offset.y = newValue.y - snapOffset.y
            }
        }
        .gesture(
            DragGesture()
                .onChanged { value in
                    blockGyro = true
                    offset.x = -(screenSize.width / 2 - value.location.x) / (screenSize.width / 2)
                    offset.y = (screenSize.height / 2 - value.location.y) / (screenSize.width / 2)
//                    print(value)
                }
                .onEnded { value in
                    blockGyro = false
                    snapOffset.x = motion.x
                    snapOffset.y = motion.y
                    offset = .zero
                }
        )
        .onGeometryChange(for: CGRect.self) { geometry in
            geometry.frame(in: .global)
        } action: { newValue in
            screenSize = newValue
            print(screenSize)
        }
        .onAppear() {
            snapOffset.x = motion.x
            snapOffset.y = motion.y
        }
    }
}


struct AppleLogo: View {
    @Binding var offset: CGPoint
    let xMultiplier: CGFloat
    let yMultiplier: CGFloat
    let color: Color
    
    var body: some View {
        Image(systemName: "applelogo")
            .resizable()
            .scaledToFit()
            .foregroundStyle(color)
            .blendMode(.screen)
            .offset(x: offset.x * xMultiplier, y: offset.y * yMultiplier)
    }
}

class MotionManager: ObservableObject, Equatable {
    // https://developer.apple.com/documentation/coremotion/cmdevicemotion/gravity
    private let motionManager: CMMotionManager = CMMotionManager()
    
    var x: Double = 0
    var y: Double = 0
    var z: Double = 0
    
    init() {
        
        motionManager.startDeviceMotionUpdates(to: .main) { data, error in
            guard let newData = data?.gravity else { return }
        
            self.x = newData.x
            self.y = newData.y
            self.z = newData.z
            
            self.objectWillChange.send()
        }
    }
    
    // https://developer.apple.com/documentation/swift/equatable
    // hacked with != to force onChange updates (there is an issue with multiple invokation during one frame)
    // TODO: Fix the hack
    static func ==(lhs: MotionManager, rhs: MotionManager) -> Bool {
        return lhs.x != rhs.x && lhs.y != rhs.y && lhs.z != rhs.z
    }
}