SwiftUI-打开书本效果的书本视图封装

iOS SwiftUI

字数统计: 515阅读时长: 1 min

 2024/04/12   Share

SwiftUI - 封装打开书本效果的书本视图?

目标

外部可传递一个配置信息（例如：书本宽高, 书本圆角, 书本阴影, 书本打开进度, 书本翻页分割线颜色）
外部自定义封面、打开内部（左侧、右侧）
打开效果（动画平滑）

实现预期效果

主逻辑代码

书本视图全部代码.png

外部如何使用的？

外部使用定义所需视图

其他信息

封装提供给外部的接口

封装所需头部信息以及Config

配置信息如下

封装书本视图需要的配置信息

有哪些新东西？

Animatable协议作用

Animatable协议

在SwiftUI中，Animatable是一个协议，用于表示可以通过动画进行过渡的值类型。通过采用Animatable协议，您可以定义自定义视图属性，这些属性可以通过动画进行平滑过渡，以实现更具吸引力和生动的用户界面。

当您的自定义视图需要支持动画效果时，可以通过遵循Animatable协议来实现。该协议要求您提供一个animatableData属性，该属性表示动画可以影响的数据。animatableData的类型可以是任何可以插值的类型，例如CGFloat、CGSize、CGRect等。

当您更改了animatableData属性时，SwiftUI会自动调用animatableData的setter，并使用Core Animation将新旧值之间的动画进行插值。这样，您就可以在自定义视图中使用SwiftUI的动画系统来实现平滑的效果。

以下是一个简单的示例，演示了如何在SwiftUI中使用Animatable协议：

import SwiftUI

struct MyAnimatableCircle: View {
    // 实现 Animatable 协议
    var animatableData: CGFloat {
        get { diameter }
        set { diameter = newValue }
    }
    
    // 动画可以影响的属性
    var diameter: CGFloat = 50
    
    var body: some View {
        Circle()
            .frame(width: diameter, height: diameter)
    }
}

struct ContentView: View {
    @State private var isExpanded = false
    
    var body: some View {
        VStack {
            MyAnimatableCircle()
                .scaleEffect(isExpanded ? 2 : 1)
                .animation(.easeInOut(duration: 1))
                .onTapGesture {
                    withAnimation {
                        isExpanded.toggle()
                    }
                }
        }
    }
}