ui设计动画效果-SwiftUI 5 简介：让视图和过渡动起来

使用SwiftUI时ui设计动画效果，无论效果在哪里，我们都可以单独对视图的变化进行动画处理，或者使视图状态的变化动态化。 SwiftUI 为我们处理组合、级联和可中断动画的复杂性。

在本教程中，我们将在使用 Landmarks 应用程序徒步旅行时为用户的轨迹视图添加动画效果。 我们可以看到使用animation(_:) 装饰器为视图添加动画是多么容易。

启动项目并按照本教程进行操作，或者打开已完成的项目并自行探索代码。

01 为单个视图添加动画

在视图上使用animation(_:) 装饰器时，SwiftUI 会对视图的可动画属性的任何更改进行动画处理。 视图的颜色、透明度、旋转、大小和其他属性都可以设置动画。

第一步

在 HikeView.swift 文件中，打开实时预览并体验显示和隐藏图表。

请务必打开本教程的实时预览，以便您可以试验每个步骤的结果。

第二步

通过添加animation(.easeInOut)来打开按钮的动画。

                        .padding()
                        .animation(.easeInOut)
                }
            }

第三步

添加另一个动画吉祥物设计，使按钮在图表可见时变大。

Animation(_:) 装饰器应用于此视图中包含的所有可动画更改。

                        .imageScale(.large)
                        .rotationEffect(.degrees(showDetail ? 90 : 0))
                        .scaleEffect(showDetail ? 1.5 : 1)
                        .padding()
                        .animation(.easeInOut)

第四步

将动画类型从 escapeInOut 更改为 spring()。

SwiftUI 包括具有预定义或自定义缓动效果的基本动画ui设计动画效果，以及弹性和流体动画。 我们可以调整动画的速度，在动画开始之前设置延迟，或者指定动画重复的次数。

                        .scaleEffect(showDetail ? 1.5 : 1)
                        .padding()
                        .animation(.easeInOut)

第五步

尝试通过在scaleEffect装饰器上方添加另一个动画装饰器来关闭旋转动画。

我们可以多研究一下 SwiftUI，尝试组合不同的动画效果，看看会发生什么。

                        .imageScale(.large)
                        .rotationEffect(.degrees(showDetail ? 90 : 0))
                        .animation(nil)
                        .scaleEffect(showDetail ? 1.5 : 1)
                        .padding()
                        .animation(.spring())

第六步

在继续本教程的下一部分之前，删除刚刚添加的两个动画(_:) 装饰器。

                        .imageScale(.large)
                        .rotationEffect(.degrees(showDetail ? 90 : 0))
                        .scaleEffect(showDetail ? 1.5 : 1)
                        .padding()
                }

02 状态变化的动画效果

现在我们已经学习了如何为各个视图设置动画，是时候添加状态值变化的动画了。

在这里，我们将对用户单击按钮并触发 showDetail 状态转换时发生的所有更改进行动画处理。

第一步

将 showDetail.toggle() 调用嵌套在 withAnimation 函数内。

受 showDetail 影响的视图（显示按钮和 HikeDetail 视图）现在具有动画过渡。

                Button(action: {
                    withAnimation {
                        self.showDetail.toggle()
                    }

现在让我们放慢动画速度，看看 SwiftUI 动画是如何中断的。

第二步

在withAnimation函数中传入持续时间为4秒的基本动画效果。

相关的动画类型可以像animation(_:)装饰器一样传入withAnimation。

                Button(action: {
                    withAnimation(.easeInOut(duration: 4)) {
                        self.showDetail.toggle()
                    }

第三步

尝试在图表动画期间打开和关闭视图。

第四步

在继续下一个教程之前，请删除 withAnimation 函数中的慢速动画。

                Button(action: {
                    withAnimation {
                        self.showDetail.toggle()
                    }

03 自定义视图过渡

默认情况下，视图会以淡入淡出效果过渡到屏幕上或从屏幕上过渡出来。 我们可以使用transition(_:)装饰器来自定义过渡效果。

第一步

在HikeView中为条件判断下可见的HikeDetail视图添加一个transition(_:)装饰器。

现在，图形出现和消失时会滑入和滑出。

            if showDetail {
                HikeDetail(hike: hike)
                    .transition(.slide)
            }
        }

第二步

建议将过渡动画作为 AnyTransition 类型中的静态属性。

这将使我们的代码在扩展自定义转换时更加清晰。 我们可以使用 . 符号来引用自定义过渡动画，其方式与 SwiftUI 中的过渡动画相同。

import SwiftUI
extension AnyTransition {
    static var moveAndFade: AnyTransition {
        AnyTransition.slide
    }
}
struct HikeView: View {
    var hike: Hike
// 省略部分未变更的代码
            if showDetail {
                HikeDetail(hike: hike)
                    .transition(.moveAndFade)
            }

第三步

将过渡动画效果替换为 move(edge:) ，以便图表从同一侧滑入和滑出。

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        AnyTransition.move(edge: .trailing)
    }
}

第四步

使用 asynchronous(insertion:removal:) 装饰器在视图出现和消失时提供不同的过渡效果。

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        let insertion = AnyTransition.move(edge: .trailing)
            .combined(with: .opacity)
        let removal = AnyTransition.scale
            .combined(with: .opacity)
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

04 组合动画形成复杂效果

当我们单击图表下方的三个按钮时ip形象，它会在三个数据集之间切换。 在本节中，我们将使用复合动画为图中的胶囊提供动态的、波纹状的过渡。

第一步

将 showDetail 的默认值更改为 true 并修复 HikeView 在画布中的预览。

这样我们在修改其他文件中的动画代码时仍然可以看到图表。

第二步

在 HikeGraph.swift 文件中，定义一个新的波纹动画以添加到每个生成的胶囊形状，并在其前面添加滑动过渡。

}
extension Animation {
    static func ripple() -> Animation {
        Animation.default
    }
}
struct HikeGraph: View {
    var hike: Hike
// 省略部分代码
                    GraphCapsule(
                        index: index,
                        height: proxy.size.height,
                        range: data[index][keyPath: self.path],
                        overallRange: overallRange)
                    .colorMultiply(self.color)
                        .transition(.slide)
                        .animation(.ripple())

第三步

将动画切换为有弹性的动画，并添加衰减阻尼分数以使胶囊跳跃并逐渐变细。

extension Animation {
    static func ripple() -> Animation {
        Animation.spring(dampingFraction: 0.5)
    }
}

第四步

稍微加快动画速度，以减少每个胶囊条移动到新位置所需的时间。

static func ripple() -> Animation {
        Animation.spring(dampingFraction: 0.5)
            .speed(2)
    }
}

第五步

根据图表中每个胶囊条的位置向动画添加延迟。

extension Animation {
    static func ripple(index: Int) -> Animation {
        Animation.spring(dampingFraction: 0.5)
            .speed(2)
            .delay(0.03 * Double(index))
    }
}
struct HikeGraph: View {
// 省略部分代码
                    GraphCapsule(
                        index: index,
                        height: proxy.size.height,
                        range: data[index][keyPath: self.path],
                        overallRange: overallRange)
                    .colorMultiply(self.color)
                        .transition(.slide)
                        .animation(.ripple(index: index))

第六步

观看自定义动画如何在图表转换时提供连锁反应。