微信小程序之动画

微信小程序动画的制作,API是有提供借口的,大概流程就是创建一个animation对象,通过这个对象调用函数进行动画的操作,最后通过export函数到处animationData,与需要进行动画的元素的animation标签进行绑定,即可完成动画的制作。

Page({
  data: {
    animationData: null
  },
  onLoad: function (options) {
    let animation = wx.createAnimation();
    animation.translateX(-100).step()
    this.setData({
      animationData: animation.export()
    })
  },
})
<pre data-language="HTML">```markup
<view
  style='width: 100%; overflow: hidden;white-space:nowrap;'
  animation="{{animationData}}">
  <text wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}">animation example </text>
</view>
<br></br>而我的需求是要通过触摸屏滑动来控制动画,这里我并没有调用小程序的API,而是使用css来完成的,代码如下:

```javascript
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 边框数据
    border: {
      itemHeight: 0, // 边框中一条文字的高度
      adjustment: 8.2, // 高度调整值 单位rpx
      move: 0, // 动画translateY
      moveBase: 0, // translateY 调整值
      data: {
        asideText: 'exampleaside',
        topText: 'example-top',
        length: 12
      }
    },
    // 底部数据
    bottom: {
      move: 0,
      height: 0
    },
    ContentHeight: 0,
    ScreenScale: 1,
    // 触摸事件数据
    touch: {
      startPoint: {},
      lastPoint: {},
      distance: 0
    },
  },
  onLoad: function() {
    wx.getSystemInfo({
      success: res => {
        this.setData({
          ContentHeight: res.windowHeight,
          ScreenScale: res.windowWidth / 750
        })
      },
    })
  },

  /**
   * 触摸事件开始回调
   */
  touchstart(event) {
    if (event.touches.length != 1) {
      return;
    }
    this.data.touch.lastPoint = event.touches[0];
    this.data.touch.startPoint = event.touches[0];
  },

  /**
   * 触摸事件移动回调
   */
  touchmove(event) {
    if (event.touches.length != 1) {
      return;
    }

    let newPoint = event.touches[0];
    let lastPoint = this.data.touch.lastPoint;
    let delta = newPoint.clientY - lastPoint.clientY;
    let distance = this.computeDistance(delta);

    let moveBase = this.data.border.moveBase;
    this.setData({
      'border.move': moveBase - distance.border,
      'bottom.move': distance.bottom,
      'touch.lastPoint': newPoint
    })
  },

  /**
   * 通过Y轴的delta值计算动画的移动的距离值
   * delta 两次touchmove事件Y轴的差值 Py2 - Py1
   */
  computeDistance(delta) {
    let distance = this.data.touch.distance + delta;
    let borderItemHeight = this.data.border.itemHeight;
    let membersHeight = this.data.bottom.height;

    // 判断边界
    if (distance > 0) {
      distance = 0
    } else if (-distance > membersHeight) {
      distance = -membersHeight;
    }

    this.data.touch.distance = distance
    return {
      border: distance % borderItemHeight,
      bottom: distance
    };
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let query = wx.createSelectorQuery();
    query.select('.container .aside .one').boundingClientRect();
    query.select('.container .content .bottom').boundingClientRect();
    query.exec(res => res.length > 0 ? this.initAnimation(res) : console.log(res));
  },

  /**
   * 初始化动画参数
   */
  initAnimation(element) {
    let adjustmentHeight = this.data.border.adjustment * this.data.ScreenScale;
    let borderItemHeight = element[0].height + adjustmentHeight;
    let membersHeight = element[1].height
    this.setData({
      'border.itemHeight': borderItemHeight,
      'border.moveBase': -borderItemHeight * 2,
      'bottom.height': membersHeight
    })
  }
})


<pre data-language="HTML">```markup
<view class='container' style='height:{{ContentHeight}}px'>
  <view class='aside' style="transform: translateY({{border.move}}px);">
    <item wx:for="Array.from({length: border.data.length}, (v, k) => k)" wx:key="{{item}}" class="one">
      {{border.data.asideText}}
    </item>
  </view>
  <view class='content'>
    <view class='top'>{{border.data.topText}}</view>
    <view class='section'
      bindtouchstart='touchstart'
      bindtouchmove='touchmove'>
    </view>
    <view class='bottom'
      bindtouchstart='touchstart'
      bindtouchmove='touchmove'
      style="transform: translateY({{bottom.move}}px);">
      <item wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]}}" wx:key="{{item}}" class='member'>
        <image src='https://taishan.ink/wp-content/uploads/2018/02/mmqrcode1518015700901.jpg'>
          <text>{{index}}</text>
        </image>
      </item>
    </view>
  </view>
  <view class='aside' style="transform: translateY({{border.move}}px);">
    <item wx:for="Array.from({length: border.data.length}, (v, k) => k)" wx:key="{{item}}" class="one">
      {{border.data.asideText}}
    </item>
  </view>
</view>
<br></br>```css
.container {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  font-size: 28rpx
}

/* border style */
.container .aside {
  width: 56rpx;
  transition: transform 20ms step-start 0ms;
  transform-origin: 50% 50% 0px;
}

.container .aside .one {
  writing-mode: vertical-lr;
  direction: ltr;
  position: relative;
  left: 14rpx
}

/* content style of page center */
.container .content {
  width: 638rpx;
}

/* top text style of content */
.container .content .top {
  width: 100%;
  height: 56rpx;
  line-height: 56rpx;
}

/* team member style of content in the bottom */
.container .content .bottom {
  background-color: #df3d48;
  display: flex;
  flex-wrap: wrap;
  padding-top: 26rpx;
  transition: transform 100ms linear 0ms;
  transform-origin: 50% 50% 0px;
}

.container .content .bottom .member {
  display: inline-block;
  margin-bottom: 26rpx;
  width: calc(100% / 7);
  text-align: center;
}

.container .content .bottom .member image {
  position: relative;
  width: 75rpx;
  height: 75rpx;
}

.container .content .bottom .member text {
  position: absolute;
  color: #252119;
  font-size: 20rpx;
  top: 0;
  left: 0;
}

/* main content style */
.container .content .section {
  width: 100%;
  height: 1080rpx;
  position: relative;
}
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注