OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

创建自定义的jQuery补间动画运动函数及其实现的数学原理


分享到
分类 大话编程   关键字 分享   发布 newghost  1429888963890
注意 转载须保留原文链接,译文链接,作者译者等信息。  
在jQuery 1.4.2中,默认提供了提供了两种动画补间效果, 线性和摆动运动曲线:
但我们需要使用复杂一些的运动效果,比如让元件按照双曲线或抛物线运动趋势改变时,这两个函数就显得明显不够了。
不过这实现起来并不复杂,只需要按照相应的数学公式,添加自定义的easing补间动画效果函数即可。
比如,现在要让网页上的元件按照 y = x^4 的曲线运动,运行趋势为先缓后急。

jQuery1.4的linear和swing的动画实现代码是这样的,最新版的jQuery做了改进,只使用了一个参数p,但不容易看出各个参数的作用,因此这里使用了一个比较原始版本。

jQuery.extend({
    ……
    easing: {
        linear: function( p, n, firstNum, diff ) {
            return firstNum + diff * p;
        },
        swing: function( p, n, firstNum, diff ) {
            return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
        }
    },
    ……
});

要实现这个运动趋势,首先需要定义一些参数。

t:time, b: begin, c: change, d: duration

t: current_time  当前时间
b: start_value   初始位置值(比如x轴运行时)
c: end_value     change in position (单位时间内的改变值)
d: total_time    持续时间

对应jQuery中就是这样的

jQuery.easing.method(
    null†,
    current_time,
    start_value,
    end_value,
    total_time)

第一个参数不是必要的,只是为了兼容jQuery,jQuery自带的两个函数linear和swing没有用到最后一个参数。

我们再来看一看 y = x^4 的位置与时间相关的几何曲线:



x 轴代表时间t (单位缩放为1)
y 轴代表距离

加上修正系数c和b,速度和初始位置: y = c*x^4 + b;
因为 x = t/d,即当前时间除以持续时间,最大值为 1
则公式变为: y = c*(t/d)^4 + b; 
套到jQuery中最终公式为则可变成函数:

jQuery.easing['easeInQuint'] = function(p, t, b, c, d) {
    return c * Math.pow (t/d, 4) + b;
};

//应用: 将当前页面按照easeInQuint运动趋势滚动到项部

$('html, body').animate({
    scrollTop: 0
}, {
    duration : 500
  , easing   : 'easeInQuint'
})


上面的动画其实不太明显,下面这个动画就比较复杂了,可以将最顶部的导航栏实现类似弹簧移动的效果,直接粘到console中即可运行(按F12打开)


jQuery.easing['easeOutBounce'] = function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
}

$('.navbar.navbar-inverse').animate({
    top: 200
}, {
    duration : 1000
  , easing   : 'easeOutBounce'
})

有一个jQuery插件把很多常用的动画效果补间公式都实现了,可以查看: http://gsgd.co.uk/sandbox/jquery/easing/

更详细的英文讲解,可参考此文[Flash AS3版]: http://www.robertpenner.com/easing/penner_chapter7_tweening.pdf




社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  2. 6款基于Node.JS的开源内容管理和静态网站生成系统
  3. NativeScript的竞争者React Native:又一个用JavaScript写原生iOS应用的项目
  4. 2015年度开发者调查:JS最流行;ObjC工资最高;最想学Android
  5. Session劫持与Session-ID的安全长度
  6. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  7. 编写高性能HTML网页应用
  8. Image Lazy Load:那些延时加载图片的开源插件(jQuery)
  9. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  10. 使用Node.JS监听文件夹变化
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 大话编程
  1. AngularJS的启动引导过程
  2. 史上最全的基于HTML5开源JavaScript游戏引擎列表
  3. Ruby和NodeJS结合使用:Async Server And Fiber
  4. 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
  5. Sortable极小的可拖放排序分组库;支持AngularJS,React,Meteor
  6. JavaScript中的$$(*)代表什么和$选择器的由来
  7. javaScript 依赖管理
  8. JavaScript代码组织结构良好的5个特点[reuqire.js]
  9. 怎样用纯HTML和CSS更改默认的上传文件按钮样式
  10. 今天我去面试, 受打击了:你是学 .net 的吧?

 关键字 - 分享
  1. 六款互联网人不容错过的软件神器
  2. 【示例教程】如何通过leadtools读取二维码中的中文
  3. 【更新】Windows网络守门人UserLock更新至v9.6,可通过Webhooks获取实时登录通知
  4. 2015年度开发者调查:JS最流行;ObjC工资最高;最想学Android
  5. MyEclipse文本编辑器
  6. MyEclipse WebSphere开发教程:WebSphere 7安装指南(四)
  7. 【重大更新】DevExpress v17.2震撼发布|附下载
  8. 招专业APP,封装上架 ,马甲包上架
  9. 干货满满!20篇IntelliJ IDEA使用技巧整理!
  10. 【更新】支持多种格式音视频的本地.NET组件Audio Sound Recorder for .NET 更新至v9.0.0.0

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号