微信小程序的动画效果详解

2023年6月11日上午1:53 • JavaScript

我来详细讲解一下“微信小程序的动画效果详解”的完整攻略。

一、动画效果简介

在微信小程序中，可以使用WXML和WXSS中的动画效果，通过制定一定的动画规则和样式来实现页面元素的动态效果。

具体实现是通过提供的3个基本动画帧（transition、 animation、 keyframes）来进行制作。

其中，

transition 过渡动画是指某个元素在改变样式时平滑的过渡切换，比如添加 transition: width 2s 后，点击该元素，则 width 改变时会耗费2秒完成过渡切换，使动态效果更加平滑。
animation 动画效果是指整个页面元素的动态变化，使用 @keyframes 对某些状态进行制定，来呈现出动态细节，如图片的旋转。
keyframes 关键帧动画实际上是动画的核心，通过制定某些关键帧，来制定CSS动画，通过不同的关键帧和时间轴上的插值实现整个动画效果。

二、动画效果实现详解

1. `wx.createAnimation` 动画实现

wx.createAnimation 是小程序提供的动画创建器，通过它可以创建各种复杂的动画，并提供了方法来控制动画效果，常用的方法如下：

rotate(deg: number).step() 设置元素旋转的度数，step()将动画效果保存，并返回实例
translateX(px: number).step() 在水平方向上移动元素px像素，step()将动画效果保存，并返回实例
opacity(opacity: number).step() 控制元素的透明度，step()将动画效果保存，并返回实例

下面为一个示例情境，效果为：点击按钮后，旋转图片，并缓慢下移，实现动态效果：

// JS部分
Page({
  data: {
    animationData: {}
  },
  onReady: function () {
    this.animation = wx.createAnimation()
  },
  rotateAndDown: function () {
    this.animation.rotate(360).translateY(200).step()

    this.setData({
      animationData: this.animation.export()
    })
  }
})

<!-- WXML部分 -->
<button bindtap="rotateAndDown" type="primary">点击移动</button>
<image animation="{{animationData}}" src="../../images/rotate_image.png" style="width: 256px; height: 256px;"></image>

2. `animation` 动画实现

animation 动画实现需要在 WXSS 中编写动画样式，通过 animation-name 、 animation-duration、 animation-timing-function 等属性来制作动画效果，下面是一个示例情境，效果为点击按钮后，图片像气球一样上升：

<!-- WXML部分 -->
<button bindtap="flyshow" type="primary">起飞</button>
<image class="balloon" animation="{{flyAnimation}}" src="../../images/balloon.png"></image>

/* WXSS部分 */
.balloon{
  width: 200rpx;
  height: 400rpx;
  position: fixed;
  bottom: 0px;
  animation-name: fly;
  animation-duration: 4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
/* 定义动画关键帧 */
@keyframes fly{
  0%{
    transform: scale(1,1) translateY(0px);
  }
  100%{
    transform: scale(2,2) translateY(-700px);
  }
}