微信小程序动画执行一次问题

微信小程序动画执行一次解决方法

简单总结一下微信动画的实现及执行步骤（更新data使用的方式和vue一样直接this.data=""）。

1. const anim = wx.createAnimation({});
2. anim.rotate(180).step();
3. this.eyeAnim = anim.export();

起因：由于小程序动画执行是使用和第一次初始状态做diff。而不是执行每一次之后的状态来对比，所以多次点击只会执行一次。
解决：初始化一个旋转角度。点击一次增加180度。

`import wepy from ‘@wepy/core’;
import { reqLogin } from ‘Utils/api’;
import { Tips } from ‘Utils/tip’;
import { sendCode, setFormId } from ‘@/utils/api’;
import { phoneRegex } from ‘@/utils/expands’;

wepy.page({

data: {
  strPhone: '',
  strPwd: '',
  pwd_type: 'password',
  //显示清除已经输入内容按钮
  is_show_close: false,
  //显示眼睛
  is_show_pwd: false,
  eyeAnim: null,
  //眼睛旋转角度
  pwdIconAngel: 0
},
watch: {
  strPhone: function(newVal) {
    this.is_show_close = newVal;
  },
  strPwd: function(newVal) {
    this.is_show_pwd = newVal;
  }
},
methods: {
  clearText() {
    this.strPhone = '';
    this.is_show_close = false;
  },
  //切换显示text类型或者pwd类型的icon
  togglePwdIcon() {
    let type = this.pwd_type;
    const anim = wx.createAnimation({});
    //点击一次增加180度
    this.pwdIconAngel += 180;
    anim.rotate(this.pwdIconAngel).step();
    this.eyeAnim = anim.export();
    this.pwd_type = (type === 'password') ? 'text' : 'password';
  },
  /*登陆*/
  getLogin(e) {
    if (!this.strPhone.match(phoneRegex)) {
      Tips.toast('请输入正确的手机号码');
    } else if (this.strPwd.length <= 0) {
      Tips.toast('请输入密码');
    } else {
      reqLogin({ 'loginName': `${this.strPhone}`, 'password': `${this.strPwd}` })
        .then(data => {
          this.$app.$options.globalData.JSESSIONID = data;
          wx.setStorage({
            key: 'sp_token',
            //登陆之后 保存token与登陆时间
            data: [data, +new Date()]
          });
          wx.login({
            success: function(res) {
              return sendCode({ code: res.code });
            }
          });
        }).then(() => {
        setFormId(e.$wx.detail.formId);
        wx.switchTab({
          url: '/pages/index'
        });
      }).catch(error => {
        Tips.toast(error.msg);
      });
      wx.setStorage({
        key: 'phone',
        data: this.strPhone
      });
    }
  },
  goRegister() {
    wx.navigateTo({
      url: '/pages/account/register'
    });
  },
  goForget() {
    wx.navigateTo({
      url: '/pages/account/forgetpwd'
    });
  }
},

created() {
  wx.getStorage({
    key: 'phone',
    success: res => {
      this.strPhone = res.data;
    }
  });
}

});

`