【圣诞节特供】雪花飘落组件 - WXOPEN Club

圣诞节到啦！

在写页面的时候想到以前会出现的雪花飘落

用超简单的方法实现了

代码片段： 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();

再以雪花数组的长度以及当前雪花的键名定义雪花的不同周期（出现→ 飘落 →沉底 → 消失）

<view

wx:for="{{snowArray}}"

wx:if="{{index + 30 > snowOffset}}"

wx:key="index" style="left: {{item}}rpx; {{index < snowOffset ? 'top: 100%' : ''}}"

class="dot"

></view>

肥肠简单的实现方法，想想以前用网页去实现花费好多时间（不过那个时候的版本会随着鼠标飘动）

代码片段没内容