使用JS实现鼠标拖拉物体的惯性效应动画

Drag & flick with mouse 物理世界中，向一个方向快速拖动一个圆球并松手，圆球将经历一个加速、惯性运动，最后停止的一个完整过程。本例使用JS模拟这样的物理运动过程。

js，物理

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3987
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * drag
 */

// ----- Particle ----- //

function Particle(elem) {
    this.element = elem;
    this.positionX = 0;
    this.dragPositionX = 0;
    this.velocityX = 0;
    this.friction = 0.93;
    this.accelX = 0;
    this.isDragging = false;
}

Particle.prototype.render = function() {
    // position particle with transform
    this.element.style.transform = 'translateX(' + this.positionX + 'px)';
};

Particle.prototype.update = function() {
    this.applyDragForce();
    this.integrate();
};

Particle.prototype.integrate = function() {
    this.velocityX += this.accelX;
    this.velocityX *= this.friction;
    this.positionX += this.velocityX;
    // reset acceleration
    this.accelX = 0;
};

Particle.prototype.applyForce = function(force) {
    this.accelX += force;
};

Particle.prototype.applyDragForce = function() {
    if (!this.isDragging) {
        return;
    }
    // change the position to drag position by applying force to acceleration
    var dragVelocity = this.dragPositionX - this.positionX;
    var dragForce = dragVelocity - this.velocityX;
    // add in wobble
    // dragForce *= 0.2;
    this.applyForce(dragForce);
};

// ----- demo ----- //

var particle;

document.addEventListener('DOMContentLoaded', init, false);

function init() {
    // create particle
    var particleElem = document.querySelector('.particle');
    particle = new Particle(particleElem);
    logger = document.querySelector('.logger');
    // 
    document.body.addEventListener('mousedown', onMousedown, false);
    // start animation
    animate();
}

var dragForce = 0;

function animate() {
    particle.update();
    particle.render();
    requestAnimationFrame(animate);
}

// ----- mouse ------ //

var dragStartX;
var particleDragStartX;
var isDragging = false;

function onMousedown(event) {
    event.preventDefault();
    // get drag start positions
    dragStartX = event.pageX;
    particleDragStartX = particle.positionX;
    particle.isDragging = true;
    isDragging = true;
    setDragPositionX(event);
    window.addEventListener('mousemove', onMousemove, false);
    window.addEventListener('mouseup', onMouseup, false);
}

function onMousemove(event) {
    setDragPositionX(event);
}

function setDragPositionX(event) {
    var moveX = event.pageX - dragStartX;
    // set dragPosition
    particle.dragPositionX = particleDragStartX + moveX;
}

// stop dragging
function onMouseup() {
    particle.isDragging = false;
    window.removeEventListener('mousemove', onMousemove, false);
    window.removeEventListener('mouseup', onMouseup, false);
}

编译

CSS

HTML

Drag & flick with mouse 物理世界中，向一个方向快速拖动一个圆球并松手，圆球将经历一个加速、惯性运动，最后停止的一个完整过程。本例使用JS模拟这样的物理运动过程。

js，物理

编辑器支持Emmet

快捷键

Drag & flick with mouse 物理世界中，向一个方向快速拖动一个圆球并松手，圆球将经历一个加速、惯性运动，最后停止的一个完整过程。本例使用JS模拟这样的物理运动过程。

js，物理

简单Verlet算法JavaScript物理引擎

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：