SwiftUI模块系列 - 已更新33篇
SwiftUI项目 - 已更新3个项目
往期Demo源码下载

技术:SwiftUI、SwiftUI4.0、双击动画、心形动画、动画
运行环境:
SwiftUI4.0 + Xcode14 + MacOS12.6 + iPhone Simulator iPhone 14 Pro Max

概述

使用SwiftUI创建用户双击帖子时的心形动画

详细

一、运行效果

二、项目结构图

三、程序实现 - 过程

思路:

1. 构建列表滚动模块 - 使用ScrollView搭建
2. 构建双击心形动画 HeartLike - 封装起来 包含点击的次数、是否点击、背景动画、是否重置动画、是否烟花动画、动画是否结束、动画是否完成等参数

1.创建一个项目命名为 SpotifyResponvieUI

1.1.引入资源文件和颜色

无

2. 创建一个虚拟文件New Group 命名为 View

3. 创建一个虚拟文件New Group 命名为 Model

4. 创建一个文件New File 选择SwiftUI View类型 命名为Post 删除预览图 并且继承Identifiable 作为模型

5. 创建一个文件New File 选择SwiftUI View类型 命名为Home

主要是: 展示 列表视图 和 双击时的心形烟花释放动画

Code

ContentView - 主窗口

主要是展示主窗口Home

//
//  ContentView.swift
//  LikedAnimation
//
//  Created by 李宇鸿 on 2022/9/27.
//import SwiftUIstruct ContentView: View {var body: some View {Home()}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

Home - 主页

思路

1. 构建列表滚动模块 - 使用ScrollView搭建
2. 构建双击心形动画 HeartLike - 封装起来 包含点击的次数、是否点击、背景动画、是否重置动画、是否烟花动画、动画是否结束、动画是否完成等参数

//
//  Home.swift
//  LikedAnimation
//
//  Created by 李宇鸿 on 2022/9/27.
//import SwiftUIstruct Home: View {// @State var posts : [Post] = [Post(imageName: "Pic1"),Post(imageName: "Pic2"),Post(imageName: "Pic3"),Post(imageName: "Pic4"),Post(imageName: "Pic5"),]var body: some View {NavigationView{ScrollView(.vertical,showsIndicators: false) {VStack(alignment: .leading,spacing:16) {ForEach(posts){post inVStack(alignment: .leading,spacing: 12) {GeometryReader{proxy inImage(post.imageName).resizable().aspectRatio(contentMode: .fill).cornerRadius(15)}.frame(height:280).overlay(HeartLike(isTapped:$posts[getIndex(post: post)].isLiked,taps: 2)).cornerRadius(15)Button  {posts[getIndex(post: post)].isLiked.toggle()} label: {Image(systemName: post.isLiked ? "suit.heart.fill" : "suit.heart").font(.title2).foregroundColor(post.isLiked ? .red : .gray)}}}}.padding()}.navigationTitle("Heart Animation")}}// 获取索引func getIndex(post : Post)-> Int {let index = posts.firstIndex{ currentPost inreturn currentPost.id == post.id} ?? 0return index}
}struct Home_Previews: PreviewProvider {static var previews: some View {ContentView()}
}struct HeartLike:View {// 在弹出的菜单动画……@Binding var isTapped : Bool@State var startAnimation = false@State var bgAnimation = false// 重置Bg……@State var resetBG = false// 烟花动画@State var fireworkAnimation = false// 动画是否结束@State var animationEnded = false// 避免在动画中轻拍…@State var tapComplete = false// 设置多少次点击…var taps : Int = 1var body: some View {// 心如动画……Image(systemName: resetBG ? "suit.heart.fill" : "suit.heart").font(.system(size: 45)).foregroundColor(resetBG ? .red : .gray)// 扩展…….scaleEffect(startAnimation && !resetBG ? 0 : 1).opacity(startAnimation && !animationEnded ? 1 : 0).background(ZStack{CustomShape(radius: resetBG ? 29 : 0).fill(Color.purple).clipShape(Circle())// Fixed Size.frame(width:50,height:50).scaleEffect(bgAnimation ? 2.2 : 0)ZStack{// 烟花的随机颜色let colors : [Color] = [.red,.purple,.green,.yellow,.pink]ForEach(1...6,id:\.self){ index inCircle().fill(colors.randomElement()!).frame(width: 8,height: 8).offset(x: fireworkAnimation ? 64 : 24).rotationEffect(.init(degrees: Double(index) * 60))}ForEach(1...6,id:\.self){ index inCircle().fill(colors.randomElement()!).frame(width: 12,height: 12).offset(x: fireworkAnimation ? 80 : 40).rotationEffect(.init(degrees: Double(index) * 60)).rotationEffect(.init(degrees: -45))}}.opacity(resetBG ? 1 : 0).opacity(animationEnded ? 0 : 1)}).frame(maxWidth: .infinity,maxHeight: .infinity,alignment: .center).contentShape(Rectangle()).onTapGesture(count:taps) {if tapComplete{updateFields(value: false)return}// 动画正在执行 就不执行if startAnimation {return}isTapped = truewithAnimation(.interactiveSpring(response: 0.5,dampingFraction: 0.6,blendDuration: 0.6)){startAnimation = true}// 顺列动画……// 链动画……DispatchQueue.main.asyncAfter(deadline: .now() + 0.25){withAnimation(.interactiveSpring(response: 0.4,dampingFraction: 0.5,blendDuration: 0.5)){bgAnimation = true}DispatchQueue.main.asyncAfter(deadline: .now() + 0.3){withAnimation(.interactiveSpring(response: 0.5,dampingFraction: 0.6,blendDuration: 0.6)){resetBG = true}// 烟花……withAnimation(.spring()) {fireworkAnimation = true}DispatchQueue.main.asyncAfter(deadline: .now() + 0.4){withAnimation(.easeOut(duration: 0.4)) {animationEnded = true}DispatchQueue.main.asyncAfter(deadline: .now() + 0.3){tapComplete = true}}}}}.onChange(of: isTapped) { newValue inif isTapped && !startAnimation {// 设置一切为真…updateFields(value: true)}}}// 更新动画字段func updateFields(value: Bool){startAnimation = valuebgAnimation = valueresetBG = valuefireworkAnimation = valueanimationEnded = valuetapComplete = valueisTapped = value}
}//自定义形状
//从中心重置…
struct CustomShape : Shape {// value...var radius : CGFloat// 动画路径…var animatableData: CGFloat{get {return radius}set {radius = newValue}}// 可动画路径在预览时无效func path(in rect: CGRect) -> Path {return Path {path inpath.move(to: CGPoint(x: 0, y: 0))path.addLine(to: CGPoint(x: 0, y: rect.height))path.addLine(to: CGPoint(x: rect.width, y: rect.height))path.addLine(to: CGPoint(x: rect.width, y: 0))// 增加中心圆……let center = CGPoint(x: rect.width / 2, y: rect.height / 2)path.move(to: center)path.addArc(center: center, radius: radius, startAngle: .zero, endAngle: .init(degrees: 360), clockwise:false)}}
}

Post - 模型

//
//  Post.swift
//  LikedAnimation
//
//  Created by 李宇鸿 on 2022/9/27.
//import SwiftUI// Post Model...
struct Post : Identifiable {var id = UUID().uuidStringvar imageName : Stringvar isLiked : Bool = false}

【SwiftUI模块】0033、SwiftUI创建用户双击帖子时的心形动画相关推荐

1. 纯CSS创建心形翻转动画

   首先,需要创建一个元素,代码如下 <!DOCTYPE html> <html> <meta charset="utf-8"><head&g ...

2. 【SwiftUI模块】0056、SwiftUI创建时尚的电影预订应用程序UI

   SwiftUI模块系列 - 已更新56篇 SwiftUI项目 - 已更新5个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI4.0.电影.电影预定.订票 运行环境: SwiftUI4. ...

3. 【SwiftUI模块】0007、SwiftUI新手指引-新手指示-聚光灯介绍说明

   SwiftUI小功能模块系列 0001.SwiftUI自定义Tabbar动画效果 0002.SwiftUI自定义3D动画导航抽屉效果 0003.SwiftUI搭建瀑布流-交错网格-效果 0004.Sw ...

4. 【SwiftUI模块】0004、SwiftUI-＜探探App＞喜欢手势卡片

   SwiftUI小功能模块系列 0001.SwiftUI自定义Tabbar动画效果 0002.SwiftUI自定义3D动画导航抽屉效果 0003.SwiftUI搭建瀑布流-交错网格-效果 0004.Sw ...

5. python 全栈开发，Day63(子查询,MySQl创建用户和授权,可视化工具Navicat的使用,pymysql模块的使用)...

   昨日内容回顾 外键的变种三种关系:多对一:左表的多 对右表一 成立左边的一 对右表多 不成立foreign key(从表的id) refreences 主表的(id)多对多建立第三张表(foreign ...

6. 【SwiftUI模块】0012、SwiftUI-搭建一个类似微博、网易云、抖音个人页面的头部下拉放大图片效果

   SwiftUI模块系列 - 已更新11篇 SwiftUI项目 - 已更新1个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.下拉放大.tableview粘性头部.头部下拉放大图 ...

7. 【SwiftUI模块】0018、SwiftUI搭建一个类似支付宝中的余额宝余额数字动画效果

   SwiftUI模块系列 - 已更新18篇 SwiftUI项目 - 已更新1个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.支付宝.余额宝.数字动画 运行环境: SwiftUI ...

8. 【SwiftUI模块】0032、SwiftUI搭建一个类似抖音评论模块的半页模式 - 底部抽屉

   SwiftUI模块系列 - 已更新32篇 SwiftUI项目 - 已更新3个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI4.0.抖音评论.半页模式.底部抽屉 运行环境: Swift ...

9. 【SwiftUI模块】0013、SwiftUI搭建-类似蚂蚁财富的基金累计盈亏的走势图

   SwiftUI模块系列 - 已更新13篇 SwiftUI项目 - 已更新1个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.基金.走势图.蚂蚁财富 运行环境: SwiftUI3 ...

最新文章

1. Git + BeyondCompare
2. iOS开发-Xcode入门ObjC程序
3. 日期函数：取过去或者将来多少天的日期
4. STM32 之十四 System Memory、Bootloader
5. Photon多人游戏开发教程
6. JS面试之对象(2)
7. Spring4.x()--Spring的Jdbc事务-零配置
8. 我设想的可扩展结构(插件) (二)
9. C++ 内存分配(new，operator new)详解
10. 设置idea类注释模板
11. STM32F103C8T6全桥逆变电路PWM波生成（基于HAL库）
12. RIM任松伟：黑莓引领企业移动化主题演讲
13. GEE开发之Modis_LST地表温度数据分析
14. 【IoT】 产品设计之α、β、λ测试
15. oracle存储超长文本
16. EVE模拟器如何设置预配
17. 研华板卡1742U--瞬时读值 用 instantAiCtrl1 控件
18. 爽啊，这么多有趣好玩强大的 Python 库
19. 俄罗斯DST收购ICQ；苹果收购芯片提供商（每日关注20100428）
20. 初步分析 flash to html5 convert in Flash CS6

热门文章

1. 部署keepalive+lvs多master节点高可用
2. [BZOJ4763][P3603]雪辉[手写bitset+静态分块]
3. 狂神说Java--Java学习笔记(基础合集)
4. Mac电脑使用：Mac电脑查看本机的IP和公网IP的方法
5. 阿里云使用笔记（一）：从零开始配置阿里云GPU服务器训练深度学习模型
6. 论文笔记：Show, Control and Tell:A Framework for Generating Controllable and Grounded Captions
7. 小程序报错invalid code解决办法
8. 2018科大讯飞Java笔试第三道编程题
9. 入门到放弃之 NVMe-MI --- 协议简介
10. 电商全平台订单管理OMS系统