我正在参与创作者训练营第5期，  点击了解活动概况。

在本章中，你将学会运用SwiftUI创立一个风筝摇摆动画。

前言

为了更加了解和了解SwiftUI，本系列将从实战角度动身完成100个SwiftUI项目，方便咱们更好地学习和掌握SwiftUI。

这同时也是对自己学习SwiftUI进程的知识整理。

如有错误，以你为准。

项目背景

有一次周末在海滨晃悠，昂首看到好多风筝在天空自在的翱翔，有些风筝一节接着一节在空中摇摆甚是壮观。

忽然脑海里有了些许创意，是不是能够把这个景象运用SwiftUI做一个动画？

说干就干。

项目搭建

首要，创立一个新的SwiftUI项目，命名为MagicAnimation。

1.png

页面款式

首要是图片部分，这里咱们能够运用Apple官方供给的体系图标作为展现的款式，也能够运用导入的图片作为款式设计的元素，示例：

Image(systemName: "heart.circle")
    .font(.system(size: 32))
    .foregroundColor(.purple)

2.png

为了实现翻页切换作用，咱们需求声明一个变量作为切换，示例：

@State var isSwitch:Bool = false

声明好变量isSwitch后，咱们依据isSwitch的状况能够设置切换Image图标图片和图片填充色彩，示例：

Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
    .font(.system(size: 32))
    .foregroundColor(isSwitch ? .red : .purple)

当咱们把isSwitch变成true时，预览作用如下：

3.png

接下来，咱们通过ForEach循环遍历多一些图片，示例：

HStack{
    ForEach(0..<8) { num in
        Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
            .font(.system(size: 32))
            .foregroundColor(isSwitch ? .red : .purple)
    }
}

4.png

上述代码中，咱们运用HStack横向布局和ForEach循环，遍历展现了8个图标图片。

至此，咱们的款式部分就完成了。

交互动画

因为咱们需求运用拖动动画，咱们先声明一个变量来存储拖动的方位，示例：

@State private var dragAmount = CGSize.zero

然后在Image加上一个偏移修饰符，并且增加拖动动画，示例：

HStack {
    ForEach(0 ..< 8) { num in
        Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
            .font(.system(size: 32))
            .foregroundColor(isSwitch ? .red : .purple)
            .offset(self.dragAmount)
    }
}
.gesture(
    DragGesture()
        .onChanged { self.dragAmount = $0.translation }
        .onEnded { _ in
            self.dragAmount = .zero
            self.isSwitch.toggle()
        }
)

5.gif

上述代码中，咱们给Image添加了一个偏移量修饰符offset，偏移方位为dragAmount。

然后给HStack整个横向视图增加拖动动画DragGesture，在拖动时，更改偏移量的方位为拖动的方位，在拖动结束时，咱们将视图复位dragAmount到初始方位zero，并且切换款式状况isSwitch。

好像看起来作用一般，不行高雅。

咱们再加一个交互动画，让几个Image有推迟参差感，示例：

.animation(
     Animation.default.delay(Double(num) / 20), value: dragAmount
)

项目展现

6.gif

本章代码

import SwiftUI
struct ContentView: View {
    @State var isSwitch: Bool = false
    @State private var dragAmount = CGSize.zero
    var body: some View {
        HStack {
            ForEach(0 ..< 8) { num in
                Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
                    .font(.system(size: 32))
                    .foregroundColor(isSwitch ? .red : .purple)
                    .offset(self.dragAmount)
                    .animation(
                        Animation.default.delay(Double(num) / 20), value: dragAmount
                    )
           }
        }
        .gesture(
            DragGesture()
                .onChanged { self.dragAmount = $0.translation }
                .onEnded { _ in
                    self.dragAmount = .zero
                    self.isSwitch.toggle()
                }
        )
    }
}

恭喜你，完成了整个项目的全部内容！

快来动手试试吧。

假如本专栏对你有协助，不妨点赞、谈论、重视～