评论

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

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

圣诞节到啦!

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

用超简单的方法实现了

   

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



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

点赞 3
收藏
评论

2 个评论

  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2019-12-19

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

    2019-12-19
    赞同
    回复
  • 假装在上海
    假装在上海
    2019-12-16

    代码片段没内容

    2019-12-16
    赞同
    回复 6
    • 子冥
      子冥
      2019-12-16
      用同事的电脑打开有雪花呀
      😱
      ( 还是说雪花不明显 )
      2019-12-16
      回复
    • 假装在上海
      假装在上海
      2019-12-16回复子冥
      就这样黑黢黢的,没有雪花呢
      2019-12-16
      回复
    • 子冥
      子冥
      2019-12-16
      是这样子的
      2019-12-16
      回复
    • 子冥
      子冥
      2019-12-16回复假装在上海
      emmm,好奇怪哦,代码分享应该不会丢代码才对
      2019-12-16
      回复
    • 假装在上海
      假装在上海
      2019-12-16回复子冥
      哈哈  看到了,雪花有点淡,我这屏幕有点看不清
      2019-12-16
      回复
    查看更多(1)
登录 后发表内容