与我们合作
我们专注：网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务：网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案
有一个品牌项目想和我们谈谈吗?
您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话，让我们听到您的声音
您也可通过下列途径与我们取得联系：
地 址: 深圳.龙岗区大运软件小镇11栋3楼
电 话: 138 2888 4598 / 138 0880 9053
网 址: http://www.appvx.cn
快速提交您的需求 ↓
没有加速度的线性运动
数学公式为
f(x)=x
js实现如下
AnimationTimer.makeLinear = function () { return function (percentComplete) {return percentComplete; };};
逐渐加速的缓入运动
数学公式为
f(x)=x2
js实现如下
AnimationTimer.makeEaseIn = function (strength) { return function (percentComplete) {return Math.pow(percentComplete, strength*2); };};
逐渐减速的缓出运动
数学公式为
f(x)=1-(1-x)2
js实现如下
AnimationTimer.makeEaseOut = function (strength) { return function (percentComplete) {return 1 - Math.pow(1 - percentComplete, strength*2); };};
缓入缓出运动
数学公式为
f(x)=x-sin(x*2π)/(2π)
js实现如下
AnimationTimer.makeEaseInOut = function () { return function (percentComplete) {return percentComplete - Math.sin(percentComplete*2*Math.PI) / (2*Math.PI); };};
弹簧运动
数学公式为
f(x)=(1-cos(x*Npasses * π) * (1-π))+x
Npassed表示运动物体穿越中轴的次数。
js实现如下
AnimationTimer.makeElastic = function (passes) { passes = passes || 3; return function (percentComplete) { return ((1-Math.cos(percentComplete * Math.PI * passes)) * (1 - percentComplete)) + percentComplete; };};
弹跳运动
Nbounces表示运动物体被弹起的总次数，
弹起的次数为偶数的时候，数学公式为：
f(x)=(1=cos(x * Nbounces* π) * (1-π))+x
弹起的次数为奇数的时候，数学公式为：
f(x)=2-(((1-cos(x * π * Nbounces)) * (1-x)+x)
js实现如下
AnimationTimer.makeBounce = function (bounces) { var fn = AnimationTimer.makeElastic(bounces); return function (percentComplete) {percentComplete = fn(percentComplete);return percentComplete <= 1 ? percentComplete : 2-percentComplete; }; };
css3缓动效果
css3默认提供了几种缓动效果，分别是linear,ease,ease-in,ease-out,ease-in-out。
JS Bin
除了上面的几种效果，可以通过transform和animation扩展自己需要的效果。animate.css提供了更多的效果支持，比如弹跳运动的实现如下
@keyframes bounce {0%, 20%, 53%, 80%, 100% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}40%, 43% {-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -30px, 0);transform: translate3d(0, -30px, 0);}70% {-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);}90% {-webkit-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0);}}.bounce {-webkit-animation-name: bounce;animation-name: bounce;-webkit-transform-origin: center bottom;-ms-transform-origin: center bottom;transform-origin: center bottom;}
专业的网站建设公司，深正互联，如您有网站营销需求，请您关注我们，或者致电13828884598
本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...
