#実現したいこと
SwiftUIで、(他のフレームワークが必要ならそれを用い、)触って動かせる立方体、cubeを表示したいです。
https://medium.com/flawless-app-stories/swiftui-animations-3d-rotation-effect-fb8dd5b86df
このサイトで立方体がグルグル回っているのを拝見し、 これを作りたい!と思いました。
しかし、SwiftUIで立方体の作り方がわからないので、
とりあえずRectangle()一面だけでもドラッグで動かしてみようと思っても思うようにいきませんでした。
##ソースコード
一度以下のコードをコピペして実行してみて欲しいです。
SwiftUI
1import SwiftUI 2 3struct RotaionCubeView: View { 4 @State var viewState: CGSize = .zero 5 var body: some View { 6 ZStack { 7 /*Rectangle() 8 .fill(Color.yellow) 9 .frame(width: 100, height: 100) 10 Rectangle() 11 .fill(Color.blue) 12 .frame(width: 100, height: 100) 13 Rectangle() 14 .fill(Color.green) 15 .frame(width: 100, height: 100) 16 Rectangle() 17 .fill(Color.pink) 18 .frame(width: 100, height: 100) 19 Rectangle() 20 .fill(Color.purple) 21 .frame(width: 100, height: 100) 22 .rotation3DEffect(Angle.init(degrees: 80), axis: (x: 0, y: 1, z: 0)) 23 .offset(x: -50, y: 0)*/ 24 25 Rectangle() 26 .fill(Color.red) 27 .frame(width: 100, height: 100) 28 .rotation3DEffect(Angle.init(degrees: 0), axis: (x: 0, y: 0, z: 0)) 29 .gesture ( 30 DragGesture() 31 .onChanged { value in 32 self.viewState = value.translation 33 } 34 .onEnded { value in 35 self.viewState = .zero 36 } 37 ) 38 .rotation3DEffect(Angle(degrees: Double(-self.viewState.height)), axis: (x: 1, y: 0, z: 0)) 39 .rotation3DEffect(Angle(degrees: Double(self.viewState.width)), axis: (x: 0, y: 1, z: 0)) 40 .animation(.spring()) 41 VStack { 42 Spacer() 43 Text("(self.viewState.height)") 44 .padding() 45 } 46 } 47 } 48} 49 50struct RotaionCubeView_Previews: PreviewProvider { 51 static var previews: some View { 52 RotaionCubeView() 53 } 54} 55
赤いRectangle()をドラッグすると、
伸びるし挙動がバグりまくる...
SwiftUI
1@State var viewState: CGSize = .zero 2 3 .gesture ( 4 DragGesture() 5 .onChanged { value in 6 self.viewState = value.translation 7 } 8 .onEnded { value in 9 self.viewState = .zero 10 } 11 ) 12 .rotation3DEffect(Angle(degrees: Double(-self.viewState.height)), axis: (x: 1, y: 0, z: 0)) 13 .rotation3DEffect(Angle(degrees: Double(self.viewState.width)), axis: (x: 0, y: 1, z: 0)) 14 .animation(.spring())
の作用で、立方体が3D回転するはずなのですが、
rotation3DEffectを2回使用しているせいか、角が伸びます。めっちゃ伸びます。
しかも、viewStateがとても荒ぶります。
どうすれば理想通りに動くでしょうか。
どなたかヒントをください!
よろしくお願いいたします。
##環境
Xcode11.3.1
Swift5
SwiftUI
macOS10.15.3
画像はライブプレビューです。
あなたの回答
tips
プレビュー