【圣诞节特供】雪花飘落组件 |
您所在的位置：网站首页 › 微信打字雪花小图标 › 【圣诞节特供】雪花飘落组件 |
|
圣诞节到啦！ 在写页面的时候想到以前会出现的雪花飘落 用超简单的方法实现了
代码片段： https://developers.weixin.qq.com/s/2AUMkEmC7cdi 动画的原理是CSS中的 view { transition: all 5s ease-in; } 雪花数量以及出现实际的实现的方法是 在data里面放一个数组，用于存雪花的x轴偏移量。 用setTimeOut的方法递归实现 1~2 秒雪花的增量 let snowInterval = e => { this.data.snowArray.push(Math.random() * 750); this.setData({ snowOffset: this.data.snowArray.length - 2, snowArray: this.data.snowArray }); setTimeout(snowInterval, Math.random() * 1000 + 300); }; snowInterval();再以雪花数组的长度以及当前雪花的键名 定义雪花的不同周期（出现→ 飘落 →沉底 → 消失） 肥肠简单的实现方法，想想以前用网页去实现花费好多时间（ 不过那个时候的版本会随着鼠标飘动 ） |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |