传统的七夕快到了,作为一个程序猿,最浪漫的礼物当然是自己写的啦!
思来想去也不知道写什么好,在某天在某音上学习时看到点赞的动画作用还不错,那不如就做一个表达爱意的动画吧。
说干就干。
项目建立
首要,创立一个新的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())
不错不错!
赶紧发给喜爱的女生,收一张好人卡先。
假如本专栏对你有帮助,无妨点赞、谈论、关注~
我正在参与「构思开发 投稿大赛」概况请看:构思开发大赛来了!