1. Animation 动画的使用
1.1 实现
// 动画
struct AnimationBootcamp: View {
@State var isAnimated: Bool = false
var body: some View {
VStack{
Button("Botton") {
//.repeatCount(5, autoreverses: false) // 循环五次动画
//.repeatForever(autoreverses: true) // 一直循环动画
withAnimation(
Animation
.default
//.repeatForever(autoreverses: true)
) {
isAnimated.toggle()
}
}
Spacer()
RoundedRectangle(cornerRadius: isAnimated ? 50 : 25.0)
.fill(isAnimated ? Color.red : Color.green)
.frame(
width: isAnimated ? 100 : 300,
height:isAnimated ? 100 : 300)
.rotationEffect(Angle(degrees: isAnimated ? 360 : 0))
.offset(y: isAnimated ? 300 :0)// 偏移
//.animation(
// Animation
// .default
// .repeatForever(autoreverses: true))
Spacer()
}
}
}
1.2 效果图:
2. Animation Timing 时长动画的使用
2.1 实现
/// 动画时长
struct AnimationTimingBootcamp: View {
@State var isAnimating: Bool = false
let timing: Double = 1.0
var body: some View {
//animatingView1
animatingView2
}
// 动画二
var animatingView2: some View{
VStack {
Button("Button") {
isAnimating.toggle()
}
RoundedRectangle(cornerRadius: 20)
.frame(width: isAnimating ? 350 : 50, height: 100)
// spring: 弹性
// response: 应答时间 (0.5 为合适值)
// dampingFraction: 反弹值 0-1 (0.6-0.7)为最合适的值
// blendDuration: 持续时长/期间
.animation(.spring(
response: 0.5,
dampingFraction: 0.5,
blendDuration: 1.0))
}
}
// 动画一
var animatingView1: some View{
VStack{
Button("Button") {
isAnimating.toggle()
}
RoundedRectangle(cornerRadius: 20)
.frame(width: isAnimating ? 350 : 50, height: 100)
.animation(Animation.linear(duration: timing)) //linear 一样的速度进行动画
RoundedRectangle(cornerRadius: 20)
.frame(width: isAnimating ? 350 : 50, height: 100)
.animation(Animation.easeIn(duration: timing)) //easeIn 开始缓慢,逐渐加快
RoundedRectangle(cornerRadius: 20)
.frame(width: isAnimating ? 350 : 50, height: 100)
.animation(Animation.easeInOut(duration: timing)) //easeInOut 开始缓慢,然后稍微快一点,缓慢结束
RoundedRectangle(cornerRadius: 20)
.frame(width: isAnimating ? 350 : 50, height: 100)
.animation(Animation.easeOut(duration: timing)) //easeOut 最快的速度开始,然后减速
}
}
}
2.2 效果图:
1) 动画一
2) 动画二
3. Transition 过渡动画的使用
3.1 实现
/// 过渡动画
struct TransitionBootcamp: View {
@State var showView: Bool = false
var body: some View {
ZStack(alignment: .bottom) {
VStack {
Button("Button") {
showView.toggle()
}
Spacer()
}
if showView{
RoundedRectangle(cornerRadius: 30)
.frame(height: UIScreen.main.bounds.height * 0.5)
//.transition(.move(edge: .bottom)) // slide: 滑动 move: 移动
//AnyTransition.opacity.animation(.easeInOut) // 可去掉 .animation(.easeInOut) 使用
.transition(.asymmetric(
insertion: .move(edge: .bottom), // 从底部移进
// .move(edge: .bottom) // 从底部退出
removal: AnyTransition.opacity.animation(.easeInOut) // 淡出
)) // 从底部移除
//.opacity(showView ? 1.0 : 0.0) // opacity : 透明度
.animation(.easeInOut) // 动画 .spring: 弹性
}
}
.ignoresSafeArea(edges: .bottom)
}
}