Achieve animation effect through event binding

Antecedents feed

The types of events involved in this example are ：

1. touchstart, Finger touch action Start Trigger when .
2. touchmove, After touching the fingers Move Trigger when .
3. touchend, Finger touch action end Trigger when .

Event triggered , The event handler function will receive an event object , The attributes contained in the event object vary slightly depending on the type of event , among , The attributes of rain and dew are ：

• type, Event type .
• timeStamp, Time stamp when the event was generated .
• target, It's an object , Contains the following properties ：
  • id, Of the event source component id.
  • dataset, On the event source component by data- A collection of custom properties at the beginning .
• currentTarget, It's an object , Contains the following properties ：
  • id, Of the current component id.
  • dataset, The current component consists of data- A collection of custom properties at the beginning .
• mark, Event marker data .

In addition to the above basic attributes ,TouchEvent The event object of also contains the following properties ：

• touches, A collection of touch point information currently on the screen .touches Is an array , Each array element is a Touch object , Indicates the touch point currently on the screen .Touch Object contains the following properties ：
  • identifier, value type , Is the identifier of the touch point .
  • pageX, Horizontal distance from the upper left corner of the document .
  • pageY, The vertical distance from the upper left corner of the document .
  • clientX, The horizontal distance from the upper left corner of the visible area of the page .
  • clientY, The vertical distance from the upper left corner of the visible area of the page .
• changedTouches, Array of currently changing touchpoint information .

Applet project

The main files involved in the code are ：

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": " home page ",
    "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"
    })
  }
})

Related links

Event binding of wechat applet