小程序——添加动画，让图标原地旋转

最新推荐文章于 2023-07-11 10:48:07 发布

今天搬砖了么

最新推荐文章于 2023-07-11 10:48:07 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：小程序

本文链接：https://blog.csdn.net/qq_43983650/article/details/112340798

版权

前端专栏收录该内容

52 篇文章 2 订阅

订阅专栏

在这里插入图片描述
让更新资料旁边的图标在原地进行旋转

WXML文件

<view class="update" bindtap="upDate">
							更新资料
   <image class=" " animation='{{animationData}}' style="width:23rpx;height:23rpx; margin-left:5rpx;  margin-top:2rpx;"  src="http://dodui.oss-cn-shenzhen.aliyuncs.com/20201106RegDoduiDoshop_xcx/updata.png">
   </image>
 </view>

JS文件

//更新资料
  upDate: function () { 
    // 顺时针旋转实例
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    // 逆时针旋转实例
    var animation1 = wx.createAnimation({
      duration: 10,
      timingFunction: 'ease'
    })

    animation.rotate(450).step()
    this.setData({
      animationData: animation.export()
    })
    setTimeout(function () {
      animation1.rotate(0).step()
      this.setData({
        animationData: animation1.export()
      })
    }.bind(this), 1300);

    getUserInfo().then(res => {
      console.log("个人资料： ", res)
      this.setData({
        userInfo: res.data,
      });
      wx.showToast({
        title: '更新成功',
        icon: 'success',
        duration: 1000,
        mask: true
      })
    });
  }