AnyTransition/过渡动画, MatchedGeometryEffect/匹配几何动画效果 的使用

1. AnyTransition 过渡动画效果

1.1 创建过度动画案例 AnyTransitionBootcamp.swift

Swift 复制代码
import SwiftUI

/// 旋转修饰 View
struct RotateViewModifier :ViewModifier{
    let rotation: Double
    
    func body(content: Content) -> some View {
        content
            .rotationEffect(Angle(degrees: rotation))
            .offset(x: rotation != 0 ? UIScreen.main.bounds.width : 0,
                    y: rotation != 0 ? UIScreen.main.bounds.height : 0)
    }
}

// 扩展
extension AnyTransition{
    /// 旋转
    static var rotation: AnyTransition{
        modifier(
            active: RotateViewModifier(rotation: 180),
            identity: RotateViewModifier(rotation: 0))
    }
    
    /// 旋转自定义角度
    static func rotation(rotation: Double) -> AnyTransition{
        modifier(
            active: RotateViewModifier(rotation: rotation),
            identity: RotateViewModifier(rotation: 0))
    }
    
    /// 旋转 不对称方式
    static var rotateOn: AnyTransition{
        asymmetric(
            insertion: .rotation,
            removal: .move(edge: .leading))
    }
}

/// 过渡动画
struct AnyTransitionBootcamp: View {
    @State private var showRectangle: Bool = false
    
    var body: some View {
        VStack {
            Spacer()
            
            if showRectangle {
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.black)
                    .frame(width: 250, height: 350)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                //.transition(.move(edge: .leading))
                //.transition(AnyTransition.scale.animation(.easeInOut))
                //.transition(AnyTransition.rotation.animation(.easeInOut))
                // 旋转
                //.transition(.rotation)
                // 旋转自定义角度
                //.transition(.rotation(rotation: 1080))
                // 不对称旋转
                .transition(.rotateOn)
            }
            
            Spacer()
            Text("Click Me!")
                .withDefaultButtonFormatting()
                .padding(.horizontal, 40)
                .onTapGesture {
                    //duration: 5.0
                    withAnimation(.easeInOut) {
                        showRectangle.toggle()
                    }
                }
        }
    }
}

struct AnyTransitionBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        AnyTransitionBootcamp()
    }
}

1.2 效果图:

2. MatchedGeometryEffect 匹配几何动画效果

2.1 创建匹配几何效果案例,MatchedGeometryEffectBootcamp.swift

Swift 复制代码
import SwiftUI

/// 匹配几何效果
struct MatchedGeometryEffectBootcamp: View {
    /// 是否单击
    @State private var isClicked: Bool = false
    @Namespace private var namespace
    
    var body: some View {
        VStack {
            if !isClicked {
                Circle()
                    .matchedGeometryEffect(id: "rectangle", in: namespace)
                    .frame(width: 100, height: 100)
            }
            Spacer()
            if isClicked {
                Circle()
                    .matchedGeometryEffect(id: "rectangle", in: namespace)
                    .frame(width: 300, height: 200)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.orange)
        .onTapGesture {
            withAnimation(.easeIn(duration: 0.5)) {
                isClicked.toggle()
            }
        }
    }
}

/// 匹配几何效果二
struct MatchedGeometryEffectBootcamp2: View{
    let categories: [String] = ["Home", "Popular", "Saved"]
    @State private var selected: String = "Home"
    @Namespace private var namespace2
    
    var body: some View{
        HStack {
            ForEach(categories, id: \.self) { category in
                ZStack(alignment: .bottom) {
                    if selected == category{
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.red.opacity(0.5))
                            .matchedGeometryEffect(id: "category_background", in: namespace2)
                            .frame(width: 35, height: 2)
                            .offset(y: 10)
                    }
                    
                    Text(category)
                        .foregroundColor(selected == category ? .red : .black)
                }
                .frame(maxWidth: .infinity)
                .frame(height: 55)
                .onTapGesture {
                    withAnimation(.spring()) {
                        selected = category
                    }
                }
            }
        }
        .padding()
    }
}

struct MatchedGeometryEffectBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        MatchedGeometryEffectBootcamp()
        //MatchedGeometryEffectBootcamp2()
    }
}

2.2 效果图:

相关推荐
2501_915921434 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915921435 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
猪哥帅过吴彦祖8 小时前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
东坡肘子10 小时前
高通收购 Arduino:历史的轮回 | 肘子的 Swift 周报 #0106
swiftui·arduino·swift
HarderCoder10 小时前
Swift 基础语法全景(二):可选型、解包与内存安全
swift
打码的猿10 小时前
在Qt中实现SwitchButton(开关按钮)
开发语言·qt·ui
HarderCoder10 小时前
Swift 基础语法全景(三):元组、错误处理与断言
swift
HarderCoder10 小时前
Swift 基础语法全景(一):从变量到类型安全
swiftui·swift
00后程序员张13 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
Digitally20 小时前
如何安全轻松地出售损坏的 iPhone(最新指南)
安全·ios·iphone