文档章节

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

java中高端架构师
 java中高端架构师
发布于 2019/01/21 22:17
字数 1181
阅读 3.3K
收藏 19

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

上图的雪花效果还蛮炫酷吧,怎么实现呢?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);//生成雪花的数量

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


还有HTML,一行代码的事情

 

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

.snow_wrap>.snow.snow_$*60`

 

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流
为了学习工作与休闲娱乐互不冲突,现新建圈【码农茶水铺】用于程序员生活,爱好,交友,求职招聘,吐槽等话题交流,希望各位大神工作之余到茶水铺来喝茶聊天。了解更多

© 著作权归作者所有

java中高端架构师
粉丝 42
博文 15
码字总数 23831
作品 0
岳阳
私信 提问
加载中

评论(2)

水牛叔叔
水牛叔叔
很好,收藏,别删了
梦天1261
梦天1261
好玩,我去试一试去
Android:手把手带你深入了解神秘的估值器(TypeEvaluator)

前言 动画的使用 是 开发中常用的知识 可是动画的种类繁多、使用复杂,每当需要 采用自定义动画 实现 复杂的动画效果时,很多开发者就显得束手无策 Android中 补间动画 & 属性动画实现动画的...

Carson_Ho
2019/07/29
0
0
自定义view控件效果实现及实践

项目需求讨论 - Android 自定义 Dialog 实现步骤及封装 根据实际项目需求出发。因为项目中的对话框要配合整个项目的 UI 风格,所以进行自定义 Dialog 的实现步骤,及最后写封装类。来快速实现...

掘金官方
2017/12/11
0
0
Android 平滑和立体翻页效果1

Android 平台提供了一套完整的动画框架,使得开发者可以用它来开发各种动画效果,本文将向读者阐述 Android 的动画框架是如何实现的。任何一个框架都有其优势和局限性,只有明白了其实现原理...

紫地瓜
2012/10/25
3K
4
圣诞节快乐 | 圣诞特效来了!!

圣诞节(Christmas)又称耶诞节、耶稣诞辰,译名为“基督弥撒”,是西方传统节日,起源于基督教,在每年公历12月25日。 作为程序员的我们怎么庆祝这个节日呢?当然是少不了圣诞特效啦~ 卡通圣...

我的卡
2018/12/26
45
0
Android:这份Android核心使用类ValueAnimator学习指南请收好!

前言 属性动画的使用 是 开发中常用的知识 今天,我将讲解属性动画使用中最核心的一个方法类:,希望你们会喜欢 目录 1. 简介 属性动画机制中 最核心的一个类 ValueAnimator anim = ValueAn...

Carson_Ho
2019/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android Binder机制 - interface_cast和asBinder讲解

研究Android底层代码时,尤其是Binder跨进程通信时,经常会发现interface_cast和asBinder,很容易被这两个函数绕晕,下面来讲解一下: interface_cast 下面根据下述ICameraClient例子进行分析...

天王盖地虎626
8分钟前
23
0
杭州哪里有开建材发票

杭州哪里有开建材发票【1.3.7 - 1.0.9.5 - 5.9.1.9.】李生,,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,是And...

143770
12分钟前
22
0
Java @Deprecated Annotation(注解)

在本部分的快速指南中,我们将会查看 Java 的 deprecated API 和如何在程序中使用 @Deprecated 注解。 @Deprecated Annotation(注解) 作为程序的进化和迭代,随着时间的推移,在项目中总会...

honeymoose
30分钟前
27
0
郑州开纸制品发票

郑州开纸制品发票【132 * 50 52 * 90 89】罗生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridg...

zhangyongli
今天
65
0
OSChina 周四乱弹 —— 失业后的阳光太刺眼了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @大又 :分享Jack Stauber的单曲《Fighter》 《Fighter》- Jack Stauber 手机党少年们想听歌,请使劲儿戳(这里) @theLovelyBugfly :笑死我...

小小编辑
今天
146
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部