D9a55e3407a8f9422029dd34a220d997
SwiftUI动画之超酷3D旋转效果rotation3DEffect(教程含源码)

实战需求

SwiftUI动画之超酷3D旋转效果

SwiftUI有很多新功能,实现方式最简单。在本教程中,您将学习如何使用SwiftUI添加花哨的3D动画。

本文价值与收获

看完本文后,您将能够作出下面的界面

SwiftUI动画之超酷3D旋转效果

SwiftUI动画之超酷3D旋转效果

Jietu20210718-073238-HD.gif

Jietu20210718-073238-HD.gif


看完本文您将掌握的技能

rotation3DEffect

rotation3DEffect()修饰符在3D中提供旋转视图的输出。
此修饰符有两个参数:
角度:用于以指定角度/度旋转视图
轴:X轴、Y轴和Z轴执行旋转。
例如:

Text(“SwiftUI Animations”)
.rotation3DEffect(.degrees(45), axis: (x: 1, y: 0, z: 0))

让我们用动画来做吧

现在,我们将创建一个具有3D效果旋转视图的按钮。

Button("Animate..!") {
     withAnimation {
         self.degrees += 360
     }
}
.padding(20)
.background(Color.blue.opacity(0.8))
.foregroundColor(Color.white)
.rotation3DEffect(.degrees(degrees), axis: (x: 1, y: 1, z: 1))

在这里,度变量被定义为@State,因此当该值发生变化时,它会自动执行3D旋转效果。

top Created with Sketch.