JavaScript实现的抛物线运动效果 - 推酷
JavaScript实现的抛物线运动效果
最近做购物车功能，看到天猫上的购物车有元素抛物线运动效果，所以也想凑热闹实现一个。
网上搜索了一下，看了一下张鑫旭的《
》，原理张鑫旭已经讲的很清楚了，多说了也没什么意思，就是数学公式。不过看代码个人觉得有点变扭，那不是我的习惯，所以自己重新写了一个。
先看demo：
如何使用：
运动位移的元素必须设置为 position: absolute ，通过绝对定位控制 left ， top 来实现的；
首先你可以 new 一个对象：
var bool = new Parabola({
el: &#boll&,
offset: [500, 100],
curvature: 0.005,
duration: 3000,
callback: function () {
alert(&完成后回调&)
stepCallback: function (x, y) {
console.log(x, y);
$(&&div&&).appendTo(&body&).css({
&position&: &absolute&,
&top&: this.elOriginalTop + y,
&left&: this.elOriginalLeft + x,
&background-color&: &#CDCDCD&,
&width&: &5px&,
&height&: &5px&,
&border-radius&: &5px&
参数说明：
jQuery||String（选择器）
必须填写的参数，要移动的元素，可以是jQuery对象或选择器
表示移动元素在X，Y轴的偏移位置，设置了targetEl参数后，该参数将失效
jQuery||String（选择器）
终点元素，这时就会自动获取该元素的left、top值，来表示移动元素在X，Y轴的偏移位置；设置了这个参数，offset将失效
运动的时间，默认500毫秒
抛物线曲率，就是弯曲的程度，越接近于0越像直线，默认0.001
运动后执行的回调函数，this指向该对象
stepCallback
运动过程中执行的回调函数，this指向该对象，接受x，y参数，分别表示X，Y轴的偏移位置。
是否自动开始运动，默认为false
重置元素的位置
开始执行动画
.setOptions(options)
重置options参数
先看demo：
(function () {
var _$ = function (_this) {
return _this.constructor == jQuery ? _this : $(_this);
// 获取当前时间
function now() {
return +new Date();
// 转化为整数
function toInteger(text) {
text = parseInt(text);
return isFinite(text) ? text : 0;
var Parabola = function (options) {
this.initialize(options);
Parabola.prototype = {
constructor: Parabola,
* @classDescription 初始化
* @param {Object} options 插件配置 .
initialize: function (options) {
this.options = this.options || this.getOptions(options);
var ops = this.
if (!this.options.el) {
this.$el = _$(ops.el);
this.timerId =
this.elOriginalLeft = toInteger(this.$el.css(&left&));
this.elOriginalTop = toInteger(this.$el.css(&top&));
// this.driftX X轴的偏移总量
//this.driftY Y轴的偏移总量
if (ops.targetEl) {
this.driftX = toInteger(_$(ops.targetEl).css(&left&)) - this.elOriginalL
this.driftY = toInteger(_$(ops.targetEl).css(&top&)) - this.elOriginalT
this.driftX = ops.offset[0];
this.driftY = ops.offset[1];
this.duration = ops.
// 处理公式常量
this.curvature = ops.
// 根据两点坐标以及曲率确定运动曲线函数（也就是确定a, b的值）
//a=this.curvature
/* 公式： y = a*x*x + b*x +
* 因为经过(0, 0), 因此c = 0
* y = a * x*x + b*x;
* y1 = a * x1*x1 + b*x1;
* y2 = a * x2*x2 + b*x2;
* 利用第二个坐标：
* b = (y2+ a*x2*x2) / x2
this.b = ( this.driftY - this.curvature * this.driftX * this.driftX ) / this.driftX;
//自动开始
if (ops.autostart) {
this.start();
* 初始化 配置参数 返回参数MAP
* @param {Object} options 插件配置 .
* @return {Object} 配置参数
getOptions: function (options) {
if (typeof options !== &object&) {
options = {};
options = $.extend({}, defaultSetting, _$(options.el).data(), (this.options || {}), options);
* @param {Number} x x坐标 .
* @param {Object} y y坐标 .
* @return {Object} this
domove: function (x, y) {
this.$el.css({
position: &absolute&,
left: this.elOriginalLeft + x,
top: this.elOriginalTop + y
* 每一步执行
* @param {Data} now 当前时间 .
* @return {Object} this
step: function (now) {
var ops = this.
if (now & this.end) {
// 运行结束
x = this.driftX;
y = this.driftY;
this.domove(x, y);
this.stop();
if (typeof ops.callback === 'function') {
ops.callback.call(this);
//x 每一步的X轴的位置
x = this.driftX * ((now - this.begin) / this.duration);
//每一步的Y轴的位置y = a*x*x + b*x +
y = this.curvature * x * x + this.b *
this.domove(x, y);
if (typeof ops.stepCallback === 'function') {
ops.stepCallback.call(this);
* 设置options
@param {Object} options 当前时间 .
setOptions: function (options) {
this.reset();
if (typeof options !== &object&) {
options = {};
this.options = this.getOptions(options);
this.initialize('parabola', this.options);
start: function () {
var self =
// 设置起止时间
this.begin = now();
this.end = this.begin + this.
if (this.driftX === 0 && this.driftY === 0) {
// 原地踏步就别浪费性能了
/*timers.push(this);
Timer.start();*/
if (!!this.timerId) {
clearInterval(this.timerId);
this.stop();
this.timerId = setInterval(function () {
var t = now();
self.step(t);
reset: function (x, y) {
this.stop();
x = x ? x : 0;
y = y ? y : 0;
this.domove(x, y);
stop: function () {
if (!!this.timerId) {
clearInterval(this.timerId);
var defaultSetting = {
//偏移位置
offset: [0, 0],
//终点元素，这时就会自动获取该元素的left、top，设置了这个参数，offset将失效
targetEl: null,
//运动的时间，默认500毫秒
duration: 500,
//抛物线曲率，就是弯曲的程度，越接近于0越像直线，默认0.001
curvature: 0.001,
//运动后执行的回调函数
callback: null,
// 是否自动开始，默认为false
autostart: false,
//运动过程中执行的回调函数
stepCallback: null
window.Parabola = P
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致附近人在搜什么
分享：你必须知道的H5加速器九大常识！
　　日前，Layabox、Cocos2d-JS、Egret均宣布即将联合各大浏览器和APP发布HTML5(简称H5)加速器。困扰H5产业的性能问题终于得到阶段性解决。在大家纷纷谈论H5加速器时，你最好知道以下常识：　　Q：什么是H5加速器?　　A：用以提高浏览器或APP中H5项目性能的扩展组件。　　Q：H5加速器英文名字?　　A：业界通常采用Runtime这个晦涩的专业词语，当然也有例外，比如Layabox，就采用Laya.player命名　　Q：H5加速器目的是什么?　　A：主要是用于解决H5的兼容性和性能问题　　Q：H5加速器是如何启动的?　　A：在H5游戏运行时，由浏览器等APP通过内置的插件管理器调用加速器插件，对运行中的游戏启动加速，无需额外安装。　　Q：H5加速器为什么能加速?　　A：加速的主要方法，一是GPU渲染加速，二是内置c++实现的高级对象来减少js的调用量。　　Q：H5通过加速器真的能达到APP的性能?　　A：H5和APP，二者在底层对象设计和渲染原理是一样，优化比较好的加速器原则上是可以和APP媲美的，Layabox已经公布了其性能对比视频和测试代码来证明效果。　　Q：H5加速器存在哪些问题?　　A：标准问题，目前存在H5加速器标准不统一，各自为众的问题，H5项目只能调用引擎开发商提供的对应加速器，有一定的约束性。其中Layabox宣称可以为其他项目加速，但效果如何还有待市场检验。　　普及量问题，目前H5加速器的普及依赖浏览器和APP的支持力度和嵌入速度。还达不到所有场所全面覆盖，但这个问题改善速度很快。　　苹果IOS问题，目前采用的插件方案只适合安卓，IOS体系下需要采用内置的方案实现，会导致APP尺寸增加以及加速器更新的新问题，需要产业再寻找新的方案。　　Q：H5加速器的前世今生?　　A：H5加速器目前才进入公众眼界，其实它的历史可以追溯到2000年全球最大的WEB游戏平台可乐吧和Adobe的Flash
player，特别是可乐吧的FancyBox方案和现在的H5加速器方案几乎一模一样，也是通过js调用FancyBox插件的渲染实现了当时惊艳的页游效果。而Layabox的创始人也是可乐吧的创始人，这可能是Layabox号称加速器性能最优的一个原因，这是一个迟到的故事。　　Q：目前已有的H5加速器都有哪些区别?
　　A：目前国内只有三家H5加速器，Layabox的Laya.player通用加速器支持所有H5项目加速。Cocos2d-JS的runtime加速器支持Cocos2d-JS引擎产品加速，Egret的runtime加速器支持Egret引擎产品加速。国外的H5加速器ludei，支持ludei引擎产品加速。问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，最近想用css动画来实现一个点的抛物线运动，我的做法是这样的：
&div class="container"&
&div class="inner"&&/div&
如上面的html，我外层平移X坐标，inner层平移y坐标，然后用贝塞尔曲线，但是出来的抛物线轨迹都非常生硬
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
给你把曲线拉成你想要的变化就好了,加在animation-timing-function上分别对当前元素的translateX跟translateY进行拆分，不用拆到两个元素上。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：更好的工作机会
在100offer，提交一份个人资料，一周内即会有5-10家Top互联网公司主动向你发出邀请。100offer确保你的隐私万无一失，同时Consultant将为你全程提供专业服务。
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
React 中文文档 (v15.6.1)
React-用于构建用户界面的 JAVASCRIPT 库
前端开发进阶课程
从前端小工到 BAT 中高级工程师的必备技能
您的位置： » 分类:
» 文章: JavaScript实现的抛物线运动效果
您可能感兴趣的文章
近期最热文章
- 7,498 - 6,720 - 4,204 - 4,191 - 3,665 - 3,610
关注WEB前端开发公众号