通过事件绑定实现动画效果

前情提要

本例涉及的事件类型有：

1. touchstart，手指触摸动作开始 时触发。
2. touchmove，手指触摸后移动 时触发。
3. touchend，手指触摸动作结束 时触发。

事件触发时，事件处理函数会接收到一个事件对象，该事件对象包含的属性因事件类型不同而有些许差异，其中，雨露均沾的属性有：

• type，事件类型。
• timeStamp，事件生成时的时间戳。
• target，是一个对象，包含如下属性：
  • id，事件源组件的id。
  • dataset，事件源组件上的由data-开头的自定义属性组成的集合。
• currentTarget，是一个对象，包含如下属性：
  • id，当前组件的id。
  • dataset，当前组件上由data-开头的自定义属性组成的集合。
• mark，事件标记数据。

除了以上基础属性，TouchEvent的事件对象还包含如下属性：

• touches，当前停留在屏幕上的触摸点信息的集合。touches是一个数组，每个数组元素是一个Touch对象，表示当前停留在屏幕上的触摸点。Touch对象包含如下属性：
  • identifier，数值类型，是触摸点的标识符。
  • pageX，距离文档左上角的横向距离。
  • pageY，距离文档左上角的纵向距离。
  • clientX，距离页面可视区域左上角的横向距离。
  • clientY，距离页面可视区域左上角的纵向距离。
• changedTouches，当前变化的触摸点信息的数组。

小程序项目

代码涉及的主要文件有：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#971a22",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<view class="indexContainer">
  <view class="header"></view>
  <view class="content" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove" bindtouchend="handleTouchEnd" style="transform: translateY({
        {
        moveDistance}}rpx);transition: {
        {
        transitionSettings}};" >
    <image src="/static/images/arc.png"></image>
  </view>
</view>

pages/index/index.wxss

.indexContainer{
    
  padding: 0 20rpx;
}
.header{
    
  margin-top: 10rpx;
  background: lightskyblue;
  height: 300rpx;
  border-radius: 10rpx;
}
.content{
    
  margin-top: -100rpx;
  height: 600rpx;
  background: #f7f7f7;
  border-bottom-right-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
  position: relative;
}
.content image{
    
  position: absolute;
  top: -40rpx;
  width: 100%;
  height: 40rpx;
}

pages/index/index.js

let startY = 0;
let endY = 0;
let distance = 0;
let MIN_DIS = 0;
let MAX_DIS = 80

Page({
    
  data:{
    
    moveDistance:0,
    transitionSettings:"none"
  },
  handleTouchStart(e){
    
    // console.log("touch start");
    startY = e.touches[0].clientY;
    this.setData({
    
      transitionSettings:"none"
    })
  },
  handleTouchMove(e){
    
    // console.log("touch move");
    endY = e.touches[0].clientY;
    distance = endY - startY;
    if(distance < MIN_DIS) return;
    if(distance > MAX_DIS) distance = MAX_DIS;
    this.setData({
    
      moveDistance:distance
    })
  },
  handleTouchEnd(){
    
    // console.log("touch end");
    this.setData({
    
      moveDistance:0,
      transitionSettings:"transform .5s linear"
    })
  }
})

相关链接

微信小程序的事件绑定