###
微信小程序中 `movable
-view` 的最佳实践
#### 使用 `movable
-view` 实现缩放
和旋转功能
在
微信小程序中，`movable
-view` 是一种用于实现拖动、缩放
和其他交互行为的强大工具。为了实现视图的
放大、
缩小以及旋转功能，可以结合 `scale`
和 `rotate` 属性来完成。
以下是具体的实现方法：
1. **初始化动画对象**
需要先创建一个动画实例，并将其绑定到数据模型中以便动态更新界面状态[^3]。
2. **设置基础样式**
定义 `movable
-area`
和 `movable
-view` 的初始布局参数，确保它们能够正常显示并响应用户输入事件。
3. **处理触摸事件**
利用 `touchstart`, `touchmove`,
和 `touchend` 来捕获用户的触控动作，并据此调整 `movable
-view` 的位置、比例或者角度变化。
4. **实现缩放逻辑**
当检测到双指捏合或拉伸时，计算两手指之间的距离差值作为新的缩放因子应用于当前元素尺寸之上；需要注意的是，在某些情况下可能还需要同步修改容器边界以适应更大的内容区域[^2]。
5. **执行旋转操作**
基于单点或多点绕中心轴转动的角度增量调用相应的方法完成顺逆时针方向上的变换过程。
下面给出一段综合以上要点的实际代码例子供参考：
```javascript
// 初始化变量
Page({
data: {
scaleValue: 1, // 默认缩放倍率
rotationAngle: 0, // 起始旋转度数
startX: 0,
startY: 0,
startDistance: null,// 记录初次两点间间距
animationData:{}
},
onLoad(){
const animInstance=wx.createAnimation();
this.animation=animInstance;
},
handleTouchStart(e){
let touches=e.touches;
if(touches.length===1){
this.data.startX = e.touches[0].clientX;
this.data.startY = e.touches[0].clientY;
}else if (touches.length === 2) {
this.data.startDistance=this.getFingerDistance(touches);
}
},
getFingerDistance(pointsArray){
var dx = pointsArray[0].pageX
- pointsArray[1].pageX;
var dy = pointsArray[0].pageY
- pointsArray[1].pageY;
return Math.sqrt(dx*dx + dy*dy);
},
handleTouchMove(e){
const touchPointsCount=e.changedTouches.length;
switch(true){
case touchPointsCount==1:
this.moveSinglePoint(e);
break;
case touchPointsCount>=2:
this.scaleWithTwoFingers(e);
break;
}
},
moveSinglePoint(event){
var deltaX=event.touches[0].clientX
-this.data.startX;
var deltaY=event.touches[0].clientY
-this.data.startY;
this.updatePosition(deltaX,deltaY);
},
updatePosition(x,y){
let updatedAnim=this.animation.translateX(x+'px').translateY(y+'px');
this.applyChanges(updatedAnim);
},
applyChanges(animationObj){
animationObj.step();
this.setData({animationData:this.animation.export()});
},
scaleWithTwoFingers(event){
let currentDist=this.getFingerDistance(event.touches),
prevScaleVal=this.data.scaleValue,
newScaleFactor=currentDist/this.data.startDistance;
if(newScaleFactor>prevScaleVal && newScaleFactor<=3 || newScaleFactor<prevScaleVal&&newScaleFactor>=0.3 ){
this.setNewScale(prevScaleVal,newScaleFactor);
}
},
setNewScale(oldScale,factorRatio){
let finalScaledValue=(factorRatio)*oldScale;
this.performScaling(finalScaledValue);
},
performScaling(valueToSet){
let scaledAnim=this.animation.scale(valueToSet).rotate(this.data.rotationAngle+"deg");
this.applyChanges(scaledAnim);
this.setData({scaleValue:valueToSet});
},
rotateViewByRandomDegree(){
let randomDeg=Math.floor((Math.random()*720)
-360)+parseInt(this.data.rotationAngle);
this.executeRotation(randomDeg%360);
},
executeRotation(degreeAmount){
let rotatedAnim=this.animation.rotate(degreeAmount+"deg").scale(this.data.scaleValue);
this.applyChanges(rotatedAnim);
this.setData({rotationAngle:degreeAmount});
}
})
```
此段脚本展示了如何监听不同类型的触摸事件并通过编程方式控制目标节点的位置、大小及朝向属性的变化情况。其中还包含了随机生成一定范围内数值的功能用来演示即时更改视角方位的效果。
---
扫一扫
2493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
