微信小程序js动画Animation基本使用

最新推荐文章于 2025-09-13 12:59:37 发布

原创最新推荐文章于 2025-09-13 12:59:37 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #小程序

本文介绍了微信小程序中JS动画的基本使用，通过wx.createAnimation创建动画对象，并结合step()方法实现动画效果。示例代码展示了如何在.wxml、.wxss和.js文件中配合使用以完成实际的动画展示。

最近才发现j小程序js中自带Animation动画功能

在这里插入图片描述

先在 .js 中使用wx.createAnimation创建动画
在这里插入图片描述
基本属性文档中很清楚

定义动画对象后就可以.加需要的动画效果了，这里要注意==step()==是一定要写的，表示动画制作完成，不写是没有效果的

然后在wxml中调用就可以了

下面是上面gif动画的代码

.wxml

<button bindtap="showItem">点击翻页</button>

<view class="fanye" animation="{{animationData}}"></view>

.wxss

button{
  z-index: 10;
}
.fanye{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(83, 33, 33);  
  z-index: 5;
  opacity: 0;
}

.js

// pages/fanye/fanye.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  showItem() {

    let animation = wx.createAnimation({
      duration: 800,
    });
    animation.translateX(300).opacity(0.3).step();
    this.setData({
      show: !this.data.show,
      animationData: animation.export()
    });
    
     // 移动完成后
    setTimeout(()=>{
      var animation = wx.createAnimation({
        duration: 100,

      });
      animation.translateX(0).opacity(0).step()
      this.setData({
        animationData:animation.export()
      })
  },500)
  },

})