首先来一个简单的按钮交互效果:点击按钮,按钮旋转放大,再次点击,回复原状。
struct AnimationView: View {
@State private var animate = false
var body: some View {
VStack {
HStack {
Spacer()
Text("动画测试")
Button(action: {
withAnimation {
self.animate.toggle()
}
}) {
Image(systemName: "chevron.right.circle")
.frame(width: 44, height: 44, alignment: .center)
.rotationEffect(.degrees(animate ? 90 : 0))
.scaleEffect(animate ? 1.5 : 1)
}
Spacer()
}
Spacer()
}
}
}
可以看出比OC和Swift下简洁很多,只需要在Button的action里面指定State属性的切换是withAnimation的,并且在button的内容中关联State属性即可由SwiftUI完成相关的动画逻辑。
动画比较重要的内容有animation和transition,一个是常见的图形动画像形变一类的,一个是转场动画,适用于进场退场的。官方的demo动画定义的结构体没那么小白,这里做一个柱状数据的动画变化来供参考。先定义一个柱状的类:
struct DataCo