评论

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

2019-12-16
1345浏览
1评论

超简单的雪花飘落！简单为生活加点情调

圣诞节到啦！

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

用超简单的方法实现了

   

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



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

点赞 4
收藏
评论

1 个评论

  • TNT
    TNT
    2019-12-19

    https://test-m.qtshe.com/act/merryChrismas

    2019-12-19
    赞同
    回复
请 登录 后发表内容
作者介绍

文章标签
简单组件圣诞节