如何使用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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
js 函数的副作用分析
Aug 23 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vuex入门最详细整理
Mar 04 Javascript
js实现小星星游戏
Mar 23 Javascript
JavaScript undefined及null区别实例解析
Jul 21 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的正则处理函数总结分析
2008/06/20 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
Javascript注入技巧
2007/06/22 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python requests库的使用
2021/01/06 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
What is EJB
2016/07/22 面试题
成功的餐厅经营创业计划书
2014/01/15 职场文书
党建工作整改措施
2014/10/28 职场文书
教师个人年终总结
2015/02/11 职场文书
新闻稿怎么写
2015/07/18 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android