212 lines
5.2 KiB
HTML
212 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="assets/style.css">
|
|
<title>Hammer.js</title>
|
|
|
|
<style>
|
|
|
|
html, body {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
-webkit-perspective: 500;
|
|
-moz-perspective: 500;
|
|
perspective: 500;
|
|
}
|
|
|
|
.animate {
|
|
-webkit-transition: all .3s;
|
|
-moz-transition: all .3s;
|
|
transition: all .3s;
|
|
}
|
|
|
|
#hit {
|
|
padding: 10px;
|
|
}
|
|
|
|
#log {
|
|
position: absolute;
|
|
padding: 10px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="log"></div>
|
|
<div id="hit" style="background: #42d692; width: 150px; height: 150px;"></div>
|
|
|
|
|
|
<script src="../../hammer.js"></script>
|
|
<script>
|
|
|
|
var reqAnimationFrame = (function () {
|
|
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
|
|
window.setTimeout(callback, 1000 / 60);
|
|
};
|
|
})();
|
|
|
|
var log = document.querySelector("#log");
|
|
var el = document.querySelector("#hit");
|
|
|
|
var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
|
|
var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
|
|
|
|
var ticking = false;
|
|
var transform;
|
|
var timer;
|
|
|
|
var mc = new Hammer.Manager(el);
|
|
|
|
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
|
|
|
|
mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
|
|
mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
|
|
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
|
|
|
|
mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
|
|
mc.add(new Hammer.Tap());
|
|
|
|
mc.on("panstart panmove", onPan);
|
|
mc.on("rotatestart rotatemove", onRotate);
|
|
mc.on("pinchstart pinchmove", onPinch);
|
|
mc.on("swipe", onSwipe);
|
|
mc.on("tap", onTap);
|
|
mc.on("doubletap", onDoubleTap);
|
|
|
|
mc.on("hammer.input", function(ev) {
|
|
if(ev.isFinal) {
|
|
resetElement();
|
|
}
|
|
});
|
|
|
|
|
|
function resetElement() {
|
|
el.className = 'animate';
|
|
transform = {
|
|
translate: { x: START_X, y: START_Y },
|
|
scale: 1,
|
|
angle: 0,
|
|
rx: 0,
|
|
ry: 0,
|
|
rz: 0
|
|
};
|
|
|
|
requestElementUpdate();
|
|
|
|
if (log.textContent.length > 2000) {
|
|
log.textContent = log.textContent.substring(0, 2000) + "...";
|
|
}
|
|
}
|
|
|
|
function updateElementTransform() {
|
|
var value = [
|
|
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
|
|
'scale(' + transform.scale + ', ' + transform.scale + ')',
|
|
'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'
|
|
];
|
|
|
|
value = value.join(" ");
|
|
el.textContent = value;
|
|
el.style.webkitTransform = value;
|
|
el.style.mozTransform = value;
|
|
el.style.transform = value;
|
|
ticking = false;
|
|
}
|
|
|
|
function requestElementUpdate() {
|
|
if(!ticking) {
|
|
reqAnimationFrame(updateElementTransform);
|
|
ticking = true;
|
|
}
|
|
}
|
|
|
|
function logEvent(str) {
|
|
//log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
|
|
}
|
|
|
|
function onPan(ev) {
|
|
el.className = '';
|
|
transform.translate = {
|
|
x: START_X + ev.deltaX,
|
|
y: START_Y + ev.deltaY
|
|
};
|
|
|
|
requestElementUpdate();
|
|
logEvent(ev.type);
|
|
}
|
|
|
|
var initScale = 1;
|
|
function onPinch(ev) {
|
|
if(ev.type == 'pinchstart') {
|
|
initScale = transform.scale || 1;
|
|
}
|
|
|
|
el.className = '';
|
|
transform.scale = initScale * ev.scale;
|
|
|
|
requestElementUpdate();
|
|
logEvent(ev.type);
|
|
}
|
|
|
|
var initAngle = 0;
|
|
function onRotate(ev) {
|
|
if(ev.type == 'rotatestart') {
|
|
initAngle = transform.angle || 0;
|
|
}
|
|
|
|
el.className = '';
|
|
transform.rz = 1;
|
|
transform.angle = initAngle + ev.rotation;
|
|
requestElementUpdate();
|
|
logEvent(ev.type);
|
|
}
|
|
|
|
function onSwipe(ev) {
|
|
var angle = 50;
|
|
transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;
|
|
transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;
|
|
transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;
|
|
|
|
clearTimeout(timer);
|
|
timer = setTimeout(function () {
|
|
resetElement();
|
|
}, 300);
|
|
requestElementUpdate();
|
|
logEvent(ev.type);
|
|
}
|
|
|
|
function onTap(ev) {
|
|
transform.rx = 1;
|
|
transform.angle = 25;
|
|
|
|
clearTimeout(timer);
|
|
timer = setTimeout(function () {
|
|
resetElement();
|
|
}, 200);
|
|
requestElementUpdate();
|
|
logEvent(ev.type);
|
|
}
|
|
|
|
function onDoubleTap(ev) {
|
|
transform.rx = 1;
|
|
transform.angle = 80;
|
|
|
|
clearTimeout(timer);
|
|
timer = setTimeout(function () {
|
|
resetElement();
|
|
}, 500);
|
|
requestElementUpdate();
|
|
logEvent(ev.type);
|
|
}
|
|
|
|
resetElement();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|