avatar

Charlie的博客

学习进步 学习进步 学习进步

  • 首页
  • 后端
  • 前端
  • 移动端
  • 操作系统
Home SwiftUI仿照Apple Music制作全屏过渡动效
文章

SwiftUI仿照Apple Music制作全屏过渡动效

Posted 2024-03-29 Updated 2024-11- 18
By Administrator
8~11 min read

B站视频:https://www.bilibili.com/video/BV19J4m1j7nu
使用SwiftUI制作一个仿照Apple Music局部视图向全局视图过渡的动效,主要实现元素平滑的过渡。

import SwiftUI

struct FullScreenView: View {
    @State var currentFullflag = false
    @State var readyToFull = true
    @State var verticalPosition = 0.0
    let diyAnimation = Animation.spring(response: 0.4, dampingFraction: 0.8, blendDuration: 0)
    var body: some View {
        ZStack {
            Circle()
                .frame(width: 300, height: 300)
                .foregroundColor(.yellow)
                .blur(radius: 80)
                .offset(x: -150, y: 200)
            Circle()
                .frame(width: 300, height: 300)
                .foregroundColor(.pink)
                .blur(radius: 80)
                .offset(x: 150, y: -100)
            VStack {
                if !currentFullflag {
                    Spacer()
                }
                ZStack {
                    Rectangle()
                        .frame(width: .infinity, height: currentFullflag ? .infinity : 100)
                        .background(.ultraThinMaterial)
                        .opacity(0.5)
                        .cornerRadius(currentFullflag ? 20 : 10)
                        .onTapGesture {
                            withAnimation(diyAnimation) {
                                currentFullflag = true
                                readyToFull = false
                            }
                        }
                    HStack {
                        VStack {
                            Rectangle()
                                .frame(width: currentFullflag ? 300 : 80, height: currentFullflag ? 300 : 80)
                                .foregroundColor(.blue)
                                .cornerRadius(currentFullflag ? 20 : 5)
                                .padding(.top, currentFullflag ? 80 : 0)
                            if currentFullflag {
                                Spacer()
                            }
                        }
                        if !currentFullflag {
                            Spacer()
                        }
                    }
                    .padding(.horizontal, 10)
                }
                .offset(y: currentFullflag ? verticalPosition : 0)
                .padding(.bottom, currentFullflag ? 0 : 100)
                .gesture(gestureVertical())
                
            }
            .padding(currentFullflag ? 0 : 10)
        }
        .ignoresSafeArea(.all)
    }
    
    func gestureVertical() -> some Gesture {
        return DragGesture()
            .onChanged { value in
                if !readyToFull {
                    verticalPosition = value.translation.height
                }
                if (readyToFull && !currentFullflag && value.translation.height < -50) {
                    withAnimation(diyAnimation) {
                        currentFullflag = true
                    }
                }
                
            }
            .onEnded { value in
                if readyToFull {
                    readyToFull.toggle()
                } else {
                    if (currentFullflag && value.translation.height > UIScreen.main.bounds.height / 2) {
                        withAnimation(diyAnimation) {
                            readyToFull.toggle()
                            verticalPosition = 0
                            currentFullflag = false
                        }
                    } else {
                        withAnimation(diyAnimation) {
                            verticalPosition = 0
                        }
                    }
                }
                
            }
    }
}

#Preview {
    FullScreenView()
}

移动端
Swift
License:  CC BY 4.0
Share

Further Reading

May 19, 2024

复刻iOS圆环时间选择器

通过SwiftUI复刻iOS圆环时间选择器 Replicating iOS circular time picker with SwiftUI

May 8, 2024

打造可滑动切换的顶部TabBar

在SwiftUI应用中,实现一个带有可滑动切换的顶部TabBar是一个常见的需求。本文将介绍如何使用SwiftUI创建一个具有这种功能的界面。

Apr 27, 2024

SwiftUI与Alamofire结合:表单的POST提交

在本篇博客中,我们将详细介绍如何在SwiftUI中创建一个表单,并使用Alamofire库来处理表单的提交功能。这是一个极好的实例,帮助初学者了解SwiftUI界面构建与网络通信的整合应用。

OLDER

原生JS实现ChatGPT API流式输出

NEWER

SwiftUI开发必学!List实现左滑删除、位置移动!

Recently Updated

  • iptables规则持久化
  • Win11的OOBE阶段启用Administrator账户并跳过账户创建步骤
  • 复刻iOS圆环时间选择器
  • 打造可滑动切换的顶部TabBar
  • Java Lambda表达式:让你的代码像喝了红牛一样飞起来!

Trending Tags

iOS HTML macOS Redis Java JS Swift Windows Linux JDK

Contents

©2025 Charlie的博客. Some rights reserved.

Using the Halo theme Chirpy