传统的七夕快到了，作为一个程序猿，最浪漫的礼物当然是自己写的啦！
思来想去也不知道写什么好，在某天在某音上学习时看到点赞的动画作用还不错，那不如就做一个表达爱意的动画吧。
说干就干。
项目建立
首要，创立一个新的SwiftUI项目，命名为LoveAnimation。
逻辑剖析
咱们先剖析下整个点赞作用的逻辑，当咱们点击“白色爱心”时，会冒出许多“赤色爱心”出来，而且呈现的作用是呈现后向上随机散开后消失。
假如咱们需求完结这个作用，那么无妨想象下完结进程，先有一个“白色爱心”，然后运用ZStack层叠视图掩盖一层“赤色爱心”，当点击“白色爱心”时触发交互动画，“赤色爱心”在呈现时添加交互作用，完结向上随机散开后消失。
页面款式
页面款式部分，咱们能够创立两个心形视图。示例：
struct ContentView: View {
@State var loveCount = 0
func TapAction() {
loveCount += 1
}
var body: some View {
ZStack {
Color.black.ignoresSafeArea()
VStack(alignment: .center, spacing: 40) {
ZStack {
Image(systemName: "heart.fill")
.resizable()
.foregroundColor(.white)
.frame(width: 120, height: 120)
.padding()
.onTapGesture {
TapAction()
}
ForEach(0 ..< loveCount, id: \.self) { _ in
Image(systemName: "heart.fill")
.resizable()
.frame(width: 120, height: 120)
.padding()
}
}
Text("我喜爱你")
.font(.largeTitle)
.foregroundColor(.white)
}
}
}
}
上述代码中，咱们声明了一个变量loveCount来存储心形的数量，然后界说了一个办法TapAction，当咱们点击的时候，loveCount心形数量添加。
款式部分咱们将背景变成黑色，然后制作了一个白色的心形，再运用ZStack包裹了一个赤色的心形，当白色的心形点击时，调用TapAction办法。
初步的款式就完结了。
动画逻辑
页面比较简单，咱们接下来完结动画逻辑部分。
import SwiftUI
struct LoveGeometryEffect : GeometryEffect {
var time : Double
var speed = Double.random(in: 100 ... 200)
var xDirection = Double.random(in:-0.1 ... 0.1)
var yDirection = Double.random(in: -Double.pi ...0)
var animatableData: Double {
get { time }
set { time = newValue }
}
func effectValue(size: CGSize) -> ProjectionTransform {
let xTranslation = speed * xDirection
let yTranslation = speed * sin(yDirection) * time
let affineTranslation =CGAffineTransform(translationX: xTranslation, y: yTranslation)
return ProjectionTransform(affineTranslation)
}
}
上述代码中，咱们创立了一个爱心动画LoveGeometryEffect，它遵循GeometryEffect协议。
咱们首要声明了4个变量，分别是时刻time、速度speed、X轴呈现的方位xDirection，Y轴呈现的方位yDirection。
其间，speed、xDirection、yDirection都运用随机数，这样咱们就能完结线性呈现的作用，不至于那么死板。
然后运用get、set特点，在取得time初始值时，调用了get特点计算出的新值。
最后咱们界说了一个办法effectValue返回一个ProjectionTransform投影转化作用，来完结赤色爱心的移动作用。
视图润饰符
有了交互动画逻辑后，咱们能够创立一个视图润饰符，用于之后润饰咱们的赤色爱心视图。示例：
import SwiftUI
struct LoveTapModifier: ViewModifier {
@State var time = 0.0
let duration = 1.0
func body(content: Content) -> some View {
ZStack {
content
.foregroundColor(.red)
.modifier(LoveGeometryEffect(time: time))
.opacity(time == 1 ? 0 : 1)
}
.onAppear {
withAnimation (.easeOut(duration: duration)) {
self.time = duration
}
}
}
}
上述代码中，咱们创立了一个视图润饰LoveTapModifier，它的内容包含设置视图的填充色为赤色，并运用之前创立好的LoveGeometryEffect动画进行润饰。
为了让赤色爱心呈现后跟随时刻逐步消失，咱们运用opacity润饰符，让视图跟随时刻渐渐隐藏。
作用呈现
完结后，咱们将LoveTapModifier润饰符作用在赤色心形视图上。示例：
.modifier(LoveTapModifier())
不错不错！
赶紧发给喜爱的女生，收一张好人卡先。
假如本专栏对你有帮助，无妨点赞、谈论、关注～
我正在参与「构思开发 投稿大赛」概况请看：构思开发大赛来了！
