当前位置：首页 > JavaScript > 微信小程序启动动画

微信小程序启动动画

一叶知秋2024-08-04 16:20:07JavaScript19

在微信小程序中，可以使用 wx.createAnimation() 方法创建一个动画实例，然后通过动画实例的方法来设置动画的各种属性，最后将动画应用到具体的组件上

以下是一个简单的启动动画示例：

在页面的 WXML 文件中，添加一个用于展示动画的组件，例如一个图片：

在页面的 WXSS 文件中，设置组件的初始样式：

.animated-image {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

在页面的 JS 文件中，创建动画实例，并设置动画属性：

Page({
  onLoad: function () {
    // 创建动画实例
    var animation = wx.createAnimation({
      duration: 1000, // 动画持续时间
      timingFunction: 'ease', // 动画速度曲线
      delay: 0, // 动画延迟时间
      transformOrigin: '50% 50% 0', // 动画的中心点
    });

    // 设置动画属性
    animation.translate(100, 100).rotate(180).scale(2, 2).opacity(0).step();

    // 将动画应用到组件上
    this.setData({
      animationData: animation.export(),
    });

    // 动画结束后的回调函数
    setTimeout(() => {
      // 重置动画属性
      animation.translate(0, 0).rotate(0).scale(1, 1).opacity(1).step();
      this.setData({
        animationData: animation.export(),
      });
    }, 1000);
  },
});

在上面的示例中，我们首先创建了一个动画实例，并设置了动画的持续时间、速度曲线等属性。然后，我们使用动画实例的方法来设置动画效果，例如平移、旋转、缩放和透明度变化。我们将动画应用到了页面上的图片组件上，并在动画结束后重置了动画属性。

需要注意的是，动画的具体效果可以根据实际需求进行调整，例如改变动画的持续时间、速度曲线等属性，或者增加更多的动画效果。还可以使用 wx.createIntersectionObserver() 方法来监听组件的相交状态，从而实现在组件出现在视窗时才开始播放动画的效果。