微信小程序实现动画旋转和缩放同时进行代码
时间: 2024-10-29 08:10:33 浏览: 33
微信小程序实现move.css动画效果的源码
在微信小程序中,你可以使用`wx.createSelectorQuery()`和`node.setTransform()`来实现元素的旋转和缩放动画。下面是一个简单的例子:
```javascript
Page({
onShow() {
this.mySelector = wx.createSelectorQuery();
this.mySelector.select('#yourElementId').boundingClientRect((res) => {
// 获取你要动画的元素的初始位置和尺寸
let startScale = 1; // 初始缩放比例,设为1表示无缩放
let startX = res.left;
let startY = res.top;
this.mySelector.config({ duration: 500 }); // 设置动画时长
this.mySelector.transform(`rotate(45deg) scale(${startScale + 0.2})`, (res) => { // 缩放+旋转
// 动画结束后的回调
console.log('动画结束');
});
this.mySelector.exec(); // 开始执行动画
});
}
})
```
在这个例子中,我们首先创建了一个`selectorQuery`实例,然后选择我们要动画的元素,设置动画时长,然后使用`setTransform`方法对元素进行旋转(`rotate`)和缩放(`scale`)。动画结束后,会触发回调函数。
阅读全文