過去 6 時間、質問に対する答えを見つけようとしましたが、運がありませんでした。
Web サイトにドラッグ可能な div がいくつかあります。ドラッグしている間は、空気圧がかかって少し押されるようなリアルな効果が欲しいので、ドラッグすると少し揺れます。
効果がどのように機能するかの例の画像は、ここで見ることができます:慣性加速効果(効果が何と呼ばれるかわかりません)
これらの単語をさまざまな組み合わせで「Javascript、加速度、慣性、スイング、物理学、回転、移動、空気圧、摩擦、ぶら下がり」で検索しましたが、何も見つかりませんでした。
ただし、この JSFiddle[ 1 ] にも同様の効果があることがわかりました (以下のリンク)。また、要素をドラッグしてマウスを横に移動すると、実現したい効果がある Google Gravity[2] (以下のリンク) にも出会いました。
[ 1 ] 私が見つけた JSFiddle: www.jsfiddle.net/gVCWE/150/
[ 2 ] Google 重力: www.mrdoob.com/projects/chromeexperiments/google-gravity/
ここで自分で効果を作成しようとしました：
var fn = {
activeElm : null,
pos : {},
transPos : {},
startPos : null,
moveSteps : new Array(15),
init : function(){
var self = this;
document.addEventListener('mousedown', function(e){self.handleStart.call(self, e);});
document.addEventListener('mousemove', function(e){self.handleMove.call(self, e);});
document.addEventListener('mouseup', function(e){self.handleStop.call(self, e);});
},
handleStart : function(e){
if(fn.hasClass('dragme', e.target)){
fn.activeElm = e.target;
e.preventDefault();
fn.startPos = {x : e.pageX, y : e.pageY};
var lastPos = {x : fn.activeElm.getAttribute('data-posX'), y : fn.activeElm.getAttribute('data-posY')};
if(lastPos['x'] && lastPos['y']){
fn.transPos = {x : parseFloat(lastPos['x']), y : parseFloat(lastPos['y'])};
}else{
fn.transPos = {x : 0, y : 0};
}
fn.pos = {x : fn.transPos['x'], y : fn.transPos['y']};
fn.loop();
}
},
handleMove : function(e){
if(!fn.activeElm)
return;
fn.pos = {x : fn.transPos['x'] + e.pageX - fn.startPos['x'], y : fn.transPos['y'] + e.pageY - fn.startPos['y']};
},
handleStop : function(e){
if(!fn.activeElm)
return;
fn.activeElm.setAttribute('data-posX', fn.pos['x']);
fn.activeElm.setAttribute('data-posY', fn.pos['y']);
fn.activeElm = null;
},
addStep : function(move){
var arr = fn.moveSteps;
arr = arr.slice(1, arr.length);
arr.push(move);
fn.moveSteps = arr;
},
loop : function(){
if(!fn.activeElm)
return false;
fn.requestAnimFrame(fn.loop);
fn.addStep(fn.pos['x']);
fn.animate();
},
animate : function(){
var arr = fn.moveSteps;
var rotaSpeed = arr[arr.length-1] - arr[0];
// The Math.min- and max are there, so we can be sure the angle won't rotate more than 90° and -90°
var rotation = 'rotate(' + Math.max(Math.min(90, rotaSpeed), -90) + 'deg)';
if(!fn.activeElm)
return;
var obj = fn.activeElm.parentNode.style;
obj.webkitTransform = obj.MozTransform = obj.msTransform = obj.OTransform = obj.transform = 'translate(' + fn.pos['x'] + 'px, ' + fn.pos['y'] + 'px) ' + rotation;
},
requestAnimFrame : function(callback){
return window.requestAnimationFrame && window.requestAnimationFrame(callback) ||
window.webkitRequestAnimationFrame && window.webkitRequestAnimationFrame(callback) ||
window.mozRequestAnimationFrame && window.mozRequestAnimationFrame(callback) ||
window.oRequestAnimationFrame && window.mozRequestAnimationFrame(callback) ||
window.msRequestAnimationFrame && window.msRequestAnimationFrame(callback) ||
window.setTimeout(callback, 1000 / 60);
},
hasClass : function(classname, obj){
return new RegExp(' ' + classname + ' ').test(' ' + obj.className + ' ');
}
}
fn.init();
- 私がすること: 過去 15 回のマウスの移動中にマウスがどれだけ移動したかを計算し、回転角度をその値に設定します。そのため、マウスが速く動くと、15 回のマウスの動きの間のスパンが大きくなり、ボックスの回転が大きくなります。マウスがゆっくり動くと、スパンが小さくなり、ボックスの回転が以前ほど大きくなくなります。
ただし、特にマウスを速く動かしている場合は、結果がリアルに見えません。関数 Math.sin は、div が移動するときに回転をより現実的に「容易にする」ために必要だと思います。この物理を計算する方法がわからないので、アイデア、情報源、例、式など、効果の名前を知っている人がいれば、それは素晴らしいことです.
//よろしくお願いします