微信小程序：动画（Animation）

最新推荐文章于 2025-07-07 19:48:32 发布

亮子AI

最新推荐文章于 2025-07-07 19:48:32 发布

阅读量4.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/henryhu712/article/details/87353227

微信小程序专栏收录该内容

47 篇文章

订阅专栏

本文详细解析了微信小程序中动画的实现步骤与执行原理。从创建动画实例到导出动画数据，再到具体参数如duration、timingFunction和delay的使用，以及动画方法如opacity和translate的应用。通过实例代码展示了如何使元素按设定规则运动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

当然如果有多个元素的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()
    })
  }
})

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

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

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