1.常见的3中动画控制
1.状态驱动 与 animation 修饰符 2. withAnimation
- Binding 状态与 animation
VStack {
Text("第一种")
.foregroundColor(isChange ? .red: .blue)
.animation(.easeIn(duration: 3))
}
Text("第二种")
.foregroundColor(isChange2 ? .red: .blue)
Button("点击更新颜色") {
isChange.toggle()
withAnimation(.easeIn(duration: 2)) {
isChange2.toggle()
}
}
HStack {
if showText {
Text("第三种")
}
Spacer()
Toggle(isOn: $showText.animation(.easeIn(duration: 2))) {
Text("Show/Hide")
}.labelsHidden()
}
@State **var** enableAnimation = **false******
**var** width: CGFloat {
enableAnimation ? 100.0 : 50.0
}
**var** allInOne: **some** View {
VStack {
HStack {
Text("颜色")
Spacer()
Rectangle()
.frame(width: 100, height: 100)
.foregroundColor(enableAnimation ? .red : .yellow)
}
HStack {
Text("大小")
Spacer()
Rectangle()
.frame(width: width, height: width)
.foregroundColor(.red)
Rectangle()
.frame(width: 100, height: 100)
.foregroundColor(.red)
.scaleEffect(enableAnimation ? 1 : 0.5, anchor: UnitPoint(x: 0.5, y: 0.5))
}
HStack {
Text("opacity")
Spacer()
Rectangle()
.frame(width: 50.0, height: 40.0)
.foregroundColor(.red)
.opacity(enableAnimation ? 0.3 : 1)
}
HStack {
Text("Border")
Spacer()
Rectangle()
.frame(width: 50.0, height: 40.0)
.foregroundColor(.red)
.border(Color.blue, width: enableAnimation ? 10 : 1)
Circle()
.fill(.yellow)
.frame(width: 50.0, height: 50)
.overlay(content: {
Circle()
.strokeBorder(.blue, lineWidth: enableAnimation ? 10 : 1)
})
}
HStack {
Text("ConerRadius")
Spacer()
Rectangle()
.frame(width: 50.0, height: 40.0)
.foregroundColor(.red)
.cornerRadius(enableAnimation ? 10 : 20 )
}
HStack {
Text("rotation")
Spacer()
Rectangle()
.frame(width: 50.0, height: 40.0)
.foregroundColor(.red)
.cornerRadius(enableAnimation ? 10 : 20 )
.rotationEffect(enableAnimation ? Angle(degrees: -90) : Angle(degrees: 30) )
}
HStack {
Text("Hidden")
Spacer()
**if** enableAnimation {
Rectangle()
.frame(width: 50.0, height: 40.0)
.foregroundColor(.red)
} **else** {
Rectangle()
.frame(width: 50.0, height: 40.0)
.foregroundColor(.red)
.hidden()
}
}
}
.animation(.easeInOut(duration: 2).repeatForever(), value: enableAnimation)
.drawingGroup()
.onAppear {
enableAnimation = **true******
}
}
