根目录下新建文件夹pyp,然后新建组件pyp/animation/animation1/index
index.js文件夹中键入代码
// pyp/animation/animation1/index.jsComponent({properties: {num: {// 球体数量type: Number,value: 20}},data: {topArr: {}, // 顶部定位数值数组leftArr: {}, // 左侧定位数值数组numArr: [], // 数组循环所需要的值animationArr: {}, // 动画名称数组borderArr: {}, // 球体直径数组num: 20, // 球体数量intTimeArr: [] // 定时器名称数组},attached: function () {// 渲染球体数量、球体直径、球体初始位置等基础参数var num = this.data.num <= 20 ? this.data.num : 20var numArr = this.data.numArrfor (var i = 1; i <= num; i++) {var topArr = this.data.topArrvar leftArr = this.data.leftArrvar borderArr = this.data.borderArrconst si = wx.getSystemInfoSync()var w = si.windowWidthvar h = si.windowHeightvar top = Math.round(Math.random() * h * 1.8)var left = Math.round(Math.random() * w * 1.8)var border = Math.round(Math.random() * 150)topArr["top" + i] = topleftArr["left" + i] = leftborderArr["border" + i] = bordernumArr.push(i)this.setData({topArr: topArr,leftArr: leftArr,w: w,h: h,borderArr: borderArr,numArr:numArr})}},ready: async function (options) {// 渲染动画效果var num = this.data.num <= 20 ? this.data.num : 20for (var i = 1; i <= num; i++) {await this.setInter(i)}},detached: function () {// 离开页面时销毁定时信息var intTimeArr = this.data.intTimeArrintTimeArr.forEach(v => clearInterval(v))},methods: {async setInter(i) {var animationData = "animationData" + i // 动画名称var time = 1000 + i * 100 // 动画与动画之间的间隔// 创建动画this.animation = wx.createAnimation({duration: time,timingFunction: 'linear'})var next = "true"var intTimeArr = this.data.intTimeArr// 创建定时动画intTimeArr.push(setInterval(function () {if (next) {var x = Math.round(Math.random() * 3) // 随机球体半径this.animation.scale(x, x).opacity(0).step() // 动画效果next = !next} else {this.animation.scale(0, 0).opacity(0.9).step()next = !next}var animationArr = this.data.animationArr // 存储动画名称animationArr[animationData] = this.animation.export() // 动画刷新var topArr = this.data.topArrvar leftArr = this.data.leftArrtopArr['top' + i] = Math.round(Math.random() * this.data.h * 1.8) // 随机下一次动画位置leftArr['left' + i] = Math.round(Math.random() * this.data.w * 1.8) // 随机下一次动画位置this.setData({animationArr: animationArr,topArr: topArr,leftArr: leftArr})}.bind(this), time))this.setData({intTimeArr: intTimeArr})}}})
index.wxml中键入代码
<!--pyp/animation/animation1/index.wxml--><view class="bg_view" ></view><view wx:for="{{numArr}}" wx:key="unique"><view class="border_view" style="width:{{borderArr['border' + index]}}rpx;height:{{borderArr['border' + index]}}rpx;border-radius:150rpx;background: radial-gradient(#2de6e6, #9511ec, pink);opacity:0.3969;position: absolute; position: absolute;top: {{topArr['top' + item]}}rpx;left: {{leftArr['left' + item]}}rpx; " animation="{{animationArr['animationData' + item]}}" ></view></view>
index.wxss文件中键入代码
/* pyp/animation/animation1/index.wxss */.bg_view{width:100%;height:100vh;background: linear-gradient(45deg, #343702 0%, #1f5869 20%, #4f308a 30%, #18677a 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);}
效果图
需要用到组件的文件中，在json文件中引入组件
{"usingComponents": {"p-animation1": "../../../pyp/animation/animation1/index"}}
需要用到的组件的文件中，在wxml文件中引入组件
<p-animation1 num="20"/>
