收藏
回答

请问一下 这种动画效果怎么实现

问题模块 框架类型 问题类型 提审时间 AppID
审核 小程序 需求 2018-08-29 测试id

请问一下 这种动画效果怎么实现

最后一次编辑于  2018-08-29  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 这个麻瓜很懒什么都没有留下丶
    这个麻瓜很懒什么都没有留下丶
    2018-09-12

    哇,我最近也遇到了这个问题, 我是这样弄的


    <!-- wxml -->
    <view class="page1" animation="{{animation1}}">页面1</view>

    <view class="page2" animation="{{animation2}}">页面2</view>



    /* wxss */
    .page1 {
        background: red;  
    }
    .page2 {
        background: blue;
        transform: rotateY(90deg);
    }

    // javascript

    data: {

     animation1: null,

     animation2: null

    },


    onShow: function() {

     const page1Out = wx.createAnimation({

       duration: 1000

     })

      const page2In  = wx.createAnimation({

        duration: 1000,

        delay: 1000

      })


     page1Out.rotateY(90).step()
     page2In.rotateY(0).step()


     this.setData({
       animation1: mainOut.export(),
       animation2: menuIn.export()
     })


    }



    但是这样的话就无法将不显示的菜单设为 display:none 了
    2018-09-12
    赞同
    回复 1
    • 蓝昊
      蓝昊
      2018-09-13

      第一段动画(actualAnimation.rotateY(90).step())执行完之后 要还原一下(actualAnimation.rotateY(0).step()) 在执行下一组动画

      2018-09-13
      回复