--- highlight: github-gist --- 话不多说, 让我们先来看看效果. ![屏幕录制2022-02-06 下午9.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00f79f1284a644d29af7543012a0f326~tplv-k3u1fbpfcp-watermark.image?) # 其他教程首先说说市面上其他教程大部分都是使用**图片制作**这类效果, 个人认为这样缺少了`可扩展性`和`可玩性`. # 文章简介 1. 本文将使用`js`制作带有粒子效果的点赞动效. 2. 本文语法环境为`vue3.2`. # `🖖🖖🖖 让我们开始吧 🖖🖖🖖` ## svg 爱心图片 > 这里之所以选择`svg`图片, 是因为: `svg`可以通过`css`以及`js`**修改图片中的内容**, 比如给`svg`图片的某一部分填充颜色. >> `SVG`是一种可缩放的**矢量**图像文件格式, 它使用`xml`格式的文件来描述图像. 因此可以很方便的嵌入HTML页面中, 并且我们可以通过`css`和`js`控制调整`svg`图片.
[SVG在W3C上的介绍](https://www.w3school.com.cn/svg/svg_intro.asp) 首先我们要会在前端添加图标字体或者图片, 这里我们可以选择使用国内常用的[阿里巴巴图标矢量库](https://www.iconfont.cn/) ### 下载svg格式素材的步骤 1. 按关键词搜索图标 ![截屏2022-02-06 下午10.52.20.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/343a1636eaf4456a981fd6635d202e28~tplv-k3u1fbpfcp-watermark.image?) 2. 找到喜欢的图标点击下载按钮(下载按钮在鼠标悬停后出现) ![截屏2022-02-06 下午10.52.31.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1cc47d9c296741138fef8c562e3c73a9~tplv-k3u1fbpfcp-watermark.image?) 3. 点击 `复制SVG代码` 完成svg图片的下载 ![截屏2022-02-06 下午10.52.39.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fca7df831ad647bb95fe365a4a379d74~tplv-k3u1fbpfcp-watermark.image?) 4. 直接将我们复制的代码粘贴入代码中 ```html ``` ### 学会使用css编辑SVG图片这里简单介绍一下如何使用css编辑`SVG图片` ```html ... ... ``` ```css // 使用class选择器 .mySvg{ // 将svg填充成红色 fill: red; // 给svg添加边框 stroke: $Gray; // 边框颜色 stroke-width: 80px; // 边框粗细 } ``` ## 制作粒子扩散效果 ![屏幕录制2022-02-06 下午8.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9dadb9a2ea5472ab0e9cee10b693713~tplv-k3u1fbpfcp-watermark.image?) 这里我使用了一个轻量级的[js图形动画库](https://mojs.github.io/). 1. 首先我们安装`mo.js` ``` npm install @mojs/core ``` 2. 在页面中引入 ```js // 引入 mojs 模块 import mojs from '@mojs/core'; ``` > 本文使用的版本为 `"@mojs/core": "^1.3.0"` 3. 这里心形外面扩散的效果在 `mo.js` 中叫做 [Burst](https://mojs.github.io/api/modules/burst/)中文含义“爆裂”, 根据官网我们可以完成以下代码的编写. ```js const heart = ref(null); ... new mojs.Burst({ // 爆裂范围 {从多大 : 到多大} radius: {0: 50}, // 动画挂载的父元素, 如果不填默认挂载到 parent: heart.value, // 动画延迟的贝塞尔曲线函数 easing: mojs.easing.bezier(0.1, 1, 0.3, 1), // 动画延迟时间 duration: 1500, // 在动画动之前等待的时间 (这里一般设置150ms方便减少低端机型可能会存在的卡顿) delay: 300, // 扩散的粒子配置 children: { duration: 750, // 粒子大小变换 {从多大 : 到多大} // rand(from, to) rand函数可以帮我们随机出一个区间的值 radius: {0: 'rand(5, 25)'}, // 形状选择, 这里我们选择了 “圆形” shape: 'circle', // 粒子可选的填充色 fill: ['#1abc9c', '#2ecc71', '#00cec9', '#3498db', '#9b59b6', '#fdcb6e', '#f1c40f', '#e67e22', '#e74c3c', '#e84393'] }, // 透明度 opacity: 0.6, // 生成的粒子数量 count: 10, onStart(){ // 动画触发前的钩子函数 }, onComplete(){ // 动画完成后的钩子函数 } }).play(); ``` `这里需要注意的是, 最后需要调用 .play() 方法才能使动画动起来` ![屏幕录制2022-02-06 下午11.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50ff6645157e4b898bad8bd8fb30a7f3~tplv-k3u1fbpfcp-watermark.image?) `mojs`给我们提供了很多形状动画效果, 甚至可以控制动画**播放的进度**, 这里不一一介绍, 如果各位大佬有问题可以在评论区讨论. ## 制作红星外的`红晕` ![屏幕录制2022-02-06 下午11 (1).gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5be53cc9851845139ddd75a41b9a91b6~tplv-k3u1fbpfcp-watermark.image?) 这里其实是绘制了一个`空心`圆形 ```js const heart_icon = ref(null); ... new mojs.Transit({ // 动画挂载的父元素, 如果不填默认挂载到 parent: heart.value, // 动画延迟时间 duration: 750, // 图形的类型, 这里选择圆形 type: 'circle', // 半径 {从多大 : 到多大} radius: { 0: 20 }, // 填充透明色 fill: 'transparent', // 边框颜色 stroke: '#E05B5B', // 边框粗细 {从多粗 : 到多粗} strokeWidth: { 20: 0 }, // 透明度 opacity: 0.6, // 动画延迟的贝塞尔曲线函数 easing: mojs.easing.bezier(0, 1, 0.5, 1) }) ``` ## 制作点赞状态锁这里的锁主要是用来预防频繁的播放动画, `只有在未点赞的状态过渡到点赞状态才需要播放动画`. ```html ``` ## mojs 中的时间线 mojs中的`Timeline`对象主要是用于处理同一时间需要`同时播放`的动画. ```js // 红晕 let aperture = new mojs.Transit({...}) // 粒子扩散 let burst = new mojs.Burst({...}) // 爱心弹跳效果 let bounce = new mojs.Tween({...}) // 添加动画到同一时间线播放 new mojs.Timeline().add(burst, aperture, bounce).play(); ``` ## 加上亿点细节后就做好啦 ![屏幕录制2022-02-06 下午8.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec6676886ec145b09ae1a2b9756773d0~tplv-k3u1fbpfcp-watermark.image?) # 全部源码 ```html ``` # `可能会出现的问题 (持续更新)` ### 1. 使`ref`定位元素配置 `parent: heart.value`可能会出现 **undefined** , 在 `onMounted` 中创建动画即可. ### 2.如果您想在IE11甚至更老的浏览上使用mo.js, 试试使用 `npm i @mojs/core@0.288.2`这个版本. > 这条测试由掘金用户 [行动派_](https://juejin.cn/user/3913917126681309) 提供, 非常感谢大佬的学术交流. # 您的点赞是我更文的最大动力, 点赞数越多就会更有动力更新 🤣🤣🤣.