JavaScript动画知多少?

  今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户。

JS如何制造出动画效果?

  结合浏览器提供的 setInterval 或 setTimeout API,高频改变DOM元素的一些属性,即可创造一个肉眼可见的动画效果。一个看起来非常流畅的JS动画除了需要良好的变换算法外,与其执行宿主也是非不开的。程序写得再好,如果浏览器过于老旧,电脑CPU性能低下,也会出现卡顿,甚至卡死。

  执行一个动画函数对于浏览器来说是个苦差,设置动画一帧为多长时间才能既流畅又不损耗性能呢?浏览器不会傻到进行一个DOM操作,就去渲染一次页面。它会把一个周期内所有的DOM操作整合起来,统一进行一次渲染。这个周期大约在16.7ms左右,不同浏览器间会有几毫秒的差异。SetTimeout的第二个参数设置为1000/60是比较合乎情理的做法。不过了解过SetTimeout运行机制的都会清楚,这个时间并不可靠,其根据实际情况会有些许甚至相当大的延迟。那么有没有这样一个API?我不想知道你浏览器到底多久渲染一次,反正你渲染的时候给我的动画执行一帧就行了。答案是有,requestAnimationFrame,可以让函数随着浏览器渲染执行,并且执行时机是可靠的。注意,这个方法在现在浏览器及IE10+才被支持。

  现在可以封装起一个简单的requestAnimationFrame,下面的例子中将会使用到它。

window.requestAnimFrame = (function(){return  window.requestAnimationFrame       ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame    ||function( callback ){window.setTimeout(callback, 1000 / 60);};
})();

  更加详细的封装可以在张鑫旭的博客中看到:张鑫旭:requestAnimFrame。下面让我们继续。

动画函数的编写

  有了requestAnimationFrame,下面该考虑一下如何让写动画函数了。一般来说我们会给出一个毫秒级的during值,限制这个动画必须要在这个时间内完成。下面以实现一个小球从离页面左侧100px处匀速运动到800px处为例,编写一个动画函数:戳我查看DEMO。

            var ele = document.getElementById("block");var start = Date.now();//获取动画开始的时间。var during = 1000; //此动画要在1秒内执行完。var p=0;//动画完成度 从0-1;requestAnimationFrame(function f(){if(p>=1){ ele.style.left="800px";}//如果发现动画已经执行完,将元素置到终点。else{p=(Date.now()-start)/during;ele.style.left=100+700*p+"px"; //从100px开始,匀速向右移动,共移动700px;
                    requestAnimationFrame(f);}})

  上面函数中有一个关键变量:p,即percentage,我们可以称它为动画的完成度,它是根据当前时间计算得出的,并且从动画开始后,会从0~1匀速渐变。当其为1时,表示整个动画执行完毕。在这个函数中,让p乘以要运动的长度700,便会得到一个0-700匀速变化的值,将其加上开始的100,便可模拟小球从100px处匀速移动到800px处。

  设想一下,假如上面红色标出的运动方程改为“ele.style.left=100+700*p*p+"px"”呢?p以二次方渐增,小球向右移动的速度会越来越快。是的,稍加修改便可实现一个匀加速运动的小球。

  下面,我们就是要针对p来做文章。

Tween算法及缓动效果

   下面我将列举一些常用的缓动算法,根据这些算法去修改上面匀速运动函数的运动方程,即可实现很赞的动画效果。

  1. 2次方缓动:  p*p
  2. 3次方缓动:  p*p*p
  3. 4次方缓动:  p*p*p*p
  4. 5次方缓动:  p*p*p*p*p
  5. 正弦曲线缓动:  Math.sin(p*Math.PI/2)
  6. 指数曲线缓动:  Math.pow(2,10*(p-1))
  7. 圆形曲线缓动:  Math.sqrt(1-(p-1)*(p-1))
  8. 超范围三次方:  p*p*(2.70158*p-1.70158)

  验证一下吧,比如我现在想实现一个小球向右运动,有一个向左蓄力的动画,我只要把第一个demo的运动方程改为“ele.style.left=100+700*p*p*(2.70158*p-1.70158)+"px"”就行了,看看效果吧:戳我查看DEMO。

  其实,每种缓动算法都可以进化为三种缓动方式,分别为ease-in(先慢后快),ease-out(先快后慢),ease-in-out(先慢后快再慢)。

  以2次方缓动为例,它本身就是一个匀加速的过程,所以ease-in就是p*p。其ease-out为-(p*(p-2))。关于缓动方式,像阳光一样在他的博客中有更加详细的解释:JavaScript动画、运动算法详细解释与分析。

  接下来要放大招了,关于缓动的整合DEMO,戳我吧。

JS动画可以做什么?

  除了上面的缓动效果,利用常见的数学公式还可以实现一些周期性运动效果,例如小球匀速圆周运动,小球匀速简谐振动等,如果感兴趣请猛戳DEMO。

  那么JS动画可以做什么呢?这就需要发挥我们的个人想象力了,上面的DEMO大部分都在操控单一的属性,比如left,让DOM元素发生位移。事实上在运动方程中,元素的任何style都可以被渐变。试想一下,设置一个DOM元素的opacity从0~1进行2次方缓动,便是一个简单的jQuery fadeOut函数;让一个DOM元素高度从无到有,便是一个简单的jQuery slideDown函数。更加不要忘记的是,在动画过程中不仅仅可以操作一项属性,这为动画带来了无限的可能性,事情变得越来越有趣了:DEMO:一个从小到大变化的球。

  再试想一下,使用CSS3属性,例如box-shadow,transform,作出的效果必将会更加绚丽。

总结

  上面提到使用CSS3属性,其实如果这个浏览器支持CSS3属性的话,其实可以考虑完全使用CSS3实现一个动画。CSS3自有Animation动画属性,可以简单快捷地实现酷炫的动画效果,并且可以启用GPU加速。美中不足的是仅现代浏览器支持,而JS实现动画胜在可以兼容低版本浏览器。

  作者于2015年6月19号增加)上面将JavaScript动画与CSS3动画的比较并不是特别严谨,更严谨的说法请移步我的博客:实现了一个百度首页的彩蛋——CSS3Animation简介。

  动画仅仅是JS操作DOM魅力之冰山一角,而数学与计算机总是能碰撞出耀眼的火花。继续学习JS吧,这是一门神奇的语言,同时也应该了解一些数学知识,往往能够为解决事情带来捷径。

  (完)

转载于:https://www.cnblogs.com/dongtianee/p/4552868.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/460112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Socket网络编程--简单Web服务器(6)

本来是想实现ssl连接的,但是弄了好久都不成功,就索性不做了,等以后有能力再做了。所以这一小节就是本次的最后一节了。就简单的说几个注意点。 1.加个配置文件 使用单例模式,使用一个类,该类保存一些信息,例…

postgresql调优

http://blog.pgaddict.com/posts/performance-since-postgresql-7-4-to-9-4-pgbench硬件和系统配置操作系统Ubuntu13.04系统位数64CPUIntel(R) Core(TM)2 Duo CPU内存4G硬盘Seagate ST2000DM001-1CH164测试工具PostgreSQL-9.1.11测试工具工具名称pgbench数据量200W(…

操作系统--进程状态切换以及cpu调度(转)

http://www.cnblogs.com/coder2012/p/3204730.html 进程的状态转换 进程在运行中不断地改变其运行状态。通常,一个运行进程必须具有以下三种基本状态。 进程状态 执行态run:进程正在使用CPU等待态wait:进程正在等待I/O完成,不在使…

oracle打开当前表的编辑,oracle sqlplus常用命令

Oracle sqlplus 常用命令1、查看当前库的所有数据表:SQL> select TABLE_NAME from all_tables;select * from all_tables;SQL> select table_name from all_tables where table_name like ‘u’; TABLE_NAME———————————————default_auditing_o…

在Exchange 2010中重建Exchange安全组

问题:有时候,重新安装Exchange 2010会corrupt掉Exchange安全组,或者出现重复的组。用户在这种情况下会出现访问被拒的情况。分析:我们可以删掉这些安全组,然后最这些安全组进行重建:当你prepare ad的时候,由于OtherWel…

1023:坑爹的黑店

题目描述 今天小明去了一个风景如画的地方散心,但是自己带的饮料喝完了,小明口渴难耐,见不远处有家小商店,于是跑去买饮料。小明:“我要买饮料!”店主:“我们这里有三种饮料,矿泉水1…

php判断电脑浏览器模拟手机访问网页,在PC上测试移动端网站和模拟手机浏览器的5大方法...

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp。一、Chrome*浏览器 chrome模拟手机总共有四种方…

带弹出列表的EditText

最近做的一个Andriod里有一个这个要求,一个东西需要输入,但同时可以在列表直接选择。看到这个需求,瞬间想到了QQ的登录界面,那个账号输入的控件正式我所需要的。 这个账号输入框右边有一个按钮,点击可以显示一个下拉列…

SICP第三章题解

目录 SICP第三章题解ex3-17ex3-18ex3-19队列ex3-21ex3-22ex3-24ex3-253.4 并发:时间是一个本质问题ex3-383.4.2 控制并发的机制ex3-39ex3-41ex3-42串行化、序列化ex3-44串行化的实现ex3-47死锁3.5 流ex3-50序列加速器SICP第三章题解 标签(空格分隔&#…

linux cp 目录不存在自动创建,linux – 如果不存在,如何cp文件和创建目录?

我想将svn存储库中的修改文件复制到另一个目录,同时保留其目录结构.在阅读awk和xargs manpage之后,我找到了一种方法来获取更改的文件名,如下所示:$svn status -q | awk { print $2 } | xargs -d \\n -I {} cp {} /tmp/xen/但问题是以这种方式不保留目录结构,我想复…

ios 中 KVO

KVO(Key value observe)键值观察,是ios中的一种核心的概念,简单的理解为当某一个对象A(或者多个对象)要想监听对象的B的一个或者多个属性发生变化时,就是用这种机制。 KVO的优点 当某个对象有个…

获取win7时区所有信息

打开命令行工具: tzutil /l# 或者输入到文件中tzutil /l > data.txt 1 # -*- utf-8 -*-2 3 """获取win7所有时区信息,并写入到sql语句中4 5 Usage: python data.py -f data.txt -o data.sql6 """7 8 if __name__ &quo…

linux kill命令信号,Linux kill 命令详解

Linux kill 命令很容易让人产生误解,以为它仅仅就是用来杀死进程的。我们来看一下 man page 对它的解释:kill - send a signal to a process.从官方的解释不难看出,kill 是向进程发送信号的命令。当然我们可以向进程发送一个终止运行的信号&a…

VSTO学习笔记(二)Excel对象模型

原文:VSTO学习笔记(二)Excel对象模型上一次主要学习了VSTO的发展历史及其历代版本的新特性,概述了VSTO对开发人员的帮助和效率提升。从这次开始,将从VSTO 4.0开始,逐一探讨VSTO开发中方方面面,本人接触VSTO…

zen-coding for notepad++,前端最佳手写代码编辑器

zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器。 zen-Coding插件支持多种编辑器,如UltraEdit,Notepad等。 温…

red hat linux 远程,Red Hat Linux 远程桌面 – 如何设置

远程访问 RHEL 计算机。运行 RHEL 7.3-8.1 的 Linux 计算机的远程桌面。从任何计算机、平板电脑或移动设备进行访问。立即免费试用!如果您是在家中或在旅途中工作,则可能需要一段时间才能在办公室或在家中访问台式计算机。如果该桌面恰巧在 Linux 操作系…

通过boundingRectWithSize:options:attributes:context:计算文本尺寸

转:http://blog.csdn.net/jymn_chen/article/details/10949279 之前用Text Kit写Reader的时候,在分页时要计算一段文本的尺寸大小,之前使用了NSString类的sizeWithFont:constrainedToSize:lineBreakMode:方法,但是该方法已经被iOS…

H264/AVC视频解码时AVC1和H264的区别

AVC1与H264的区别http://blog.csdn.net/qiuchangyong/article/details/6660253H.264 Video TypesThe following media subtypes are defined for H.264 video.Subtype FOURCC DescriptionMEDIASUBTYPE_AVC1 AVC1 H.264 bitstream without start codes.MEDIASUBTYPE…

Linux命令行显示无效的命令,LINUX 命令ifconfig 无效

在安装完成linux后,进入终端,输入命令行ifconfig,会提示bash: ifconfig: command notfound。这是因为在我们的环境变量里,还没有设置完整变量。如果我们输入/sbin/ifconfig或/usr/bin/gcc就可以执行命令行。为了不输入命令行的完整…

移动后端支持平台Parse将API由Ruby迁移到Go

Charity Majors是移动后端支持平台Parse的工程师。近日,他撰文介绍了他们将API从Ruby迁移到Go的过程。\\2011年,Parse借助Ruby on Rails快速推出了第一个版本。他们用Unicorn作为HTTP服务器,用Capistrano部署代码,用RVM管理环境&a…