如何使用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 JSON对象转为字符串的简单实现方法
Nov 18 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
javascript的理解及经典案例分析
May 20 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
vue前端工程的搭建
Mar 31 Vue.js
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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中isset与empty函数的困惑与用法分析
2019/07/05 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
github配置使用指南
2014/11/18 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python3中的json模块使用详解
2018/05/05 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python面试题之列表声明实例分析
2019/07/08 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
python定义具名元组实例操作
2021/02/28 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
职业规划书如何设计?
2014/01/09 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
灰雀教学反思
2014/04/28 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
飞越疯人院观后感
2015/06/09 职场文书
小学主题班会教案
2015/08/17 职场文书
电力安全学习心得体会
2016/01/18 职场文书