可以使用微信小程序提供的动画 API 来实现。下面是具体的步骤:
1.在 wxml
文件中创建按钮
<view class="container">
<button class="invite-btn" animation="{{animationData}}">邀请好友</button>
</view>
2. 在 wxss
文件中定义样式:
/* wxss 文件 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.invite-btn {
width: 200rpx;
height: 80rpx;
background-color: #1AAD19;
color: white;
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
font-size: 18px;
}
3. 在 js
文件中添加动画效果
Page({
data: {
animationData: {}
},
onLoad: function() {
this.createAnimation();
},
createAnimation: function() {
// 创建动画实例
const animation = wx.createAnimation({
duration: 1000, // 每次动画的持续时间
timingFunction: 'ease-in-out', // 缓动函数,使动画更平滑
})
// 定义循环动画
const animate = () => {
animation.scale(1.2).step(); // 放大
animation.scale(1).step(); // 缩小
this.setData({
animationData: animation.export()
});
};
// 初次启动动画
animate();
// 设置定时器,循环执行动画
setInterval(() => {
animate();
}, 1000); // 1000 毫秒后重复动画
}
})
4. 效果说明
这个代码会在页面加载时创建一个“邀请好友”的按钮,按钮会每秒钟循环放大到1.2倍然后恢复到原来的大小。通过 timingFunction: 'ease-in-out'
,动画将会平滑地过渡,使得放大和缩小的效果更加自然。
你可以根据需要调整 duration
、timingFunction
、和 scale
的值,以达到你想要的动画效果。