如何用transition实现短视频APP的点赞动画

实现不同表情的不断上升

如果使用纯 CSS 实现这一整套动画的话。我们首先需要实现一段无限循环的,大量不同的表情不断向上漂浮的动画

像是这样:

如何用transition实现短视频APP的点赞动画

这个整体还是比较容易实现的,核心原理就是同一个动画,设置不同的 transition-durationtransition-dalay,和一定范围内的旋转角度。

我们首先要实现多个表情,一个 DOM 标签放入一个随机的表情。

我们可以手动一个一个的添加:

<ul class="g-wrap">    <li>?</li>    <li>❤️</li>    <li>?</li>    // ... 随机设置不同的表情符号,共 50 个    <li>...</li></ul>

当然,我个人觉得这样太麻烦。我习惯利用 SASS 的循环函数及随机函数,利用伪元素的 content 去随机生成不同表情。像是这样:

<ul class="g-wrap">    <li></li>    <li></li>    <li></li>    // ... 共50个空标签</ul>
$expression: "?", "?", "❤️", "?", "?", "?", "?", "?", "??", "?", "?", "?", "?", "?";.g-wrap {    position: relative;    width: 50px;    height: 50px;}@for $i from 1 to 51 {    li:nth-child(#{$i}) {        position: absolute;        较好: 0;        left: 0;        width: 50px;        height: 50px;                &::before {            content: nth($expression, random(length($expression)));            position: absolute;            font-size: 50px;        }    }}

这样,我们就能得到 50 个叠加在一起的表情:

因为透明度为 1 的缘故,只能看到最上面的几个表情,实际上这里叠加了 50 个不同的表情。

这里的核心就是 content: nth($expression, random(length($expression))),我们利用了 SASS 的 random 和 length 和 nth 等方法,随机的将 $expression 列表中的表情,添加给了不同的 li 的 before 伪元素的 content 内。

接下来,我们需要让它们动起来

这个简单,添加一个无限的 transform: translate() 动画即可:

@for $i from 1 to 51 {    li:nth-child(#{$i}) {        animation: move 3000ms infinite linear;    }}@keyframes move {    100% {        transform: translate(0, -250px);    }}

效果如下:

如何用transition实现短视频APP的点赞动画

OK,由于 50 个元素都叠加在一起,所以我们需要将动画区分开来,我们给它们添加随机的动画时长,并且,赋予不同的负 transition-delay 值:

@for $i from 1 to 51 {    li:nth-child(#{$i}) {        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;    }}@keyframes move {    100% {        transform: translate(0, -250px);    }}

效果如下:

如何用transition实现短视频APP的点赞动画

效果已经非常接近我们想要的了!这里有一点点的跳跃,需要理解 move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear 这里大段代码:

  • #{random() * 2500 + 1500}ms 生成 1500ms ~ 4000ms 之间的随机数,表示动画的持续时长

  • #{random() * 4000 / -1000}s 生成 -4000ms ~ 0s 之间的随机数,表示负的动画延迟量,这样做的目的是为了让动画提前进行

如果你对负的 transition-delay 的作用还不了解,可以看看我的这篇文章 — 深入浅出 CSS 动画

到这,还是不够随机,我们再通过随机添加一个较小的旋转角度,让整体的效果更加的随机:

@for $i from 1 to 51 {    li:nth-child(#{$i}) {        transform: rotate(#{random() * 80 - 40}deg);        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;    }}@keyframes move {    100% {        transform: rotate(0) translate(0, -250px);    }}

这里 transform: rotate(#{random() * 80 - 40}deg) 的作用就是随机生成 -40deg ~ 40deg 的随机数,产生一个随机的角度。

至此,我们就得到了这样一个效果:

如何用transition实现短视频APP的点赞动画

利用 transition 化腐朽为神奇

到这里。很多同学可能还不明白,明明是点赞一次产生一个表情,为什么需要一次生成这么多不断运动的表情效果呢?

这是因为,由于 CSS 没法直接正面做到点击一次,生成一个表情,所以我们需要换一种思路实现。

如果这些表情一直都是在运动的,只不过不点击的时候,它们的透明度都为 0,我们要做的,就是当我们点击的时候,让它们从 opacity: 0 变到 opacity: 1

要实现这一点,我们需要巧妙的用到 transition

我们以一个表情为例子:

  • 默认它的透明度为 opacity: 0.1

  • 点击的时候,它的透明度瞬间变成 opacity: 1

  • 然后,通过 transition-delayopacity: 1 的状态保持一段时间后

  • 逐渐再消失,变回 opacity: 0.1

看上去有亿点点复杂,代码会更容易理解:

li {    opacity: .1;    transition: 1.5s opacity 0.8s;}li:active {    opacity: 1;    transition: .1s opacity;}

效果如下:

如何用transition实现短视频APP的点赞动画

一定要理解上面的代码!巧妙地利用 transition 在正常状态和 active 状态下的变化,我们实现了这种巧妙的点击效果。

如果我们把初始的 opacity: 0.1 改成 opacity: 0 呢?就会是这样:

如何用transition实现短视频APP的点赞动画

好,我们结合一下上面两个动画:

  • 我们将所有的表情,默认的透明度改为 0.1

  • 被点击的时候,透明度变成 1

  • 透明度在 1 维持一段时间,逐渐消失

代码如下:

@for $i from 1 to 51{    li:nth-child(#{$i}) {        position: absolute;        较好: 0;        left: 0;        width: 50px;        height: 50px;        transform: rotate(#{random() * 80 - 40}deg);        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;        opacity: .1;        transition: 1.5s opacity .8s;                &::before {            content: nth($expression, random(length($expression)));            position: absolute;        }    }        li:active {        opacity: 1;        transition: .1s opacity;    }}@keyframes move {    100% {        transform: rotate(0) translate(0, -250px);    }}

效果如下:

如何用transition实现短视频APP的点赞动画

嘿,是不是有那么点意思了!

好最后一步,我们通过一个点击按钮引导用户点击,并且给与一个点击反馈,每次点击的时候,点赞按钮放大 1.1 倍,同时,我们把默认表情的透明度从 opacity: 0.1 彻底改为 opacity: 0

这样,整个动画的完整的核心代码:

<ul class="g-wrap">    <li></li>    <li></li>    <li></li>    // ... 共50个空标签</ul>
$expression: "?", "?", "❤️", "?", "?", "?", "?", "?", "??", "?", "?", "?", "?", "?";.g-wrap {    position: relative;    width: 50px;    height: 50px;    &::before {        content: "??";        position: absolute;        width: 50px;        height: 50px;        transition: 0.1s;    }    &:active::before {        transform: scale(1.1);    }}@for $i from 1 to 51 {    li:nth-child(#{$i}) {        position: absolute;        width: 50px;        height: 50px;        transform: rotate(#{random() * 80 - 40}deg);        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s cubic-bezier(.46,.53,.51,.62);        opacity: 0;        transition: 1.5s opacity .8s;        &::before {            content: nth($expression, random(length($expression)));            position: absolute;        }    }    li:active {        transition: .1s opacity;        opacity: 1!important;    }}@keyframes move {    100% {        transform: rotate(0) translate(0, -250px);    }}

这里,需要注意的是:

  • 点赞的按钮,通过了父元素 .g-wrap 的伪元素实现,这样的好处是,子元素 li 的 :active 点击事件,是可以冒泡传给父元素的,这样每次子元素被点击,我们都可以放大一次点赞按钮,用于实现点击反馈;

  • 稍微修改一下缓动函数,让整体效果更为均衡合理。

这样,我们就得到了题图一开始的效果,利用纯 CSS 实现的点赞动画:

如何用transition实现短视频APP的点赞动画

感谢各位的阅读,以上就是“如何用transition实现短视频APP的点赞动画”的内容了,经过本文的学习后,相信大家对如何用transition实现短视频APP的点赞动画这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

文章标题:如何用transition实现短视频APP的点赞动画,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/23570

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月8日 上午1:33
下一篇 2022年9月8日 上午1:34

相关推荐

  • 怎么在html页面中调用外部样式

    两种调用方法:1、使用link标签调用,语法“<link href=”外部样式表文件路径” rel=”stylesheet” type=”text/css” />”;2、利用“@import”关键字调用,语法“&lt…

    2022年9月16日
    93300
  • 项目管理体系包括哪些

    项目管理是有效整合资源、高效实现项目目标的一整套独特的管理理念、方法论体系。它包含10大知识领域,5大过程和49个子过程;而要做好项目管理必须具备2大核心技能,以及过程中可能会用到的10个项目管理工具;做好项目管理我们通常要面临7大难点。下面我们将对这些内容进行详细说明。 一、什么是项目管理 官方解…

    2022年3月19日
    1.0K00
  • 中小团队都在用哪些不错的多人协作办公软件

    中小团队都在用哪些不错的多人协作办公软件?使用比较广泛的六大类协作软件包括:项目管理协作沟通软件,典型的有Worktile;研发管理协同软件,主流软件包括PingCode、jira;文档协同软件,主流的有Confluence、gitbook;会议协同软件,典型的有腾讯会议;设计协同软件,比如蓝湖;沟…

    2023年5月10日
    1.2K00
  • JavaScript变量or循环中的var和let怎么使用

    在for循环中使用var声明初始化带来的问题 // 一道经典面试题:var funcs = [];for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log(“My value: ” + i) };}for (var j …

    2022年9月15日
    40700
  • .json文件有什么作用

    “.json”是用来存储简单的数据接口和对象的文件;json是一种轻量级的数据交换格式,基于ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据,用于许多web应用程序来进行数据交换。 本教程操作环境:windows10系统、DELL G3电脑。 .json是什么文件 .…

    2022年9月2日
    88700
  • mysql怎么增加少数索引

    三种增加方法:1、使用“CREATE INDEX”语句增加,语法“CREATE UNIQUE INDEX 索引名 ON 表名(列名列表);”;2、建表时增加,语法“CREATE TABLE 表名(… UNIQUE KEY(列名列表) );”;3、修改表时增加,语法“ALTER TABLE…

    2022年9月22日
    3.3K00
  • 怎么实现APT28样本分析

    1 背景 奇幻熊组织又被人们称为APT28,他是俄罗斯的间谍组织,2019年,奇幻熊组织的活动异常频繁。从今年年初的智囊团入侵事件,到随后的大小攻击,都有APT28的身影。奇幻熊的历史已经非常悠久,2016年,该组织因为入侵美国民主党全国委员会的电子邮件,试图影响美国总统大选而闻名于世。鱼叉式网络钓…

    2022年9月16日
    46000
  • unity发布出来的安卓apk该如何加密

    Unity3D程序的安全问题 代码安全问题 Unity3D 程序的核心程序集文件 Assembly-CSharp.dll 是标准的 .NET 文件格式,附带了方法名、类名、类型定义等丰富的元数据信息,使用 DnSpy 等工具可以轻易地将其反编译和篡改,代码逻辑、类名和方法名等一览无余。代码逻辑一但被…

    2022年9月13日
    97000
  • php判断数组中指定值是不是最后一个元素

    两种判断方法:1、利用end()函数和“===”运算符,获取数组最后一个元素的值,比较该元素值是否为指定值即可,语法“end($arr===”指定值”)”,如果相等则是,反之则不是。2、利用array_pop()函数和“===”运算符,语法“array_pop($arr===…

    2022年9月16日
    66000
  • coreldraw如何填充颜色

    coreldraw填充颜色的方法 1、打开软件选择左侧的矩形工具,在工作区域里画出一个矩形。 2、工具栏里面找到填充工具,选择均匀填充。 3、在均匀填充调色框中选择需要填充的颜色,然后点击“确定”。 4、这样就填充完成了。 关于“coreldraw如何填充颜色”的内容就介绍到这里了,感谢大家的阅读。…

    2022年9月26日
    72300
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部