React Native Interpolation

앱 설명

• 스크린을 터치하였을 때 좌표값을 구한다.

문법

• UIScren : 디스플레이와 관련된 속성을 정의
• onChanged : 제스처 값이 변경될 때 수행할 작업을 추가
• preferredColorScheme : 기본 모드를 설정, 라이트모드, 다크모드
• static : 일반적인 기능은 저장하는 것 , 모든 인스턴스에서 특정 프로퍼티 및 메서드를 공유
• struct : 내부의 값이 전체 struct를 변경할때마다 전체 구조체가 자동적으로 변경. 상속이 불가능, 고유한 값
• class : 단일 상속만 가능, 여러가지가 동일한 값을 가리킴. 클래스 내부의값이 변경되지만 다시 렌더링 되지는 않음.
• state : 특정 행동을 하면 자동으로 state를 변환시켜준다 인터페이스 업데이트, 뷰를 다시 렌더링

import SwiftUI

struct ContentView: View {
    
    @State var offset: CGFloat = 0
    let screenWidth: CGFloat = UIScreen.main.bounds.width
    @State var outputValue: CGFloat = 0
    
    var body: some View {
        VStack {
            // 샘플 뷰
            Text("""
Interpolation.shared
.interpolate(
inputStartRange: 0,
inputEndRange: screenWidth,
outputStartRange: 0,
outputEndRange: 5,
value: newValue)

Input Value: \\(String(format: "%.1f", offset))
Output Value: \\(String(format: "%.1f", outputValue))
""")
            .frame(maxWidth: .infinity,alignment:  .leading)
            .padding(15)
            .background{
                RoundedRectangle(cornerRadius: 15, style: .continuous)
                    .fill(.primary.opacity(0.06))
            }
            .padding(15)
            
            Rectangle()
                .fill(.mint)
                .overlay {
                    Text("Drag Gesture")
                }
                .gesture(DragGesture()
                    .onChanged(({ value in
                        offset = value.location.x
                    }))

                )
                .onChange(of: offset) { newValue in
                    // 이것은 애니메이션에 많이 유요할것이다.
                    //React Native Interpolate 함수에서 영감을 얻음
                    //Drag Gesture Max Xlocation은 최대 화면 너비이므로
                    // 제스처 위치를 0...5에서 시리즈로 변환해야 합니다.
                    
                    outputValue = Interpolation.shared
                        .interpolate(
                            inputStartRange: 0,
                            inputEndRange: screenWidth,
                            outputStartRange: -200,
                            outputEndRange: 100,
                            value: newValue)
                }
        }
        .preferredColorScheme(.dark)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

class Interpolation{
    
    static let shared = Interpolation()
    
    func interpolate(
        inputStartRange x1: CGFloat,
        inputEndRange x2: CGFloat,
        outputStartRange y1: CGFloat,
        outputEndRange y2: CGFloat,
        value x: CGFloat
    )->CGFloat{
        // 선형 보간 공식
        let y = y1 + ((y2-y1)/(x2-x1)) * (x-x1)
        return y
    }
}