微信小程序的核心动画可以通过 animation API 来实现。下面是一个简单的示例，展示了如何使用微信小程序的动画功能来创建一个基本的动画效果，比如让一个方块在屏幕上移动并缩放。
示例代码
1. index.wxml
2. index.js
Page({
data: {
animation: {}
},
startAnimation: function () {
// 创建动画实例
const animation = wx.createAnimation({
duration: 1000, // 动画持续时间
timingFunction: 'ease', // 动画的速度曲线
});
// 定义动画效果
animation.translateX(100).scale(1.5).step(); // 向右移动100px，并放大1.5倍
animation.rotate(45).step(); // 旋转45度
animation.opacity(0.5).step(); // 改变透明度到0.5
// 更新动画数据
this.setData({
animation: animation.export() // 导出动画数据
});
}
});
3. index.wxss
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 设置容器高度为视口高度 */
}
.box {
width: 100px;
height: 100px;
background-color: #3498db; /* 蓝色方块 */
border-radius: 10px; /* 圆角 */
}
代码说明
HTML 部分：
创建一个
为 box 绑定了一个 tap 事件，点击时触发 startAnimation 方法。
JavaScript 部分：
在 data 中定义一个 animation 属性，用于存储动画数据。
startAnimation 方法创建动画实例，定义动画效果（移动、缩放、旋转和透明度变化）。
使用 translateX 方法使方块向右移动100px，scale 方法放大1.5倍，rotate 方法旋转45度，以及 opacity 方法设置透明度为0.5。
使用 step 方法表示动画的一个步骤，最后用 export 导出动画数据并更新到 data 中。
CSS 部分：
设置容器的样式，使其居中显示。
定义方块的样式，包括大小、颜色和圆角效果。
运行效果
点击蓝色方块后，方块将向右移动 100 像素、放大 1.5 倍、旋转 45 度并变为半透明。这个简单的示例展示了如何使用微信小程序的核心动画 API 创建基本动画效果。
如果您想要更复杂的动画或有其他问题，请随时询问！