java小程序飘落雪花,圣诞节星星飘落的效果(微信小程序版)

圣诞节快到啦～🎄🎄🎄🎄咱们也试着做做小程序版本的星星✨飘落效果吧

在微信小程序内如何实现雪花飘落，星星飘落的效果呢～

先来个效果图：

1576672109245.gif

一步一步来：

页面内容wxml，先简单切个图吧。

页面样式wxss，因为切片用的不太熟练，图片之间有个2rpx的空隙。

.container {

height: 100%;

box-sizing: border-box;

min-height: 100vh;

}

image {

width: 100%;

display: block;

margin-top: -2rpx; //不会切图造的孽

}

canvas {

width: 100%;

min-height:100vh;

position: fixed;

top: 0;

z-index: 888;

}

重点JS：

//获取应用实例

const app = getApp()

// 存储所有的星星

const stars = []

// 下落的加速度

const G = 0.01

const stime = 60

// 速度上限，避免速度过快

const SPEED_LIMIT_X = 1

const SPEED_LIMIT_Y = 1

const W = wx.getSystemInfoSync().windowWidth

const H = wx.getSystemInfoSync().windowHeight

const starImage = 'https://qiniu-image.qtshe.com/WechatIMG470.png' //星星素材

Page({

onLoad() {

this.setAudioPlay()

},

onShow() {

this.createStar()

},

createStar() {

let starCount = 350 //星星总的数量

let starNum = 0 //当前生成星星数

let deltaTime = 0

let ctx = wx.createCanvasContext('myCanvas')

let requestAnimationFrame = (() => {

return (callback) => {

setTimeout(callback, 1000 / stime)

}

})()

starLoop()

function starLoop() {

requestAnimationFrame(starLoop)

ctx.clearRect(0, 0, W, H)

deltaTime = 20 //每次增加的星星数量

starNum += deltaTime

if (starNum > starCount) {

stars.push(

new Star(Math.random() * W, 0, Math.random() * 5 + 5)

);

starNum %= starCount

}

stars.map((s, i) => { //重复绘制

s.update()

s.draw()

if (s.y >= H) { //大于屏幕高度的就从数组里去掉

stars.splice(i, 1)

}

})

ctx.draw()

}

function Star(x, y, radius) {

this.x = x

this.y = y

this.sx = 0

this.sy = 0

this.deg = 0

this.radius = radius

this.ax = Math.random() < 0.5 ? 0.005 : -0.005

}

Star.prototype.update = function() {

const deltaDeg = Math.random() * 0.6 + 0.2

this.sx += this.ax

if (this.sx >= SPEED_LIMIT_X || this.sx <= -SPEED_LIMIT_X) {

this.ax *= -1

}

if (this.sy < SPEED_LIMIT_Y) {

this.sy += G

}

this.deg += deltaDeg

this.x += this.sx

this.y += this.sy

}

Star.prototype.draw = function() {

const radius = this.radius

ctx.save()

ctx.translate(this.x, this.y)

ctx.rotate(this.deg * Math.PI / 180)

ctx.drawImage(starImage, -radius, -radius * 1.8, radius * 2, radius * 2)

ctx.restore()

}

},

setAudioPlay() {

const adctx = wx.createInnerAudioContext()

adctx.autoplay = true

adctx.loop = true

adctx.src = 'https://dn-qtshe.qbox.me/Jingle%20Bells.mp3'

adctx.onPlay(() => {

console.log('开始播放')

adctx.play()

})

}

})

以上只是简单实现了一个星星飘落的效果，预览的时候需要开启不校验合法域名哦～

目前还有更优的h5版本，使用Three.js实现的，在小程序内使用Three.js对于我来说有点打脑壳，先把效果分享出来吧。圣诞快乐

如果有需要的可以留言，我可以整理下发源码给你。