小程序-按住执行动画

name.gif

效果图如上图所示：按住执行一段动画，松开的话中断动画。动画执行完以后发送一个请求。
实现思路：点击开始的时候执行动画，并且定时器三秒以后开始发送请求，松开的时候结束动画，并且清除定时器。动画执行的时间是三秒钟，并且停留在最后一帧。

wxml代码

<view class='wrap {{rotate? "aniwrap" : "" }}'>
      <view class='circle {{rotate? "anileft" : "" }}'></view>
        <view class='circle {{rotate? "aniright" : "" }}'></view>
    </view>

wxss代码

.wrap{
  width: 124rpx;
  height: 124rpx;
  position: absolute;
  top:0;
  left: 0;
  clip: rect(0rpx, 124rpx, 124rpx, 62rpx);
}
.circle {
  width: 120rpx;
  height: 120rpx;
  border: 2rpx solid white;
  border-radius: 50%;
  position: absolute;
  top:0;
  left: 0;
  clip: rect(0rpx, 62rpx, 124rpx, 0rpx);
}
.aniwrap{
  animation-duration: 0.01s;
  animation-delay: 1.5s; 
  animation-name: close-wrapper;
  animation-iteration-count: 1;  
    animation-fill-mode: forwards; 
    animation-timing-function:linear; 
}
.anileft{
  animation-duration: 3s;
    animation-name: left-spin;
  animation-iteration-count: 1;  
    animation-fill-mode: forwards; 
    animation-timing-function:linear; 
}
.aniright{
  animation-duration: 1.5s;
    animation-name: right-spin;
  animation-iteration-count: 1;  
    animation-fill-mode: forwards; 
    animation-timing-function:linear; 
}
@keyframes right-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes left-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

js代码

let Time;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    is_use:0,
    rotate:false
  },
  startFn:function(){
    let _this = this;
    this.setData({ rotate: true });
    Time = setTimeout(function(){
      api.Api("Reward/hexiao",{},function(res){
        if(res.data.s){
          _this.setData({is_use:1})
        }else{
          wx.showToast({ title:res.data.m, icon:'none' })
        }
      })
    },3000)
  },
  startEnd:function(){
    clearTimeout(Time);
    this.setData({ rotate: false });
  }
})