文章标题

概述前面的废话最近由于公司的项目进入关键期，忙的昏天黑地，都没有时间陪伴我心爱的球球妈和小球球，心里愧疚很多。同时，blog也有很多时间没有更新了，对不起自己在年初定下的多写一些东西的目标，今晚终于能够再拿起书本看一章书，非常开心平静。出处写这篇文章主要是看司徒正美大神的《javascript框架设计》 前面的空话

最近由于公司的项目进入关键期，忙的昏天黑地，都没有时间陪伴我心爱的球球妈和小球球，心里惭愧很多。同时，blog也有很多时间没有更新了，对不起自己在年初定下的多写1些东西的目标，今晚终究能够再拿起书本看1章书，非常开心平静。

出处

写这篇文章主要是看司徒正美大神的《JavaScript框架设计》想到的1些东西，记录下来，以便以后使用，说来惭愧，1个书看了大半年还没有读完。
不过这其实不妨碍这是1本前端工程师都应当读1下的好书。其中很多框架级的知识点和理论都非常值得推重和学习。
今天看到动画引擎1节，同时想起在项目中的各种动画利用，发现确切有很多共鸣。

动画的思路

实现动画不过就是两种思路，1种用Js不断的改变元素的位置和大小，形状等等参数，到达快速展现，以欺骗人眼实现动画的效果，另外一种是使用CSS3提供的动画函数（translate,animetion）。

在我们的项目早期由于不熟习CSS3的动画，同时也对CSS3的兼容性抱有1定疑问，我们采取了1个小巧的Js动画库，veLocity.Js,结果虽然能用，但是也是非悲剧，在最近的Chrome阅读器上，Js动画会留下拖影，不得已，只能转而使用第2种方案―CSS3动画。

CSS3 动画库

现在业界有很多优秀的CSS3动画库，比如 animation,这个动画库提供了很多经常使用的动画，使用起来也很方便。

不过要是需要使用1些动画库里没有的CSS3动画效果，就需要用到自己的缓动公式和组合型CSS3动画。

缓动公式

缓动公式实际上是animation属性中对动画履行样式的说明，它的样式名称为animation-time-function，这个函数有多种值，ease，linear，ease-in，ease-out，ease-in-out，cubic-bezIEr具体这些属性值是甚么，可以参看animation-time-function属性，所谓缓动公式，就是使用cubic-bezIEr参数，这个参数允许自定义1个时间曲线，1共需要传入4个值,分别代表[p1x,p1y,p2x,p2y],这两个点加上[0,0],[1,1],组成的4个点，代表了贝塞尔曲线的走势。

下图是默许值的贝塞尔曲线。

有些网站提供可视化贝塞尔曲线的可视化调剂和导出，这里或这里。

下面的代码来自司徒正美的mass框架动画模块，特地提取出来，以备后续查找，有兴趣的同学可以将以下map中的数据放到可视化网站中便可看到map中的贝塞尔曲线。

var easingMap = {        "linear": [0.250,0.250,0.750,0.750],"ease": [0.250,0.100,1.000],"easeIn": [0.420,0.000,1.000,"eaSEOut": [0.000,0.580,"easeInOut": [0.420,"easeInQuad": [0.550,0.085,0.680,0.530],"easeInCubic": [0.550,0.055,0.675,0.190],"easeInQuart": [0.895,0.030,0.685,0.220],"easeInQuint": [0.755,0.050,0.855,0.060],"easeInSine": [0.470,0.745,0.715],"easeInExpo": [0.950,0.795,0.035],"easeInCirc": [0.600,0.040,0.980,0.335],"easeInBack": [0.600,-0.280,0.735,0.045],"eaSEOutQuad": [0.250,0.460,0.450,0.940],"eaSEOutCubic": [0.215,0.610,0.355,"eaSEOutQuart": [0.165,0.840,0.440,"eaSEOutQuint": [0.230,0.320,"eaSEOutSine": [0.390,0.575,0.565,"eaSEOutExpo": [0.190,0.220,"eaSEOutCirc": [0.075,0.820,0.165,"eaSEOutBack": [0.175,0.885,1.275],"easeInOutQuad": [0.455,0.515,0.955],"easeInOutCubic": [0.645,0.045,"easeInOutQuart": [0.770,0.175,"easeInOutQuint": [0.860,0.070,"easeInOutSine": [0.445,0.550,0.950],"easeInOutExpo": [1.000,"easeInOutCirc": [0.785,0.135,0.150,0.860],"easeInOutBack": [0.680,-0.550,0.265,1.550],"custom": [0.000,0.350,0.500,1.300],"random": [Math.random().toFixed(3),Math.random().toFixed(3),Math.random().toFixed(3)]    }   

更多内容请查看zakwu的小站

总结

以上是内存溢出为你收集整理的文章标题全部内容，希望文章能够帮你解决文章标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。