有任何问题,欢迎站内私信博主交流。
正文开始
- 前言
- 更新功能所有文章汇总
- 一、两个同心球效果实现
- 二、球内进度条、logo、粒子元素实现
- 2.1 球内包含几个元素:
- 2.2 随机粒子生成方法generateRandomPoint
- 2.3 创建多个粒子的方法createParticle
- 三、gsap创建路径动画,实现粒子动画
- 总结
前言
更新功能的实现分为三篇文章来讲解:
1.主进程更新
2.开发调试技巧
3.渲染进程部分。
我在开发过程中,是先开发的主进程主要功能,再完善渲染进程部分的显示。因为当没有前端时,可以写几个简单的标签显示结果,保证主要功能基本完成,再完善前端交互。
效果图如下:
上面有几个简单的交互:
- 打开软件时,页面向主进程通信,查询是否更新
- 发现需要更新,弹出一个更新交互页面,页面显示更新信息和更新操作
- 更新时,点击关闭按钮,会进入后台更新模式,登录进去后,点击左上角的更新标志,会弹出更新页面。
大的需求就是这样三个,至于细节后文再展开叙述,比如跳过版本如何实现,如何保障登录页和登录后,更新的进度是保持一致的……
更新功能所有文章汇总
- electron-updater实现electron全量更新和增量更新——主进程部分
- electron-updater实现electron全量更新和增量更新——注意事项/技巧汇总
- electron-updater实现electron全量更新和增量更新——渲染进程UI部分
- electron-updater实现electron全量更新和增量更新——渲染进程交互部分
一、两个同心球效果实现
在讲解前,我们先整体了解一下前端的文件结构:
- updateprogress.vue是唯一的vue文件
- updateBall.js:和中间的球相关的逻辑
- updateHandle.js:操作按钮相关的逻辑
- store/update.js:更新模块的全局变量
静态页面部分没什么好说的,就是一个遮罩加两个球,还有一些按钮,我的审美并不好,大家可以自行设计。球的立体效果就是靠阴影效果,代码如下:
<div
:style="{ width: ballRadius * 2 + 'px', height: ballRadius * 2 + 'px' }"
class="ball">
</div>
<style scope>
.ball {
border-radius: 50%;
//background: linear-gradient(135deg, #fff, #ddd);
background-color: #fff;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1),
0 0 10px 2px rgba(0, 0, 0, .1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
flex-direction: column;
}
.ball::before {
content: "";
width: 80%;
height: 80%;
border-radius: 50%;
//background: linear-gradient(315deg, #ddd, #fff);
background-color: #fff;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1),
0 0 10px 2px rgba(0, 0, 0, .1);
position: absolute;
}
</style>
类ball是外层的大球,设置的半径ballRadius 为100,伪类:before是小球,大球小球靠阴影效果,塑造立体感。
二、球内进度条、logo、粒子元素实现
2.1 球内包含几个元素:
- logo
- 不规则的粒子
- 进度条
外层的ball采用的flex布局,布局方向是纵向,所以logo通过图片标签直接引入,设置好宽高即可,下面依次写进度条、粒子等元素:
<div :style="{width:ballRadius*2+'px',height:ballRadius*2+'px'}" class="ball">
<img alt="Logo" class="logo" src="/public/img/log-opacity.png">
<div style="display: flex;flex-direction: column;width: 60%">
<Progress :percent="update_info.percent || 0" :stroke-width="5" style="flex-grow: 1;margin-right: 4px">
<div style="width: 100%;display: flex;flex-direction: row;justify-content: center;align-content: center">
<span>{{ update_info.percent || 0 }}%</span>
<span style="color: #1a1a1a;margin-left: 8px">{{ update_info.speed || '0kb' }}</span>
</div>
</Progress>
</div>
<div class="particles">
<!-- 循环渲染粒子-->
<div v-for="(particleItem,index) in particlesList"
:key="index"
:ref="el => setItemRef(index, el)"
:style="{left: particleItem.left+'px',top:particleItem.top+'px',backgroundColor:particleItem.color}"
class="particle">
</div>
</div>
</div>
2.2 随机粒子生成方法generateRandomPoint
重点讲解一下上面的粒子渲染。
首先,粒子的容器是和最大的球重合的,所以采用absolute定位,css代码如下:
.particles {
position: absolute;
width: 100%;
height: 100%;
}
粒子渲染最重要的是随机在圆环位置生成粒子的逻辑,这部分的算法核心其实就是初中数学知识:
- 外球半径(outRadius)-内球半径(radius)=圆环半径
- 圆环半径*随机数+内球半径(radius)=落在圆环内的随机半径
- 落在圆环内的随机半径*角度的cos和sin值,就分别是随机半径终点的坐标
转化为代码就是:
//生成radius外,outRadius内圆环上的坐标
const randomRadius = radius + Math.random() * (outRadius - radius)
const outX = randomRadius * Math.cos(angle)
const outY = randomRadius * Math.sin(angle)
上面的代码就会生成angle角度方向,不同半径的坐标,如果angle角度也是随机的,那么就会生成圆环内随机散布的粒子
const angle = Math.random() * (2 * Math.PI)
const randomRadius = radius + Math.random() * (outRadius - radius)
const outX = randomRadius * Math.cos(angle)
const outY = randomRadius * Math.sin(angle)
然后根据这个算法,我又增加了两种场景,一种是随机粒子是在内球半径上,得到粒子的坐标,思路是一样的,就不再赘述:
//生成半径radius上的坐标
const innerX = Math.random() * radius * Math.cos(angle)
const innerY = Math.random() * radius * Math.sin(angle)
另一种是随机粒子是在内球半径内,也就是粒子随机散布在小球内:
//生成半径radius内的坐标
const innerX = Math.random() * radius * Math.cos(angle)
const innerY = Math.random() * radius * Math.sin(angle)
最终这个方法就是:
function generateRandomPoint(radius, outRadius) {
//根据半径生成随机坐标,radiusArr:半径上的坐标,outRadiusArr:半径外的坐标,innerRadiusArr:半径内的坐标
//outRadiusArr只有存在外环半径outRadius时才会生成
// 生成一个0到2π之间的随机角度
const angle = Math.random() * (2 * Math.PI)
// 极坐标到笛卡尔坐标的转换,生成半径radius上的坐标
const x = radius * Math.cos(angle)
const y = radius * Math.sin(angle)
//生成半径radius内的坐标
const innerX = Math.random() * radius * Math.cos(angle)
const innerY = Math.random() * radius * Math.sin(angle)
//生成radius外,outRadius内的坐标
// debugger
const randomRadius = radius + Math.random() * (outRadius - radius)
const outX = randomRadius * Math.cos(angle)
const outY = randomRadius * Math.sin(angle)
return {
radiusArr: [x, y],
innerRadiusArr: [innerX, innerY],
outRadiusArr: [outX, outY]
}
}
本文的设计是将粒子散布在圆环内,所以只需要返回值的outRadiusArr参数即可。
2.3 创建多个粒子的方法createParticle
通过上面的generateRandomPoint方法,我们可以得到粒子的一个随机坐标。只要我们循环调用该方法,那就会循环得到粒子的不同坐标,代码如下:
function createParticle(num) {
// debugger
// 根据num生成随机粒子
for (let i = 0; i < num; i++) {
const {
outRadiusArr: [outX, outY]
} = generateRandomPoint(70, ballRadius.value)
const particle = {
color: getRandomRGBColor(),
left: 100 + outX,
top: 100 + outY,
}
particlesList.value.push(particle)
}
}
其中的getRandomRGBColor方法是获取随机颜色的方法:
function getRandomRGBColor() {
// 限制绿色和蓝色分量在100到255之间,红色分量在0到100之间
const r = Math.floor(Math.random() * 101) // 0 to 100
const g = Math.floor(Math.random() * 156) + 100 // 100 to 255
const b = Math.floor(Math.random() * 156) + 100 // 100 to 255
return `rgb(${r}, ${g}, ${b})`
}
最终使用vue的v-for将粒子循环渲染到页面。
三、gsap创建路径动画,实现粒子动画
使用gsap插件,可以很方便地实现元素围绕某个路径运动。不仅限于圆弧,还可以是曲线、折线、不规则图形,gsap是flash基于js上的实现,功能十分强大,有兴趣的同学可以查看往期博文,这里不重点阐述概念。
创建动画的方法如下:
function createAnimation(movementRange = 3) {
// 使用GSAP创建动画
particlesList.value.forEach((particle, index) => {
// 使用GSAP创建动画
gsap.to(particleRefs.value[index], {
motionPath: {
path: '#svg',
align: '#svg',
alignOrigin: [Math.random() * 10 - 5, Math.random() * 10 - 5]
},
repeat: -1, // 无限重复
duration: 3 * Math.random() + 2, // 随机持续时间
ease: 'linear', // 线性运动
delay: Math.random() * 2 // 随机延迟
})
})
}
这里有几个小技巧:
- 仔细的同学可以发现,在vue中,粒子的ref变量是通过setItemRef方法实现的
//vue中的代码
<div v-for="(particleItem,index) in particlesList"
:key="index"
:ref="el => setItemRef(index, el)"
:style="{left: particleItem.left+'px',top:particleItem.top+'px',backgroundColor:particleItem.color}"
class="particle">
</div>
//对应的js代码
function setItemRef(index, el) {
if (el) {
// 如果元素存在,则将其存储在对象中
particleRefs.value[index] = el
} else {
// 如果元素不存在(可能是被销毁了),则从对象中删除
delete particleRefs.value[index]
}
}
这个方法最终会得到一个保存粒子ref对象的数组particleRefs。
- gsap动画需要指定动画元素, gsap.to的第一个参数particleRefs.value[index]就是循环得到的动画元素,也就是每一个粒子。
- gsap的基础配置十分简单,这里主要是讲解motionPath参数。这是路径插件的参数:
motionPath: {
path: '#svg',
align: '#svg',
alignOrigin: [Math.random() * 10 - 5, Math.random() * 10 - 5]
},
前面两个参数好理解,就是粒子绕着路径运动,总得先定义路径,svg就是路径的id。alignOrigin是粒子偏移路径的距离,使用随机数,可以让粒子运动效果有杂乱随机的感觉。
4. svg是路径path的id,不是svg标签的id,这个要注意,对应的svg代码如下:
<!-- SVG 圆形元素 -->
<svg style="position: absolute" height="95%" viewBox="-160 -160 320 320" width="95%"
xmlns="http://www.w3.org/2000/svg">
<path id="svg"
d="M 0 160
A 160 160 0 0 1 0 -160
A 160 160 0 0 1 0 160 Z"
fill="transparent" stroke="none"/>
</svg>
构建svg的时候,还要注意原点、是否闭合、起止点等信息,也就是d元素中的数据。如果d属性的路径设置不合理,可能会造成path路径与外部的圆不重合的问题。当然这些一般没人去手输,通过Adobe AI软件、在线svg绘制网站、ai助手等,都可以得到符合要求的svg路径。
对svg不熟悉的同学,要关注viewBox属性,这是svg可以跟随父级容器按照比例增大缩小的关键。
- 启动动画:当用户点击立即更新时,需要做三件事:1)创建200个粒子;2)启动动画;3)检查更新。代码如下:
function startUpdate() {
createParticle(200)
setTimeout(() => {
createAnimation()
myApi.handlePcToUpdate()
}, 100)
}
总结
本文主要是讲解了更新模块的页面样式实现,下一篇文章讲解页面上的交互逻辑实现。
大家如果需要联系博主,或者获取博主各系列文章对应的资源,可以通过私信博主来获取。
有任何前端项目、demo、教程需求,都可以联系博主,博主会视精力更新,免费的羊毛,不薅白不薅!~