微信小程序：动画（Animation）

╰+攻爆jí腚メ 2022-03-18 21:18 377阅读 0赞

> 简单总结一下微信动画的实现及执行步骤。官方文档是这样说的：①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性

图解实现的三步骤：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbnJ5aHU3MTI_size_16_color_FFFFFF_t_70]

前两步是定义一个动画并设置都要干什么，然后把这个设置好的“规则”扔给界面上的某个元素，让它按照这个规则执行。

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

## 实例代码 ##

index.wxml

<view class="container">
      <view class="usermotto" animation="{
       {ani}}">
        <text class="user-motto">{
       {motto}}</text>
      </view>
      <button bindtap='start'>动画</button>
    </view>

index.wxss

.usermotto {
      margin-top: 100px;
      border: solid;
    }

index.js

Page({
      data: {
        motto: 'Hello World',
      },
      start:function(){
        var animation = wx.createAnimation({
          duration: 4000,
          timingFunction: 'ease',
          delay: 1000
        });
        animation.opacity(0.2).translate(100, -100).step()
        this.setData({
          ani:  animation.export()
        })
      }
    })

实际效果：  
![在这里插入图片描述][20190215122610141.gif]  
简单介绍一下例子中的几个参数和方法（详见[官方文档·动画][Link 1]）：

**duration**: 动画持续多少毫秒  
**timingFunction**: “运动”的方式，例子中的 'ease’代表动画以低速开始，然后加快，在结束前变慢  
**delay**: 多久后动画开始运行  
**opacity(0.2)**: 慢慢变透明  
**translate(100, -100)**: 向X轴移动100的同时向Y轴移动-100  
**step()**: 一组动画完成，例如想让上例中的HelloWorld向右上方移动并变透明后，再次向左移动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行， 这两种变化完成之后才会进行向左运行的一步。

最后再贴一个例子：  
[微信小程序之animation底部弹窗动画（两种方法）][animation]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbnJ5aHU3MTI_size_16_color_FFFFFF_t_70]: /images/20220319/eb451f307b974669bbfb056b7253f229.png
[20190215122610141.gif]: /images/20220319/5227bac5112f49b4b7d97f57348ba477.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.createAnimation.html
[animation]: https://juejin.im/post/5bd7ce15e51d4531b36efd5c