Javascript 动画初探(原理)
作者:mingcheng 来源:gracecode.com 发布时间:2009-02-06 15:53:00
哲学上有种说法,“运动是绝对的,静止是相对的”。我们在编写各样的效果时,时常会碰到动画。下面的章,将讨论动画的原理以及实现。
动画,简而言之就是物体在某时间段内,不断的改变自身的属性。这些属性有可能是位置、大小等。为了方便说明,在这里统一认定为位置(position)。
那么,动画就有了两个基本的变量,时间和位置。用直角坐标系来表示,将 x 轴定为时间(time),将 y 轴定为位置(position),就可以得到这样的坐标系
从这个坐标系可以获得更多的信息,比如动画运行的时间段(x 轴的区间)、动画开始试物体的位置(begin)以及结束时的位置(final)。
然后,动画的基本关系可初步抽象出来。时间(duration)和位置(position)存在函数关系
position = f(time)
在这里同时引入 fps (帧率)这个概念。fps 简单的说,就是一秒钟内物体变化了几帧。它抽象成坐标中的元素,就是 x 轴的粒度。
fps 是个常量(比如通常电影的 fps 为 25,即每秒 25 帧),通过 fps 以及时间段(duration),则可以计算出这个时间段内物体位移了几帧(frames),公式如下
frames = (duration/1000)*fps
上述公式中,时间段(duration)以毫秒计算,即一毫秒等于一千分之一秒。
综合起来,我们要获得某个时间点的位置时,就可以利用 当前时间点(time)、时间段(duration、x 轴的区间),以及开始的坐标(begin)和结束的坐标(final)等因素来完成,那么可以将第一个的公式细化成
position = f(time, begin, final, duration)
同时,根据 fps 计算出的帧数,则可以得知某动画在这个时间段内运行了几次。而此函数产生的曲线,则可以说明在指定时间段内,物体的运动情况。如曲线比较抖,则说明物体运动比较快,反之则慢。
例如上述函数图的 45 度曲线,如果不考虑区间因素则可以写成
position = time
然后加上函数区间,则用函数表示
postion = final * time / duration + begin
那么就可以说明物体随着时间的改变,位置进行匀速递增的运行。
至此,元素的动画问题,这时就可以抽象成具体的数学问题。仅通过改变函数的公式,就可以改变物体动画的运行效果。
附,相关参考资源:
继续阅读:Javascript 动画初探(实现)
猜你喜欢
- 用XMLHTTP Post Form时的表单乱码有两方面的原因——Post表单数据时中文乱码;服务器Response被XMLHTTP不正确编
- 分页显示是页面常用技术,可用下列代码来实现:<%page=Request.QueryString("page&q
- 生活形态(Life-Style)的概念源自社会学与心理学,六十年代即有学者正式引用到市场营销领域,并运用其心理影射与多维度等特质,着力解释人
- 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS。两个最有用的项目将是 Child子和Adjac
- 一、使用css缩写使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描
- 抽象工厂模式Abstract Factory Pattern是什么抽象工厂模式是一种创建型模式,它提供了一种创建一系列相关或相互依赖对象的最
- 你已经在上面取出w打头记录的例子中看到了LIKE的用法。LIKE判定词是一个非常有用的符号。不过,在很多情况下用了它可能会带给你太多的数据,
- 在数据库中,字符型的数据是最多的,可以占到整个数据库的80%以上。为此正确处理字符型的数据,对于提高数据库的性能有很大的作用。在字符型数据中
- 按照本文操作和体会,会对sql优化有个基本最简单的了解,其他深入还需要更多资料和实践的学习: 1. 建表: 代码如下:creat
- “模板化”——这也许是视觉设计师通常最不愿意听到的概念,先入为主的会产生“批量生产”、“体力活儿”、“限制思维”等概念,总之都比较负面。但为
- 不得不承认,傲游在用户体验方面是做得比较好的,所以它的用户群非常大。也正因为如此,它的某些不好的特性也造成了开发人员不可忽略的浏览器兼容问题
- 1.建立Recordset对象Dim objMyRstSet objMyRst=Server.CreateObject(&ldquo
- 这个javascript农历日历,万年历代码网上看到的,很不错,功能齐全,值得收藏!功能介绍:动态显示当前世界各国各时区时间,显示当前农历,
- 之前在一个web系统的设计中,和另一个设计师讨论,“保存”和“取消”按钮该怎么设计。我的观点是,保存是比取消更常用的按钮,也是用户的主要目的
- CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色、大小、距离等静
- 假设有一个表,结构如下:mysql> CREATE TABLE `a` ( `id
- 测试:IE6、IE7、FF3.014突发奇想的效果,主要突出构思,效果还比较粗糙,好好创意一下,应该可以引申出一些比较有新意的图片切换效果。
- 有过相关经验的朋友都知道,Jscript的效率毕竟有限,在数组中查找数据时如果用常规的算法来做执行起来会很慢。例如在一个含500个字符串的d
- <% set conn=server.createobject("adodb.connect
- Request.ServerVariables("Url") 返回服务器地址Request.ServerVariable