javascript 惯性缓动实现

思路:取手指最后一段时间在屏幕上划动的平均速度v,让v按一个递减函数变化,直到不能移动或v<=0

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById(‘parent‘);
var content = document.getElementById(‘content‘)
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置  

/**
 * 用于缓动的变量
 */
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false; // 是否停止缓动  

parent.addEventListener(‘touchstart‘, function(e) {
    lastY = startY = e.touches[0].pageY;  

    /**
     * 缓动代码
     */
    lastMoveStart = lastY;
    lastMoveTime = e.timeStamp || Date.now();
    stopInertiaMove = true;
});
parent.addEventListener(‘touchmove‘, function(e) {
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(‘px‘, ‘‘);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + ‘px‘;
    lastY = nowY;  

    /**
     * 缓动代码
     */
    var nowTime = e.timeStamp || Date.now();
    stopInertiaMove = true;
    if(nowTime - lastMoveTime > 300) {
        lastMoveTime = nowTime;
        lastMoveStart = nowY;
    }
});
parent.addEventListener(‘touchend‘, function(e) {
    // do touchend
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(‘px‘, ‘‘);
    var contentY = (parseInt(contentTop) + moveY);
    // 设置top值移动content
    content.style.top =  contentY + ‘px‘;
    lastY = nowY;  

    /**
     * 缓动代码
     */
    var nowTime = e.timeStamp || Date.now();
    var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //最后一段时间手指划动速度
    stopInertiaMove = false;
    (function(v, startTime, contentY) {
        var dir = v > 0 ? -1 : 1; //加速度方向
        var deceleration = dir*0.0006;
        var duration = v / deceleration; // 速度消减至0所需时间
        var dist = v * duration / 2; //最终移动多少
        function inertiaMove() {
            if(stopInertiaMove) return;
            var nowTime = e.timeStamp || Date.now();
            var t = nowTime-startTime;
            var nowV = v + t*deceleration;
            // 速度方向变化表示速度达到0了
            if(dir*nowV < 0) {
                return;
            }
            var moveY = (v + nowV)/2 * t;
            content.style.top = (contentY + moveY) + "px";
            setTimeout(inertiaMove, 10);
        }
        inertiaMove();
    })(v, nowTime, contentY);
}); 
时间: 2024-10-30 16:08:54

javascript 惯性缓动实现的相关文章

聚焦滚动和惯性缓动

今天我们来看看滚动和惯性缓动: 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll <div id="parent" style="overflow:scroll;> <div id='content'>内容区域</div> </div> Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现 思路:对比手指在屏幕上移

HTML5手机开发——滚动和惯性缓动

1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll <div id="parent" style="overflow:scroll;>    <div id='content'>内容区域</div></div> Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现 思路:对比手指在屏幕上移动前后位置变化改变内容

Javascript缓动动画原理

匀速动画的原理:   盒子本身的位置  +  步长 缓动动画的原理:    盒子本身的位置  +  步长 (不断变化的) 封装代码: 1 function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少 2 clearInterval(obj.timer); 3 obj.timer = setInterval(function() { 4 // 计算步长 动画的原理 盒子本身的位置 + 步长 5 var step = (target - obj.offset

缓动函数requestAnimationFrame用法

// shim layer with setTimeout fallbackwindow.requestAnimFrame = (function(){  return  window.requestAnimationFrame ||    window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||    window.oRequestAnimationFrame ||    window.msRequestA

网站建设中前端常用的jQuery+easing缓动的动画

网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery.easing.1.3.js jquery.easing.compatibility.js 该插件美化排版后是130行左右,压缩后更小.这个插件弥补了jquery里面的动画效果的不足,是其动画效果更加强悍. X轴表示时间,Y轴表示的是动画效果的变化.查看这些曲线变化,更利于掌握这个插件的效果. 插件支

animation js控制 缓动效果

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>缓动效果</title></head><body><div id="btn" style='position:absolute;'>按钮</div><script type="text/javascript"

jQuery Tween缓动算法

参考:Javascript Tween算法及缓动效果 做了个简单的插件,以后慢慢重构: /** * * 描述:javascript缓动 * jQuery Tween算法:算法来源:http://www.robertpenner.com/easing/ * @author:xuzengqiang * @since :2015-1-23 11:17:51 * 两种比较复杂的没有收录进来 * Elastic:指数衰减的正弦曲线缓动: * Back:超过范围的三次方缓动((s+1)*t^3 - s*t^

前端积累---------------各种缓动函数集合

因为工作中涉及到图表的制作,为了图表的展示更加生动,添加一些缓动函数,发现一个不错的网站,给出了很多缓动函数,而且有多种语言的实现:http://www.robertpenner.com/easing/. 上面网址中给出的的缓动函数,需要四个参数,也就是t:当前时间.b:起始数值.c:变化的数值.d:耗时.但实际上我们可以化简,把b.c.d便成为常亮儿不必每次调用缓动函数的时候都传入4个参数. 下面给出一些javascript实现的缓动函数,进行了参数,调用时只需要传入当前进度即可: 1 var

tweenjs缓动算法使用小实例

这里的tweenjs不是依托于createjs的tewwnjs,而是一系列缓动算法集合.因为本身是算法,可以用在各个业务场景中,这也正是总结学习它的价值所在.tweenjs代码详情: 1 /* 2 * Tween.js 3 * t: current time(当前时间): 4 * b: beginning value(初始值): 5 * c: change in value(变化量): 6 * d: duration(持续时间). 7 * you can visit 'http://easing