2018-07-09 微信小程序之动画编码体验

    这一周工作主要围绕了微信小程序的动画效果展开，微信小程序的动画实际上是对原生的css3动画进行了一层封装，所以其动画类型是与css类似的有，包括透明度变化，背景变化，宽高变化在内的样式变幻，旋转变幻，缩放变幻，矩阵变换等。具体的API可参见微信小程序文档https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html#wxcreateanimationobject其使用方式也感觉与css3动画异曲同工，不过首先需要初始化一个微信动画对象：

         this.favBlink = wx.createAnimation({ 

            duration: 800, timingFunction: 'ease-in', 

        })

    然后要像css3一样初始化动画，设计动画的内容，使用API进行选择器的相应变幻：

         this.favBlink.opacity(1).translateY(-10).step() 

         this.favBlink.opacity(0).step() 

         this.favBlink.translateY(10).step()

    注意这里的step方法，step方法是微信小程序用来设定动画执行的函数，如上，每一个step代表一个执行步骤，进行链式调用的一个step内的内容将同步执行，在不同step中的内容将分布执行。但是这也是相对的，什么意思呢？比如旋转变幻，如果将两个相反方向的动画同步执行，那么它只会呈现第二个，当然这也可以理解为一种同步执行。另外，这样的同步还和所设置的duration有关，如果duration过短，那么在这个时间段内可能就没有办法执行完成相应的动画，在微信小程序中它的处理在视觉上感觉就会省略动画，比如旋转，即使你分step写了多次旋转，它在不够充足的时间内，可能也只会呈现一次旋转。

    最后就是要将动画效果与相应dom绑定，在dom中使用animation属性动态绑定一个变量，animation="{{xxx}}"，然后在js中将这个属性用export实例化： 

          this.setData({ 

            wordAnimation: this.favBlink.export() 

           })

      一个先出现向上移动，然后再消失缓慢向下的动画就完成了。

       这里对于微信的动画起始状态与终止状态的变化与选定，其实还有一些疑问。在实际的编码中经常遇到这样的问题，当我们完成一段动画的时候，在一段时间后需要继续在相同的dom上开始动画，就会出现很多诡异的不在预料之内的动画，比较突出的是如下的一些情形： 

        1.在一个dom之上执行了rotateY结合tanslate3d的动画，将其使用opacity隐藏（整体执行的是一种类似于向左翻页的动画）。再次显示希望其执行向右翻回上一页的动画，此时再显示的时候（注意这里并没有使用过display:none，而只是使用opacity:0隐藏了），该dom只保存了rotate（30）而没有保留translate的偏移（至少视觉上是这样，这个错误比较久，无法复现）。 

        2.同样的，对一个文字执行了一个向上平移的translate动画并且加上opacity：1，然后将其隐藏，这次使用的是wx:if隐藏，这次是彻底在dom中消失，但是再次出现的时候，它保留了translate后的位置

     这种起始状态与终止状态的模棱两可在开发中让人很疑惑，不知道是我理解的不到位还是本身优化的不够流畅，微信小程序在处理简单的动画的时候，流畅到可以与原生近似，但是感觉当动画复杂起来的时候，感觉就没有理想的那么流畅了。而处理这种初始状态与终止状态的混乱问题，我只好每次执行完动画之后都再手动设置dom的位置，并且清除动画，这样虽然感觉麻烦许多，但是是相对比较稳妥的做法。 

        setTimeout(() => { 

            this.beginRotateAnimation = false 

            this.setData({ 

                backPanelChange: null, 

                frontPanelChange: null, 

        }) }, 1000);