微信小程序动画之消息框弹出

最新推荐文章于 2024-08-15 23:03:45 发布

原创

最新推荐文章于 2024-08-15 23:03:45 发布 · 1.4w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #消息框 #动画

微信小程序动画之消息框弹出

上图
在这里插入图片描述
js：

Page({
  data: {
    showModalStatus: false
  },
  powerDrawer: function(e) {
    var currentStatu = e.currentTarget.dataset.statu;
    this.util(currentStatu)
  },
  util: function(currentStatu) {
    /* 动画部分 */
    // 第1步：创建动画实例   
    var animation = wx.createAnimation({
      duration: 300, //动画时长  
      timingFunction: "linear", //线性  
      delay: 0 //0则不延迟  
    });

    // 第2步：这个动画实例赋给当前的动画实例  
    this.animation = animation;

    // 第3步：执行第一组动画  
    animation.opacity(0).rotateY(100).step();

    // 第4步：导出动画对象赋给数据对象储存  
    this.setData({
      animationData: animation.export()
    })

    // 第5步：设置定时器到指定时候后，执行第二组动画  
    setTimeout(function() {
      // 执行第二组动画  
      animation.opacity(1).rotateY(0).step();
      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象  
      this.setData({
        animationData: animatio