js实现拖动缓动效果
话不多说，先上效果，一个体验非常好的拖拽缓动的效果，让页面提升一个档次。
这个效果看似很简单，到也困惑了很长时间，为什么别人写出来的拖拽体验为什么这么好？
直到我自己实现了以后，才发现，原来我想的实现方式不对。接下来，我通过简短的几句话，来提供这个功能的实现思路。
首先，我们要明白，我们鼠标拖拽是在一个2d平面上拖拽
2d平面只有x轴和y轴，而且获取的拖拽值也是基于平面的像素获取的。所以，我们第一步，先通过鼠标事件来获取到当前的拖拽的长度像素。
首先，绑定鼠标按下事件，来获取到鼠标基于浏览器窗口左上角的xy平面二维坐标。
然后，绑定move事件，在move事件回调内获取到鼠标拖拽的坐标，和按下坐标相减，求出拖拽的距离。
然后，我们需要通过一定比例，将拖拽的像素转换为旋转角度
我这里设置的比例是，
鼠标横向拖拽10像素，那模型沿3d的Y轴坐标就旋转5度，
鼠标纵向拖拽10像素，模型沿3d世界的X轴坐标旋转1度，并且还设置了范围，即沿x轴旋转再-45度到45度之间
function onDocumentMouseMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDownX) * 0.5;
targetRotationY = Math.min(Math.max((targetRotationOnMouseDownY - (mouseY - mouseXOnMouseDownY) * 0.1), -45), 45); //拖拽后的目标位置
}
上面获取到目标角度，重点来了，如何实现惰性旋转呢？
通过上面思路，我们知道了目标角度，那么直接设置目标角度，肯定就没有这种想要的效果了，那么如何实现这种惰性效果呢？
接下来，我们需要一个专门实现动画的requestAnimationFrame方法，这个方法是闲时运行，最大根据性能能够达到60帧每秒，有好多小伙伴感觉一直递归运行会不会卡顿，或者影响性能。那是你多虑了，这个方法会根据当前页面性能进行减帧，保证页面流畅运行。
我们有了这个以后，然后做什么呢，就是用来实现缓动，在每一帧里面，获取到目标角度和当前角度的角度差，然后每一次只选择总进度的百分之10 ，然后你会发现选择离目标角度越近，越慢，体验效果也是非常的棒。
而且在运行中，角度也会无限制的接近目标角度，当前demo是通过css3d来实现的：
function animate() {
requestAnimationFrame(animate);
rotateY += (targetRotationX - rotateY) * 0.1;
rotateX += (targetRotationY - rotateX) * 0.1;
box.style.transform = 'rotateY(' + rotateY + 'deg)';
item.style.transform = 'rotateX(' + rotateX + 'deg)';
}
案例全部代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>css3d翻转</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
perspective: 1000px;
}
.item {
width: 50vw;
height: 50vh;
transform: rotateX(-50deg);
perspective: 5000px;
transform-style: preserve-3d;
}
.box {
background: #abb9c5;
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: relative;
}
.font,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50vh;
background: #4cae4c;
backface-visibility: hidden;
}
.back {
background: #62ebff;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<!--item 可以触发翻转的区域-->
<div class="item">
<!--box 可以翻转的容器-->
<div class="box">
<!--font 默认显示的正面-->
<div class="font">正面</div>
<!--back 背面-->
<div class="back">背面</div>
</div>
</div>
</body>
<script>
var targetRotationX = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownX = 0;
var targetRotationOnMouseDownY = 0;
var mouseX = 0;
var mouseY = 0;
var mouseXOnMouseDownX = 0;
var mouseXOnMouseDownY = 0;
var box = document.querySelector('.box');
var item = document.querySelector('.item');
var rotateY = 0;
var rotateX = 0;
init();
animate();
function init() {
// EVENTS
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
}
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
mouseXOnMouseDownX = event.clientX;
mouseXOnMouseDownY = event.clientY;
targetRotationOnMouseDownX = targetRotationX;
targetRotationOnMouseDownY = targetRotationY;
}
function onDocumentMouseMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDownX) * 0.5;
targetRotationY = Math.min(Math.max((targetRotationOnMouseDownY - (mouseY - mouseXOnMouseDownY) * 0.1), -45), 45); //拖拽后的目标位置
}
function onDocumentMouseUp() {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentTouchStart(event) {
event.preventDefault();
if (event.touches.length === 1) {
mouseXOnMouseDownX = event.touches[0].pageX;
mouseXOnMouseDownY = event.touches[0].pageY;
targetRotationOnMouseDownX = targetRotationX;
targetRotationOnMouseDownY = targetRotationY;
}
}
function onDocumentTouchMove(event) {
event.preventDefault();
if (event.touches.length === 1) {
mouseX = event.touches[0].pageX;
mouseY = event.touches[0].pageY;
targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDownX) * 0.5;
targetRotationY = Math.min(Math.max((targetRotationOnMouseDownY - (mouseY - mouseXOnMouseDownY) * 0.1), -45), 45); //拖拽后的目标位置
}
}
function animate() {
requestAnimationFrame(animate);
rotateY += (targetRotationX - rotateY) * 0.1;
rotateX += (targetRotationY - rotateX) * 0.1;
box.style.transform = 'rotateY(' + rotateY + 'deg)';
item.style.transform = 'rotateX(' + rotateX + 'deg)';
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript 事件处理、鼠标拖动效果实现方法详解
先看看要拖动的层(模拟窗口)的效果图吧. 要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动.窗口: 复制代码 代码如下: <div id="win"> <div id="win_header"></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标
-
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n
-
JS拖动鼠标画出方框实现鼠标选区的方法
本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作为上传头像时裁切选择图片,在头像裁切中使用广泛,鼠标在图片上拖动拉出一个方框,这个方框就代表着选区的功能,目前网页上已流行的一种操作.主要是依赖于JavaScript代码来实现. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
-
比较精简的Javascript拖动效果函数代码
拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } function drag(o,s) { if (typeof
-
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
js 鼠标拖动对象 可让任何div实现拖动效果
js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){ var d=document;if(!a)a=window.event; if(!a.pageX)a.pageX=a.clientX; if(!a.pageY)a.pageY=a.clientY; var x=a.pageX,y=a.pageY; if(o.setCapture) o.setCapture();
-
鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox
table拖动(兼容Firefox 3.5/IE6),固定表格宽度 table拖动(兼容Firefox 3.5/IE6),固定表格宽度 watch_dog){ o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0)); return; } var t=a.clientX-lastX;out.innerHTML=t; if(t>0) {//right if(parseInt(o.parentNode.parentNode.cells[
-
js实现悬浮窗效果(支持拖动)
经常可以看到大部分的官网有右侧悬浮在线客服.今天来写写! 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js悬浮窗代码(支持拖动)</title> <meta name="descriptio
-
js实现图片拖动改变顺序附图
在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style> .img-div img { width:200px; heig
-
js实现可拖动DIV的方法
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如