小程序仿soul星球

小程序仿soul星球

wxml代码

下面展示一些 内联代码片。

<view class="content">
  <view style="width: 700rpx;">
    <view>
      <view class="tagBall" catch:touchstart="touchstartscene" catch:touchend="touchendscene" catch:touchmove="touchmovescene">
        <view class="tag" wx:for="{{texts}}" wx:key="index" style="filter:{{liviews[index].filter}};font-size:{{liviews[index].fontSize}};left:{{liviews[index].left}}; opacity: {{liviews[index].opacity}};top:{{liviews[index].top}};z-index: {{liviews[index].zIndex}}">
          <view class="scroll-text-warp">
            <text class="scroll-text">测试</text>
          </view>
          <view class="dot" style="width: {{liviews[index].fontSize}};height: {{liviews[index].fontSize}};"></view>
        </view>
      </view>
    </view>
  </view>
</view>

js代码

const app=getApp()
var _self;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    texts: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    speed: 0.2, //越大越快
    tagEle: [],
    RADIUS: 300,
    fallLength: 400,
    angleX: Math.PI / 400,
    angleY: Math.PI / 400,
    tags: [],
    liviews: [],
    CX: 0,
    CY: 0,
    timer: null,
    clickX: 0,
    clickY: 0,
    ReachBottom: false, //子组件触底
  },

  //生命周期函数--监听页面加载
  onLoad(options) {
    _self=this
  },
  onShow() {
    // var tagEle = document.querySelectorAll(".tag")
    let query = wx.createSelectorQuery()
    query.selectAll('.tag').boundingClientRect()
    query.exec((res) => {  
      var tagEle=res[0]
      let array=[];
      for (var i = 0; i < tagEle.length; i++) {
        array.push({offsetWidth:tagEle[i].width,offsetHeight:tagEle[i].height})
      }
      _self.getTags({tagEle:array,CX:175,CY:175})
    })  
  },
  clearTimer() {
    clearInterval(_self.data.timer);
  },
  getTags(option) {
    _self.data.tagEle=option.tagEle
    _self.data.CX=option.CX
    _self.data.CY=option.CY
    console.log(this.data.tagEle)
    _self.innit();
  },
  rotateX() {
    var cos = Math.cos(_self.data.angleX * _self.data.speed);
    var sin = Math.sin(_self.data.angleX * _self.data.speed);
    for (var i = 0; i < _self.data.tags.length; i++) {
      let t = _self.data.tags[i]
      var y1 = t.y * cos - t.z * sin;
      var z1 = t.z * cos + t.y * sin;
      t.y = y1;
      t.z = z1;
    }
  },
  rotateY() {
    var cos = Math.cos(_self.data.angleY * _self.data.speed);
    var sin = Math.sin(_self.data.angleY * _self.data.speed);
    for (var i = 0; i < _self.data.tags.length; i++) {
      let t = _self.data.tags[i]
      var x1 = t.x * cos - t.z * sin;
      var z1 = t.z * cos + t.x * sin;
      t.x = x1;
      t.z = z1;
    }
  },
  innit() {
    for (var i = 0; i < _self.data.tagEle.length; i++) {
      var a, b;
      var k = (2 * (i + 1) - 1) / _self.data.tagEle.length - 1;
      var a = Math.acos(k);
      var b = a * Math.sqrt(_self.data.tagEle.length * Math.PI);
      // var a = Math.random()*2*Math.PI;
      // var b = Math.random()*2*Math.PI;
      var x = _self.data.RADIUS * Math.sin(a) * Math.cos(b);
      var y = _self.data.RADIUS * Math.sin(a) * Math.sin(b);
      var z = _self.data.RADIUS * Math.cos(a);
      var t = new _self.tag(_self.data.tagEle[i], x / 2, y / 2, z / 2);
      _self.data.tags.push(t);
      _self.move(t, i)
    }
    _self.setData({
      liviews:_self.data.liviews
    })
    _self.animate(_self.data.tags);
    //_self.$forceUpdate()
  },
  tag: function(ele, x, y, z) {
    this.ele = ele;
    this.x = x;
    this.y = y;
    this.z = z;
  },
  move(t, i) {
    var scale = _self.data.fallLength / (_self.data.fallLength - t.z * 1.3);
    var alpha = (t.z + _self.data.RADIUS) / (2 * _self.data.RADIUS);
    _self.data.liviews.push({
      fontSize:10 * scale + 'px',
      opacity: alpha + 0.5,
      filter: 'alpha(opacity = ' + (alpha + 0.1) * 100 + ')',
      zIndex: parseInt(scale * 100),
      left: t.x + _self.data.CX - t.ele.offsetWidth / 2 + "px",
      top: t.y + _self.data.CY - t.ele.offsetHeight / 2 + "px",
      color:'#6555aa'
    });
   
  },
  animate(x) {
    _self = _self;
    _self.data.timer = setInterval(function () {
      _self.rotateX();
      _self.rotateY();
      _self.data.liviews=[]
      _self.data.dotlist=[]
   
      for (var i = 0; i < x.length; i++) {
        _self.move(x[i], i);
      }
      _self.setData({
        liviews:_self.data.liviews
      })
    },10)
  },
  touchstartscene(e) {
    _self.data.clickX=e.touches[0].clientX
    _self.data.clientY=e.touches[0].clientY
    clearInterval(_self.data.timer);
  },
  touchendscene() {
    _self.animate(_self.data.tags)
  },
  touchmovescene(e) {
    console.log(e)
    _self = _self;
    var fx = _self.getDirection( _self.data.clickX,  _self.data.clickY, e.touches[0].clientX, e.touches[0].clientY)
    var x =  _self.data.clickX - e.touches[0].clientX -  _self.data.CX;
    var y =  _self.data.clickY - e.touches[0].clientY -  _self.data.CY;
    if (fx == 1) {
      x = e.touches[0].clientX - _self.data.clickX;
      y = e.touches[0].clientY - _self.data.clickY - _self.data.CY;
    } else if (fx == 2) {
      x = e.touches[0].clientX - _self.data.clickX;
      y = e.touches[0].clientY + _self.data.CY;
    } else if (fx == 3) {
      x = e.touches[0].clientX - _self.data.CX - _self.data.clickX;
      y = e.touches[0].clientY - _self.data.CY;
    } else {
      x = _self.data.clickX - e.touches[0].clientX - _self.data.CX;
      y = _self.data.clickY - e.touches[0].clientY - _self.data.CY;
    }
    _self.data.angleY = x * 0.0001;
    _self.data.angleX = y * 0.0001;
    _self.rotateX();
    _self.rotateY();
    _self.data.liviews=[];
    for (var i = 0; i < _self.data.tags.length; i++) {
      _self.move(_self.data.tags[i], i);
    }
    _self.setData({
      liviews:_self.data.liviews
    })
  },
  getDirection(startx, starty, endx, endy) {
    var angx = endx - startx;
    var angy = endy - starty;
    var result = 0;
    if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
      return result;
    }
    var angle = Math.atan2(angy, angx) * 180 / Math.PI;;
    if (angle >= -135 && angle <= -45) {
      result = 1;
    } else if (angle > 45 && angle < 135) {
      result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    } else if (angle >= -45 && angle <= 45) {
      result = 4;
    }
    return result;
  },
  onHide() {
    _self.clearTimer();
  },

})

wxss代码

page {
  background-color: #000000;
}
.content{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tagBall {
  width: 700rpx;
  height: 700rpx;
  margin: 0 auto;
  position: relative;
}

.tag {
  width: 150rpx;
  position: absolute;
  color: #FFFFFF;
  font-size: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: fontSize 0.1s, left 0.1s ,top 0.1s;
}

.dot {
  width: 40rpx;
  height: 40rpx;
  background-color: #FFFFFF;
  border-radius: 50%;
  margin-top: 10rpx;
  transform: width 0.1s ,height 0.1s;
}
scroll-text-warp{
  overflow: hidden;
  width: auto;
}
.scroll-text {
  white-space: nowrap;
  display: inline-block;
}

创作不易，请各位点个赞