制作小程序中的动画效果

在小程序中使用动画效果可以为用户带来更加生动的交互体验。本文将介绍如何使用 Animation 和 Transition 来制作小程序中的动画效果。

Animation

Animation（动画）是小程序中的一种基本动画效果实现方式。它可以实现多个目标组件同时或者依次执行一系列动画效果，如移动、缩放、旋转等。

创建 Animation 实例

我们首先需要创建一个 Animation 实例，通过调用 wx.createAnimation 方法来实现：

// 创建 Animation 实例
const animation = wx.createAnimation({
  duration: 1000,  // 动画持续时间，单位毫秒
  timingFunction: 'linear',  // 动画效果
  delay: 0,  // 动画延迟时间，单位毫秒
  transformOrigin: '50% 50% 0',  // 转变中心点
});

设置动画效果

通过 Animation 实例的方法可以设置不同的动画效果，比如 translateX、scale、rotate 等。

animation.translateX(100).step()  // 横向位移100像素
animation.scale(2).step()  // 放大2倍
animation.rotate(180).step()  // 旋转180度

应用动画效果

创建好动画效果后，我们可以将这些动画效果应用到目标组件上：

this.setData({
  animationData: animation.export(),  // 导出动画效果
});

示例

Page({
  data: {
    animationData: {},  // 动画效果
  },
  onTap: function() {
    // 创建 Animation 实例
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
      delay: 0,
      transformOrigin: '50% 50% 0',
    });

    // 设置动画效果
    animation.translateX(100).scale(2).rotate(180).step();

    // 应用动画效果
    this.setData({
      animationData: animation.export(),
    });
  },
});

<!-- wxml -->
<view class="box" animation="{{animationData}}"></view>

Transition

Transition（过渡）是小程序中另一种常用的动画效果实现方式。它通过使用 CSS 的 transition 属性来实现从一个样式状态过渡到另一个样式状态的动画效果。

设置过渡效果

为组件设置过渡效果，我们需要在样式中添加 transition 属性，并指定过渡的属性、持续时间和过渡效果。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s linear;  /* 过渡属性、持续时间和过渡效果 */
}

切换样式状态

我们可以通过改变组件的样式状态来触发过渡效果。比如，我们可以通过改变 box 样式的 transform 属性来触发过渡效果。

Page({
  data: {
    isAnimating: false,  // 是否正在执行动画
  },
  onTap: function() {
    this.setData({
      isAnimating: true,  // 开始执行动画
    });

    setTimeout(() => {
      this.setData({
        isAnimating: false,  // 动画结束
      });
    }, 1000);
  },
});

<!-- wxml -->
<view class="box {{isAnimating ? 'animate' : ''}}" bindtap="onTap"></view>

/* wxss */
.box.animate {
  transform: translateX(100px) scale(2) rotate(180deg);  /* 设置过渡属性 */
}

示例

Page({
  data: {
    isAnimating: false,
  },
  onTap: function() {
    this.setData({
      isAnimating: true,
    });

    setTimeout(() => {
      this.setData({
        isAnimating: false,
      });
    }, 1000);
  },
});

<!-- wxml -->
<view class="box {{isAnimating ? 'animate' : ''}}" bindtap="onTap"></view>

/* wxss */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s linear;
}

.box.animate {
  transform: translateX(100px) scale(2) rotate(180deg);
}

以上是制作小程序中的动画效果 Animation 和 Transition 的简要介绍。通过使用这两种动画效果，我们可以为小程序增添更多的交互动感。希望本文对你有所帮助！

本文来自极简博客，作者：黑暗之影姬，转载请注明原文链接：制作小程序中的动画效果