微信小程序创建动画效果背景——球体闪烁动画效果组件

原创

于 2020-10-26 21:52:57 发布 · 2.2k 阅读

15 ·

CC 4.0 BY-SA版权

根目录下新建文件夹pyp,然后新建组件pyp/animation/animation1/index

图片目录

index.js文件夹中键入代码

// pyp/animation/animation1/index.js
Component({
   
   
  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 : 20
    var numArr = this.data.numArr

    for (var i = 1; i <= num; i++) {
   
   
      var topArr = this.data.topArr
      var leftArr = this.data.leftArr
      var borderArr = this.data.borderArr

      const si = wx.getSystemInfoSync()
      var w = si