如何使用less实现随机下雪动画详解


Posted in Javascript onJanuary 02, 2019

前言

元旦在公司撸码,想起圣诞节的摇摇乐项目有段代码挺有意思的,借着空闲的时间把代码抽出来,沉淀下经验。

冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非常紧急,然而小程序对canvas支持不够友好,容易在项目中出现无法预估的兼容性问题 ,马上又否定了这种想法,想了想用javascript来写随机动画成本又高。既不用canvas也不用javascript来实现,最终决定使用css预处理器less来实现随机雪花,less怎么可能实现随机雪花?对于喜欢写css的人来说,这非常有趣。

如何使用less实现随机下雪动画详解

上图的雪花效果还蛮炫酷吧,怎么实现呢?less因为有以下的2个特点,可以尝试使用它来实现我们的场景

1.递归调用

实际上less并没有自带类似javascript的for循环的功能,但less可以用过引导when来实现条件判断,简单的方法也可以让聪明的程序员简单实现递归调用

.snow(@n) when (@n > 0) {

 fn()//生成雪花函数fn()

 .snow((@n - 1));//再次执行函数fn()

}
.snow(60);//执行次数

2.避免编译JavaScript 表达式

雪花需要生成的随机数,我们需要运用javascript表达式嵌入到less代码,同时也要避免javascript表达式被less错误的编译,我们需要了解两个点。

  • 一些 LESS不认识的专有语法,可以在字符串前加上一个 ~,
  • JavaScript 表达式在less 文件中使用,可以通过反引号的方式使用

于是有了如下随机位移、随机时间、随机大小的代码

left: ~"`Math.round(Math.random() * @{windowWidth})`px";
animation: ~"snowani_@{n} `(-Math.random() * 4 + 8).toFixed(2)`s linear infinite";
transform: ~"scale(`(Math.random() * 0.7 + 0.5).toFixed(2)`)";

于是有了如下的Less代码,具体怎么实现请留意详细的代码注释

以下less代码使用构建后可生产一份随机css固定雪花文件,决定了每一个雪花有不同的大小、水平位移、垂直位移、出场位置、出场时间,不同的雪花大小,不同的下落速度,用肉眼看到的雪花就像是随机的,可以在项目上线前尝试多构建几次,得到一份均匀分布在窗口的随机雪花。

* {
 padding: 0;
 margin: 0;
}
html, body {
 height: 100%;
}

//浏览器窗口宽度
@windowWidth: 750;
//雪花
.snow {
 &_wrap{
 position: relative;
 width: ~"@{windowWidth}px";
 height: 100%;
 overflow: hidden;
 background: rgba(14,99,69,1);
 margin: 0 auto;
 }
 //雪花初始化大小
 position: absolute;
 width:20px;
 height: 20px;
 &:after{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width:20px;
 height: 20px;
 background-color:#fff;
 opacity:1;
 border-radius: 100%;
 filter:blur(5px);//此处使用css3滤镜来画雪花
 }
}
//随机雪花函数
.snow(@n) when (@n > 0) {
 .snow_@{n}{
 //水平方向上的位移
 left: ~"`Math.round(Math.random() * @{windowWidth})`px";
 //动画运行时间8~12秒,保证雪花有不同的移动速度
 animation: ~"snowani_@{n} `(-Math.random() * 4 + 8).toFixed(2)`s linear infinite";
 //动画提前出场时间,也就是垂直方向上位移
 animation-delay: ~"`(-Math.random() * 8 + 0.2).toFixed(2)`s";
 &:after{
  //雪花大小随机,0.5~1.2
  transform: ~"scale(`(Math.random() * 0.7 + 0.5).toFixed(2)`)";
 }
 }
 @keyframes ~"snowani_@{n}" {
 0%{
  transform: translateY(0);
 }
 100%{
  //垂直方向上高度,保证雪花有不同的移动速度
  transform: ~"translateY(`Math.round(Math.random() * 200 + 1600)`px)";
 }
 }
 .snow((@n - 1));
}
.snow(60);//生成雪花的数量

把上面的雪花的代码构建后如下:

如何使用less实现随机下雪动画详解

还有HTML,一行代码的事情

在编辑器中安装好emmet或webstorm开启emmet后,输入下面代码按下ctrl+e快捷键即可生成60个不同命名的雪花标签。

.snow_wrap>.snow.snow_$*60

如何使用less实现随机下雪动画详解

软件开发没有银弹,不要让经验固化了我们的思维,相信还有更多更好的实现方式,来提升我们的开发效率。

新年第一弹,新的开始,猪大家元旦快乐,抽中摇摇乐免单,身体健康,大吉大利。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
vue实现购物车加减
May 30 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
详解Vue2 添加对scss的支持
Jan 02 #Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
JS中数据结构之栈
Jan 01 #Javascript
微信小程序自定义导航栏
Dec 31 #Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 #Javascript
JavaScript ES6箭头函数使用指南
Dec 30 #Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 #Javascript
You might like
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
微信小程序实现联动选择器
2019/02/15 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
python列表与元组详解实例
2013/11/01 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python检测数据类型的方法总结
2019/05/20 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python获取时间戳代码实例
2019/09/24 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python 实现按对象传值
2019/12/26 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
美发活动策划书
2014/01/14 职场文书
教师档案管理制度
2014/01/23 职场文书
小学生元旦广播稿
2014/02/21 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
社团活动总结格式
2014/08/29 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS