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()
                    }
                }
        }
    }
}

在此示例中，MyAnimatableCircle结构体遵循了Animatable协议，并提供了animatableData属性以控制圆的直径。在ContentView中，通过点击手势触发的动画，控制了圆的放大和缩小。

再来看一遍运行效果

The End

原文作者：杨庆

原文链接：http://www.yqblog.cn/2024/04/12/SwiftUI-%E6%89%93%E5%BC%80%E4%B9%A6%E6%9C%AC%E6%95%88%E6%9E%9C%E7%9A%84%E4%B9%A6%E6%9C%AC%E8%A7%86%E5%9B%BE%E5%B0%81%E8%A3%85/

发表日期：April 12th 2024, 6:22:12 pm

更新日期：April 12th 2024, 6:35:26 pm

Previous Post

SwiftUI-TagsView布局Layout

CATALOG

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



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true