如何使用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 相关文章推荐
使用js修改客户端注册表的方法
Aug 09 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
js实现简单的随机点名器
2020/09/17 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python中super函数的用法
2017/11/17 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
网络工程师自荐书范文
2014/04/01 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
通知怎么写?
2019/04/17 职场文书