感谢作者熊建刚授权发布。
作者:熊建刚,前端开发工程师,毕业于北京交通大学,专注前端,喜好尝试新技术,热爱分享。个人邮箱:[email protected],博客地址:http://blog.codingplayboy.com/。
责编:陈秋歌,寻求报道或者投稿请发邮件至chenqg#csdn.net,或加微信:Rachel_qg。
了解更多前沿技术资讯,获取深度技术文章推荐,请关注CSDN研发频道微博。
上周遇见一个关于双指缩放的问题,同时这个双指缩放也比较常见,于是决定对移动开发手势做一个学习和总结,并给出一个双指缩放的实例,希望对读者提供一些帮助。
先给一个例子,点此查看双指缩放实例
当年乔布斯的iPhone第一次支持多点触控时,确实惊艳了世人,而现在大部分手机都支持多点触控,这就有了手势这个概念,通过多点触控,形成不同的手势,开发者根据不同手势,提供不同功能,比如双指缩放,是很常见的。
iOS的多点触摸
iOS的Safari浏览器是第一个支持多点触摸的浏览器,并提供触摸API供开发者使用,到后来Android 3也开始支持多点触摸,各大浏览器也借鉴Safari提出了触摸API,除了个别硬件支持属性外,大致相同,这是值得庆幸的。
IE10的多点触摸
虽然现在市场上WP手机越来越少,但是为了更完整的学习理解手势知识,我们也需要进行学习。IE10支持多点触摸,但是其多点触摸与iOS和Android不同,iOS和Android浏览器为多点触摸提供一个包含touches数组的事件,包含所有多点触摸对象,而IE10为多点触摸的每一个触摸点创建一个单独的触摸事件。
我们知道手势很方便,用户也很喜欢手势,但是我们也要明白手势并不总是能使用,有些设备或浏览器还是不支持的,所以我们最合适的是基于普通点击和触摸事件交互的页面,将手势作为增强的交互,这就是通常所说的渐进增强思想。
既然是要渐进增强,那就必须从基础点击和触摸事件说起,点击事件就不再多说,关于触摸事件,之前也有一篇文章介绍过移动开发之轻触与单击事件,关于触摸四种基础事件和事件对象,可以查看该文章,这里就不重复了,这里要对触摸事件的处理进行说明。
浏览器兼容
通常我们在触摸和手势事件处理函数内会添加CSS3动画处理,这个时候需要进行浏览器兼容处理。
var TRANSITION = 'transition';
var TRANSITION_END = 'transitionend';
var TRANSFORM = 'transform';
var TRANSFORM_PROPERTY = 'transform';
var TRANSITION_PROPERTY = 'transition';
if (typeof document.body.style.webkitTransform !== undefined) {
TRANSFORM = 'webkitTransform';
TRANSITION = 'webkitTransition';
TRANSITION_END = 'webkitTransitionEnd';
TRANSFORM_PROPERTY = '-webkit-transform';
TRANSITION_PROPERTY = '-webkit-transition';
}
在移动端手势事件中,双指缩放的需求还是很常见的,本节详细阐述,现在大多数移动设备都支持原生的双指缩放,但是这样可能影响页面布局,而且为了更多可控性,很多时候还是会选择自行实现缩放手势功能。
缩放中心
在原生缩放动画,缩放中心通常是图像中心,可以拿起移动设备尝试一番,而在现实需求中,我们通常希望缩放以手势屏幕的两个接触点中心为中心,即缩放中心为接触点中心。
变换原点
在CSS3动画中,如,transform动画旋转,缩放等动画
,有一个transform-origin
属性:
The transform-origin property lets you modify the origin for transformations of an element.
transform-origin
属性使得我们可以修改一个元素变换动画的原点。
当我们使用CSS3变换动画进行缩放时,由于变换动画的变换原点和缩放中心(即接触点中心)相互独立,为了不影响缩放中心相对于元素的位置,元素变换缩放时,也应该对缩放中心坐标进行缩放移动,即除了变换缩放元素,还应该对该元素进行额外坐标偏移。
位移偏量
我们希望缩放以接触点中心为中心,元素向四周缩放,假设变换原点为元素左上角,即transform-origin: 0 0;
,此时元素变换缩放位移均为正值,仅向右下方向缩放,所以缩放中心(其实也就是该元素)应对应向相反方向(左上方向)偏移,值为缩放坐标值 * (1 - 缩放比例)
。
如上图,原始元素A盒,以接触点M,N两点的中心点L(x, y)为缩放中心点,向四周缩放,其位置应该如图中C盒,由于L(x, y)点的位置是不可控的(用户行为),我们设置元素变换原点transform-origin: 0 0;
,此时其缩放后位置如B盒,然而我们依然希望达到缩放后形成C盒的位移效果,则我们需要将元素向左上方向位移,假设缩放比例为k, 则元素位移值计算过程如下:
L(x, y)
点,在缩放前坐标系中坐标为(x, y)
,则缩放k倍后,其在缩放后坐标系中坐标为(kx, ky)
;禁止原生缩放
要使用自行实现的缩放手势,我们需要首先禁止元素缩放手势,使用user-scalable=no
:
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
缩放与滚动
我们自行实现的缩放事件需要使用touchmove
事件,而touchmove
事件会触发设备的滚动事件,所以要么阻止滚动,要么不让屏幕出现滚动条。
阻止滚动
document.addEventListener('touchmove', function(event){
event.preventDefault();
})
阻止滚动条
html, body {
height: 100%;
}
计算缩放中心
缩放动画以接触点为中心,当我们使用双指手势实现缩放时,这个接触点中心就是两个接触点的中心点:
function getOrigin(first, second) {
return {
x: (first.x + second.x) / 2,
y: (first.y + second.y) / 2
};
}
getOrigin({
x: event.touches[0].pageX,
y: event.touches[0].pageY
}, {
x: event.touches[1].pageX,
y: event.touches[1].pageY
});
计算缩放比例
缩放比例如何确定呢,起始触摸两指间距离除以缩放时两指间距离,即缩放比例:
function getDistance(start, stop) {
return Math.sqrt(Math.pow((stop.x - start.x), 2) + Math.pow((stop.y - start.y), 2));
}
function getScale(start, stop) {
return getDistance(start[0], start[1]) / getDistance(stop[0], stop[1]);
}
处理触摸事件
要实现缩放功能除了计算相关缩放中心和缩放比例,另外还需要处理触摸事件:
var distance = {};
var origin;
var scale = 1;
function handleTouch(e) {
switch(e.type) {
case 'touchstart':
if (e.touches.length > 1) {
distance.start = getDistance({
x: e.touches[0].screenX,
y: e.touches[0].screenY
}, {
x: e.touches[1].screenX,
y: e.touches[1].screenY
});
}
break;
case 'touchmove':
if (e.touches.length === 2) {
origin = getOrigin({
x: event.touches[0].pageX,
y: event.touches[0].pageY
}, {
x: event.touches[1].pageX,
y: event.touches[1].pageY
});
distance.stop = getDistance({
x: e.touches[0].screenX,
y: e.touches[0].screenY
}, {
x: e.touches[1].screenX,
y: e.touches[1].screenY
});
scale = distance.stop / distance.start;
setScaleAnimation(scale, true);
}
break;
case 'touchend':
scale = 1;
setScaleAnimation(scale);
break;
case 'touchcancel':
scale = 1;
setScaleAnimation(scale);
break;
default:;
}
}
使用变换
接下来就是使用CSS3动画缩放图片了,代码如下:
function setScaleAnimation(scale, animation) {
var transition_animation = '';
var x, y;
if (animation) {
transition_animation = 'none';
} else {
transition_animation = TRANSFORM_PROPERTY + ' 0.3s ease-out';
}
element.style[TRANSITION] = transition_animation;
// 计算位移偏量
x = origin.x + (-origin.x) * scale;// 缩放中心偏移量
y = origin.y + (-origin.y) * scale;
// 缩放和位移
element.style[TRANSFORM] = 'matrix(' + scale + ', 0, 0, ' + scale + ', ' + x + ', ' + y + ')';
}
点此查看双指缩放实例
本文所有实例代码点此查看
本文关于移动开发手势及实现双指缩放介绍到此完结,实现的实例比较粗糙,但原理基本阐述清楚,感兴趣可以自己动手实现,优化;本文很久以前就开篇了,但直到今天才终于完笔,若有不足,也欢迎指正。
欢迎加入“CSDN前端开发者”群,与更多专家、技术同行进行热点、难点技术交流。请扫描以下二维码加群主微信,申请入群,务必注明「姓名+公司+职位」。