传统的七夕快到了,作为一个程序猿,最浪漫的礼物当然是自己写的啦!

思来想去也不知道写什么好,在某天在某音上学习时看到点赞动画作用还不错,那不如就做一个表达爱意动画吧。

说干就干。

项目建立

首要,创立一个新的SwiftUI项目,命名为LoveAnimation

七夕快到了,用SwiftUI做一个表达爱意的心形动画

逻辑剖析

咱们先剖析下整个点赞作用的逻辑,当咱们点击“白色爱心”时,会冒出许多“赤色爱心”出来,而且呈现的作用是呈现后向上随机散开后消失

假如咱们需求完结这个作用,那么无妨想象下完结进程,先有一个“白色爱心”,然后运用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)
}
}
}
}

七夕快到了,用SwiftUI做一个表达爱意的心形动画

上述代码中,咱们声明了一个变量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)
}
}

七夕快到了,用SwiftUI做一个表达爱意的心形动画

上述代码中,咱们创立了一个爱心动画LoveGeometryEffect,它遵循GeometryEffect协议。

咱们首要声明了4个变量,分别是时刻time速度speedX轴呈现的方位xDirectionY轴呈现的方位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
}
}
}
}

七夕快到了,用SwiftUI做一个表达爱意的心形动画

上述代码中,咱们创立了一个视图润饰LoveTapModifier,它的内容包含设置视图的填充色赤色,并运用之前创立好的LoveGeometryEffect动画进行润饰。

为了让赤色爱心呈现后跟随时刻逐步消失,咱们运用opacity润饰符,让视图跟随时刻渐渐隐藏

作用呈现

完结后,咱们将LoveTapModifier润饰符作用在赤色心形视图上。示例:

.modifier(LoveTapModifier())

七夕快到了,用SwiftUI做一个表达爱意的心形动画

七夕快到了,用SwiftUI做一个表达爱意的心形动画

不错不错!

赶紧发给喜爱的女生,收一张好人卡先。

假如本专栏对你有帮助,无妨点赞、谈论、关注~

我正在参与「构思开发 投稿大赛」概况请看:构思开发大赛来了!