这是一个没有套路的前端博主，热衷各种前端向的骚操作，经常想到哪就写到哪，如果有感兴趣的技术和前端效果可以留言～博主看到后会去代替大家踩坑的～
主页: oliver尹的主页
格言: 跌倒了爬起来就好～

《uni-app》uni-app实现疯狂点赞效果（一）实现

一. 前言
二. 阅读对象与难度
三. 项目地址与最终效果
四. 实现
- 4.1 简单布个局
- 4.2 实现上浮动画
- 4.3 加入点击事件
- 4.4 稍微优化一下
五. 小结

一. 前言

现在很多app尤其是直播类、视频类甚至是社交类的，基本都是带有 “点赞功能”，其中有一部分app的点赞功能甚至可以被称为是 “疯狂点赞”，大量的爱心漂浮功能感觉非常有意思，忍不住尝试一下其实现~当然本文的实现仅仅是demo级别的，下一篇我们再进一步做优化，本文先用CSS实现效果再说～
本文演示demo使用的UI组件库为：uView，它可以协助我们快速布局以及使用其一些组件，如对如何在uni-app中安装uView存在疑惑请浏览博文：《《uni-app》npm详解及在uni-app中对npm的支持》
耐心看完，或许所有收获~

二. 阅读对象与难度

本文难度属于：初级，适合有对uni-app有一定了解的小伙伴，通过本文你可以大致了解以下几个知识点：

CSS中的动画animation属性及其用法；
利用Promise的特性实现对延迟时间的操作；

具体内容可以参考以下的思维导图：

三. 项目地址与最终效果

文本代码已上传CSDN上的gitCode，有兴趣的小伙伴可以直接clone，项目地址：https://gitcode.net/zy21131437/uni-app-study
本文最终实现的效果图如下：

四. 实现

4.1 简单布个局

由于我们只是为了探索实现点赞效果，因此template部分，也就是Html部分就简单布局一下了，大致布局的示意图如下：

具体代码如下：

<template><view class="study-container"><!-- 输入 --><view class="study-bottom"><view class="input-container"><u--input class="input-style" placeholder="请输入内容" border="surround"></u--input></view><view class="likes-container" ref="likeContainer"><u-icon class="icon-style" color="#fc5531" name="heart-fill"></u-icon></view></view></view>
</template>

简单的盒模型，通过 view标签 的嵌套实现了简单布局，最终实现的布局效果大致如下：

其中这一段中最主要的是这一段代码：

 <u-icon class="icon-style" color="#fc5531" name="heart-fill"></u-icon>

我们的目的是需要 实现点击后的大量带有上浮动画的爱心，那么这一段代码就是 必须包含点击事件，用于触发点击事件，绑定事件的语法遵循vue的语法

<u-icon class="icon-style" color="#fc5531" name="heart-fill" @click="createLikes"></u-icon><script>
export default {methods: {createLikes() {console.log("触发点击")}}
};
</script>

4.2 实现上浮动画

上浮动画的核心利用的是CSS3的animate实现 的，先来个简单的上浮

.icon-animate-1 {animation: animate-1 1.5s ease-in-out;
}
@keyframes animate-1 {0% {top: 20px;opacity: 1;}100% {top: -140px;opacity: 0;}
}

解释一下这段代码，有一个类名 icon-animate-1 ，这个类名中有一个 animation属性，它是隶属于CSS3中新增的一个属性，主要的作用是执行动画，这里它执行了一个名为 animate-1 的动画，动画持续时间为 1.5s，动画的运动速度为 ease-in-out（动画以低速开始和结束）

接着是 @keyframes animate-1，定义了一个动画，大致意思是开始的时候top的值为20px，当动画结束的时候top的值为-140px，当定义完，把类名加到Icon组件上，它就会实现一个动画，动画大致是这样的效果：

是不是有那么点意思了，既然单个动画实现了，那么接下来就是动态添加了，我们必须在 点击爱心的时候才触发这个动态效果，而不是一加载页面就立刻触发～

4.3 加入点击事件

接入上面的代码，我们在一开始的时候就为爱心的图标加入了 点击事件，如下：

<script>
export default {methods: {createLikes() {console.log("触发点击")}}
};
</script>

为了配合这段代码，我们 需要加入icon组件以及循环生成icon组件的变量，加入组件后的代码如下：

<view class="likes-container" ref="likeContainer"><u-icon v-for="(item, index) in likesData" :class="['icon-default', `${item.animate}`]" :name="item.name" :color="item.color" :key="item.id"></u-icon><u-icon class="icon-style" color="#fc5531" name="heart-fill" @click="createLikes"></u-icon>
</view>
<script>
import _ from 'lodash';
export default {data() {return {likesData: []};},methods: {createLikes() {console.log("触发点击")}}
};
</script>

通过触发点击事件，将生成的参数push进likesData，利用vue的v-for指令循环生成DOM，当DOM被渲染出来之后，立刻触发CSS样式中的 animation动画，大致流程如下：

第一步事件触发已经完成，就是绑定在DOM上的点击事件，接着是 第二步创建配置参数；
先说说配置参数的作用，主要作用其实就两个：

ICON组件上附加的类名，这个是重要的，这个类名直接关系到这个icon组件执行的animation动画究竟是哪个；
ICON组件的颜色，也就是漂浮爱心的颜色，因为按照那些app上的漂浮爱心显示，颜色明显是不一样的，具有一定的随机性，因此这里也要随机显示；

这两个参数都需要 随机显示，因此在写配置函数之前要有一个 生成随机数的函数：

<script>
export default {methods: {randomNum(min, max) {return Math.floor(Math.random() * (max - min)) + min;},getLikeParams(){}}
};
</script>

这里简单的利用了原生的方法，实现了一个 随机数生成的函数，之后利用随机数生成函数可以获得 随机的类名 和颜色：

<script>
export default {methods: {randomNum(min, max) {return Math.floor(Math.random() * (max - min)) + min;},getLikeParams(){const classList = ['icon-animate-1'];const colorList = ['#fc5531', '#fcd030', '#00ff7f'];const className = classList[this.randomNum(0, classList.length)];const colorName = colorList[this.randomNum(0, colorList.length)];return {animate: className,color: colorName,name: 'heart-fill',id: `${new Date().getTime()}-likes`};}}
};
</script>

这样，每一次点击的时候，我们都可以得到一个 相对随机的参数配置；
接着，我们需要 将参数配置push进likesData数组中，v-for执行就会立刻执行循环生成DOM渲染进页面了

<script>
export default {methods: {createLikes() {const params = this.getLikeParams();// push参数this.likesData.push(params);},randomNum(min, max) {return Math.floor(Math.random() * (max - min)) + min;},getLikeParams(){const classList = ['icon-animate-1'];const colorList = ['#fc5531', '#fcd030', '#00ff7f'];const className = classList[this.randomNum(0, classList.length)];const colorName = colorList[this.randomNum(0, colorList.length)];return {animate: className,color: colorName,name: 'heart-fill',id: `${new Date().getTime()}-likes`};}}
};
</script>

试一下效果：

效果还算不错，确实有点开始与目标效果相近了～

4.4 稍微优化一下

略微想一下，立刻发现 可优化的点有三处：

第一处：创建的DOM没有销毁，也就是执行完动画的DOM并没有被销毁，这会导致页面上的DOM随着点击的次数变多而线性的增加，非常不好，影响性能；
第二处：动画太少，我们可以看到app上的点赞效果是非常丰富的，有向左，有向右，有直线，也有弧线，因此这里还得 增加动画的数量使其变得更加美观一点；
第三处：得加一个防抖，减少真的有人或者物理外挂进行疯狂点击，一秒触发N次的那种；

第一点优化
第一处优化就是对于执行完的动画需要及时的销毁，怎么实现呢？其实很简单，我们是用push的方法将配置参数添加进数组的，然后v-for指令自动生成渲染了DOM，那么执行完了之后直接将这个配置删除就完了，由于配置删除，v-for指令自然而言就会将对应的DOM

new Promise(reslove => {const params = this.getLikeParams();this.likesData.push(params);setTimeout(() => {reslove(params);}, 1200);
}).then(res => {this.likesData.shift();
});

通过Promise确保代码是同步执行的，执行完动画后直接使用 shift() 函数删除第一个配置项即可，至于为什么要用Promise，那是因为其实有可能有一组动画类名，那么通过Promise我们可以精准的控制添加类名的时机，算是方便扩展吧；
第二处优化
动态太少，那就加动画嘛，多定义几个动画，然后在随机生成class类名的时候把类名带上：

getLikeParams() {const classList = ['icon-animate-1', 'icon-animate-2', 'icon-animate-3', 'icon-animate-4', 'icon-animate-5'];const colorList = ['#fc5531', '#fcd030', '#00ff7f'];const className = classList[this.randomNum(0, classList.length)];const colorName = colorList[this.randomNum(0, colorList.length)];return {animate: className,color: colorName,name: 'heart-fill',id: `${new Date().getTime()}-likes`};
},

具体类名对应的动画这里就不放了，直接去代码里看即可，增加了类名动画后，再来看一下效果

看上去还不错，但还不够多，表现力还可以更强，但这一篇这里就算了，有兴趣的小伙伴可以自己加一下～
第三处优化
第三处优化主要是没有做防抖处理，那么防抖我们可以直接借助于 lodash中的 throttle函数，用法也非常简单，只需要包裹我们的函数即可：

<script>
import _ from 'lodash';
export default {methods: {createLikes: _.throttle(function() {new Promise(reslove => {const params = this.getLikeParams();this.likesData.push(params);setTimeout(() => {reslove(params);}, 1200);}).then(res => {this.likesData.shift();});}, 50)}
};
</script>

通过设置后，在50毫秒内只能触发一次函数，这样就防止了那种疯狂触发的情况

五. 小结

本文主要分享了一下 通过CSS3的animation属性，实现了一个疯狂点赞的效果，可能有小伙伴问这种用法会有性能上的问题么，我个人感觉吧，由于动画是CSS3实现的其实性能上没有多大影响，但要说这种做法是最合适嘛，那肯定不是，至少canvas实现的效果肯定比CSS3来的好～
下一篇，我们封装一下，毕竟真实项目中我们不可能不考虑复用以及实现的问题，然后动画也不够完美，下一步继续优化～

《uni-app》uni-app实现疯狂点赞效果（一）相关推荐

《uni-app》uni-app实现疯狂点赞效果（二）封装与优化
这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言-博主看到后会去代替大家踩坑的- 主页: oliver尹的主页格言: 跌倒了爬起来就好- ...
抖音APP双击点赞效果实现
相信大部分的同学都有刷抖音的经历吧,那么当你疯狂给小姐姐点赞的时候,有没有想过这个蹦出来的那些疯狂跳动的心心的是怎么实现的呢? 文末有github预览分析: 效果特点: 1.双击屏幕任意位置,就生成 ...
即可app暂停服务？趁现在教你一步一步实现即刻点赞效果
前言前两天在热搜上看到即刻app暂停服务了,正好之前同事问我说实践中仿写即刻的点赞你有思路吗,你不实现一下?看到热搜后,我突然记起来这件事,于是准备开始:实现其实并不难,用到了位移,缩放,渐变动画和 ...
仿抖音 APP 视频切换和点赞效果
code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者:Yun丶Lei 链接:https://www.jianshu.com/p/c43c75303174 声明:本文已 ...
即刻app 点赞效果实现
*即刻点赞效果的实现思路:每次点赞数字的动画效果是根据变化的数字去做动画,例如1001 点赞只有末尾的1变化了所以只有1这个数字会有动画效果 1099 如果点赞就会变成1100 变化了三个数字 09 ...
前腾讯员工离职三个月开发出 app store排名第一应用疯狂猎鸟的总结
前腾讯员工离职三个月开发出 app store排名第一应用疯狂猎鸟的总结十月 18, 2011 by Eugene · 4 Comments 光荣与梦想 - 疯狂猎鸟项目小结半年前我离开了腾讯,加 ...
音乐app、app原型、音乐原型、云音乐、听歌、电台、本地音乐、点赞、收藏、歌单广场、动态、社区、评论、歌词、歌手、主播、视频、云村、下载、翻唱、歌曲播放、订阅、频道、引导页、登录注册、axure原型
音乐app.app原型.音乐原型.云音乐.听歌.电台.本地音乐.点赞.收藏.歌单广场.动态.社区.评论.歌词.歌手.主播.视频.云村.下载.翻唱.歌曲播放.订阅.频道.引导页.登录注册.axure原型 ...
BaseAnimation是基于开源的APP,致力于收集各种动画效果(最新版本1.3)
声明:部分动画来源于网络,本人只是想方便收集在一起,如果不妥请及时与我联系!谢谢为了统一BaseAnimationApp签名,一定要方便以后大家自动更新...防止签名冲突,不能及时更新 1.3源码下 ...
一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下: http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想 ...

《uni-app》uni-app实现疯狂点赞效果（一）