正文

javascript惯性缓动实现

_ihhu  2022-02-13  241

关键词：

思路：取手指最后一段时间在屏幕上划动的平均速度ｖ，让ｖ按一个递减函数变化，直到不能移动或ｖ＜＝０

/** 
 * 这里只实现垂直滚动 
 */  
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);  
});

javascript--缓动运动+轮播图

上效果：实现步骤：最重要的是运动公式！！！1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>总有人比你富有，却比你更聪明更努力！</title>6<styletype="text/css">7/*css重置*/8*{9margin:0;10padd 查看详情

requestanimationframe之缓动的应用

...l()，用着用着就成为习惯，并没有遇到什么不妥之处。习惯性的操作往往容易让一个人拒绝尝试一些其他的方法。现在的方法用得好好的，没事干啥找其他法子。摈弃习惯性操作的思想，没事还真得去尝试一些新方法，不然整天... 查看详情

将 jQuery 缓动 easeInExpo 函数重写为普通的 javascript 和 css

】将jQuery缓动easeInExpo函数重写为普通的javascript和css【英文标题】：RewritejQueryeasingeaseInExpofunctionintoplainjavascript&css【发布时间】：2021-11-2217:54:39【问题描述】：所以我有这个很棒的小代码块，我正在尝试在没有jQuery的情况下将... 查看详情

原生js实现缓动返回顶部

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{ padding:0; margin:0; } #box{ width:1366px; he 查看详情

js实现缓动效果-让div运动起来

vartween={linear:function(t,b,c,d){returnc*t/d+b;},easeIn:function(t,b,c,d){returnc*(t/=d)*t+b;},strongEaseIn:function(t,b,c,d){returnc*(t/=d)*t*t*t*t+b;},strongEaseOut:function(t,b,c,d){returnc*((t=t 查看详情

前端javascript实现导航栏筋斗云效果特效

实现效果：　　实现效果如下图所示实现原理：什么是筋斗云效果：这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。实现思路：鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距... 查看详情

用缓动函数模拟物理动画

用缓动函数模拟物理动画 1、缓动函数简介 <1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上也就是说用普通的UIView的Animation是无法直接实现缓动函数 <2&g... 查看详情

window.requestanimationframe与tween.js配合使用实现动画缓动效果

window.requestAnimationFrame概述window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。注意: 如果想得到连... 查看详情

滑动抽屉中的缓动动画

】滑动抽屉中的缓动动画【英文标题】：Easeanimationinslidingdrawer【发布时间】：2014-07-2902:12:44【问题描述】：我想使用插值器（DecelerateInterpolator）减慢SlidingDrawer的打开速度这可能吗。我想实现缓动动画。finalAnimationslowDown=AnimationU... 查看详情

wpf中listbox滚动时的缓动效果

原文:WPF中ListBox滚动时的缓动效果上周工作中遇到的问题：常规的ListBox在滚动时总是一格格的移动，感觉上很生硬。所以想要实现类似Flash中的那种缓动的效果，使ListBox滚动时可以很流畅。修改模板里的动画效果是一... 查看详情

Actionscript 3.0 - 缓动拖拽

】Actionscript3.0-缓动拖拽【英文标题】：Actionscript3.0-dragandthrowwitheasing【发布时间】：2011-02-2502:52:54【问题描述】：我在Flash中创建了一个地图，我希望有一个类似这样的平滑运动：http://www.conceptm.nl/我已经开始了，但我无法将它... 查看详情

tween.js的动画效果

...用tween.js语法需要哪些条件来做运动　1.初始位置2.目标点缓动函数　　1.linear 匀速　　2.Quad二次方缓动效果　　3.Cubic三次方缓动效果　　4.Quart四次方缓动效果　　5.Quint五次方缓动效果　　6.Sin 查看详情

fairygui&unity使用动效功能实现血条ui扣血与加血的缓动效果(代码片段)

...个进度条组件，作为血条。bar是实际血量条DownBar是扣血缓动背景图层UpBar是加血缓动背景图层LowBar是低血量变色（和控制器配合，本文不讲）n11组合是血量参考线发布到Unity。参考代码if(hpValue<hpBar.value)/ 查看详情

tween缓动动画(代码片段)

在讲tween类之前，不得不提的是贝塞尔曲线了。首先，贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多，例如PS中的钢笔工具，firework中的画笔等等。无论运用在哪里，它... 查看详情

javascript与ecmascript

我们经常习惯性认为Javascript就是ECMAScript，但其实不是这样的。ECMAScript是一种脚本在语法和语义上的标准。主要包括：语法、类型、语句、关键字、保留字、操作符、对象。它与浏览器之间，没有半毛钱关系。而Javascript是基于EC... 查看详情

利用tween.js算法生成缓动效果

swiftui手势(gesture)进阶:实现任意视图的长按惯性加速行为

...(Gesture)来帮忙。比如：能不能在任意View上实现一个长按惯性加速的行为呢？如上所示：我们为圆形添加了长按惯性加速的手势，没有用到任何UIKit的内容，完全是SwiftUI原生代码。在本篇博文中您将学到以下内容：如何在一个视... 查看详情

h5扇形(代码片段)

...动画过程等。requestAnimationFrame()的优势它告诉浏览器某些JavaScript代码将要执行动画，浏览器可以再运行某些代码后进行适当的优化，十分精确，没有css3的局限问题，可对所有属性操作，动画缓动效果可以依据缓动公式，十分丰... 查看详情