微信小程序 - 动画（Animation）执行过程 / 实现过程 / 实现方式

傷城~ 2022-11-28 10:33 478阅读 0赞

## 前言 ##

因官方文档描述不清晰，本文主要介绍微信小程序动画 **实现过程** / **实现方式**。

## 实现过程 ##

> 推荐你对照 [官方文档][Link 1] 来看本文章，这样更有利于理解。

简单来说，整个动画实现过程就三步：

1.  创建一个动画实例 `animation`。
2.  调用实例的方法来描述动画。
3.  最后通过动画实例的 `export` 方法导出动画数据传递给组件的 `animation` 属性。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_center]  
前两步是定义一个动画并设置都要干什么，然后把这个设置好的 “规则” 扔给界面上的某个元素，让它按照这个规则执行。

> 当然如果有多个元素的 `animation="{ {ani}}"`，也都会执行这个动画规则。

## 实现过程 ##

上面是理论，接下来进入实操环节，我们通过一个例子来验证。  
![在这里插入图片描述][20200817144914739.gif_pic_center]

**index.wxml**

<view animation="{ { ani }}" class="content"></view>
    
    
    
    <button bindtap="go">动起来</button>

**index.js**

Page({ 
    
      /* * 事件处理 */
      data: { },
    
      /* * 事件处理 */
      go: function() { 
        
        // 1.创建动画实例(animation)
        var animation = wx.createAnimation({ 
          duration: 1500,//动画持续时间
          timingFunction: 'ease-in',//动画以低速开始
          //具体配置项请查看文档
        })
    
        // 2.通过实例描述对象()
        /* * 链式(类似JQuery) * 用 . 拼接动画 * 最后step()结尾表动画结束 */
        animation.translate(100, 100).rotate(180).rotate(360).step()
    
        // 3.导出动画
        this.setData({ 
          ani: animation.export()
        })
      }
    })

**index.css**

.content { /*为了能看清效果*/
      width: 200rpx;
      height: 200rpx;
      border: 3px solid red;
    }

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/e6941b17803446e18a87799c235e254b.png
[20200817144914739.gif_pic_center]: /images/20221124/2b3753ea9ba24b23a18dc3e5e7051536.png