JS实现缓动动画效果
原理如下:
假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样;如果是缓动,每次移动距离不一样。那如何才能不一样呢?很简单,按比例移动就可以。
例如:每次移动剩余距离的一半。
对吧,超容易理解的。
比方说:你和初恋之间距离是64,每秒移动一半,则,你们之间的距离下一秒就是32, 再下一秒就是16,然后8,然后4,然后2,然后1,然后……你们就在一起了。你们在一起的这个过程就是一个典型的先快后慢的缓动运动过程,如下示意图:
用一个简单的公式表示就是:
A = A + (B - A) / 2
点击按钮执行的是下面的backToTop()
方法:
// 滚动到顶部缓动实现
// rate表示缓动速率,默认是2
var backToTop = function (rate) {
var doc = document.body.scrollTop? document.body : document.documentElement;
var scrollTop = doc.scrollTop; var top = function () {
scrollTop = scrollTop + (0 - scrollTop) / (rate || 2); // 临界判断,终止动画
if (scrollTop < 1) {
doc.scrollTop = 0;
return;
}
doc.scrollTop = scrollTop;
// 动画gogogo!
requestAnimationFrame(top);
};
top();
};
其中,代码的核心是:
scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);
scrollTop
表示公式的A, 滚动到顶部滚动高度是0
,因此,上面的0
,实际上就是公式的B, 而公式中的2
表示缓动速率,实际开发的时候是可以灵活调整的,缓动速率范围是1
到无穷大,速率值越小,运动越快。比如说上面的返回顶部效果,我们把缓动速率改成4
,点击下面的按钮感受效果:
点击我执行backToTop(4)
等比例靠近理论上最终只会无穷靠近,并不会真正的相等,也就是动画永远没有结束的时候,所以说需要做一个临界判断,也就是距离小到一定数目的时候,直接等于目标值,并终止动画。例如,上面的返回顶部,就是当距离顶部滚动高度小于1
的时候,直接返回顶部,并终止动画。
if (scrollTop < 1) {
doc.scrollTop = 0;
return;
}
如果项目很多地方使用该算法,每次都写一遍requestAnimationFrame
和边界判断是很啰嗦的,于是,我们可以把算法变个身,例如下面这样:
var _easeout = function(start, end, rate, callback) {
var _end = end;
if (start == end || typeof start != 'number') {
return;
}
end = end || 0;
rate = rate || 2;
var step = function() {
start = start + (end - start) / rate;
if (Math.abs(start - _end) < 1) {
console.log('end');
callback(end, true);
return;
}
callback(start, false);
requestAnimationFrame(step);
};
step();
};
其中:
A
是起始位置;B
是目标位置;rate
是缓动速率;callback
是变化的位置回调,支持两个参数,value
和isEnding
,表示当前的位置值(数值)以及是否动画结束了(布尔值);
于是,我们的返回顶部效果可以这么使用:
var doc = document.body.scrollTop !== undefined ? document.body : document.documentElement;
console.log('start', doc.scrollTop);
$("#back").click(function(){
console.log('start', doc.scrollTop);
_easeout(doc.scrollTop, 500, 2, function(value) {
doc.scrollTop = value;
});
})
});
JS实现缓动动画效果的更多相关文章
- js off 缓动动画
动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式 步长=(目标位置-本身位置)/ ...
- js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- JS基础知识——缓动动画
基于距离的缓动动画 原理:设定起始位置 start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10; 这个10不是固定的,想分成多少份就分成 ...
- jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
- 背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...
- WPF界面设计技巧(7)—模拟电梯升降的缓动动画
原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...
- Windows Phone开发(42):缓动动画
原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...
- 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画
原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
随机推荐
- java Swing组件和事件处理
1.常见的容器 JComponent是 Container 的子类,中间容器必须添加到底层容器中才能够发挥作用, JPanel 面板 :使用jPanel 创建一个面板,再通过添加组件到该面板上面,JP ...
- django----常用功能
request.path_info 获取url地址
- unzip文件解压
1.记录下,遇到.zip的安装包,指定解压到某个地方 格式:unzip 压缩包名.zip -d 存放路径
- 常见的爬虫分析库(4)-爬虫之PyQuery
PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎完全相同. 官方文档:http://pyquery.readthedocs.io/ 安装 1 pip ins ...
- 微信小程序--代码构成---WXML 模板
WXML 模板 从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个 ...
- 使用Bazel构建C/C++项目
目录 前提 基本概念 速查链接汇总 stage1: 一个package, 一个target stage2: 一个package,多个target stage3: 多package,多target st ...
- MVC 添加JS,CSS等版本标签
在cshtml文件标签中添加 asp-append-version="true" <img src="~/images/codedigestlogo.png&quo ...
- CentOS下配置SFTP操作日志
1.修改ssh的配置 vi /etc/ssh/sshd_config 在36行左右修改如下配置 Subsystem sftp /usr/libexec/openssh/sftp-server -l I ...
- Socket.Io+HttpWebRequest 请求Api
Socket 接收代码 <html> <head> <title>Socket Client Demo</title> <script src=& ...
- sdoi2017苹果树
题解: 非常奇妙的一题.. 没有免费操作我都不会$nk$....考试打个暴力就可以走人了 树上有依赖背包问题的正确做法是(为啥我之前学的不是这样的啊) 按照后续遍历做背包 做到一个点的时候 枚举它选不 ...