[转]JavaScript与元素间的抛物线轨迹运动

Posted on 2017-01-17 15:55  Rh九尾鱼  阅读(410)  评论(0)  编辑  收藏  举报

　　在张鑫旭的博客看到这个抛物线的小动画，觉得很感兴趣，转载一下方便研究~

　　原文地址：http://www.zhangxinxu.com/wordpress/?p=3855

　　在页面上添加元素的位移动画，除了视觉效果（这是次要的），还有个作用就是视觉引导（重点）。举个大家可能见过的例子，选择商品的时候，我们希望商品飞到边缘或角落的购物车里，作用是：一来告知放在购物车里成功了，二来让用户知道购物车在哪里。

　　要让页面元素抛物线运行，很简单。套用抛物线函数即可。公式如下：

y = a*x*x + b*x + c

　　(x, y)就是点坐标，在网页上可以理解为相对于页面左上角的偏移像素大小，然后，套用求参，即可得到当前位置的抛物线函数。

　　现在，我们的任务变成了求解：a, b, c三个参数。

　　3个参数需要3个条件才能完全求解。

　　由于我们要实现元素A到元素B的抛物线运动，因此，我们可以指定两个点的坐标位置，也就是知道了2个条件，那第3个条件呢？

　　了解抛物线函数的同学应该知道，a可以近似理解为弧度，曲率。在我们实现效果的时候，这个是应该要可控的。——你总不可能把元素抛到天宫号上再掉下来吧。在网页上，一般都是起伏不大的抛物线（否则会出屏幕之外）。

　　因此，我们可以把a作为一个参数常量。

　　于是，我们任务就变成了，已知参数a，以及两个点的坐标，求该抛物线函数。

y = a*x*x + b*x + c
↓
y1 = a * x1*x1 + b*x1 + c;
y2 = a * x2*x2 + b*x2 + c;
↓
a已知，求b, c

　　为了简化我们的计算求解，以及与我们高中时候的函数坐标匹配，我们可以以移动元素的初始位置作为坐标轴的中心（网页默认的坐标系左上角是中心，x轴向右，y轴向下，与高中的坐标轴不一样）。

　　我们限定了抛物线经过中心点(0, 0), 代入y1 = a * x1*x1 + b*x1 + c可以得到c = 0, 于是b = (y2+ a*x2*x2) / x2, 带入指定的坐标，就可以计算出b的大小，于是，抛物线函数就出来了。

　　演示地址：http://www.zhangxinxu.com/study/201312/js-parabola.html

 

　　该抛物线方法名为funParabola，您可以根据自己的喜好修改，参数以及基本使用如下：

var myParabola = funParabola(element, target, options);

　　

关于myParabola:
直接执行funParabola方法是不会产生运动的。因为，实际上funParabola执行返回的是一个对象。包含如下四个方法：

  1. mark 在目标元素以及移动元素上通过data-center自定义属性标记当前的中心坐标，如-234, -345. 此方法主要用在demo中，方便测试与预览用的。实际可能用途不大。
  2. position 重新获取元素的位置。在元素相对位置改变的时候，此方法很有用。否则会出现计算误差的情况。例如，页面布局是自适应或者响应式的，浏览器宽度变小了，两元素之间的距离变化了，此时需要执行下position，存储新的坐标位置。
  3. move 触发抛物线运动。
  4. init 初始化方法。实际上就是连续调用position, mark, move3个方法。

demo点击页面任意位置触发抛物线运动就是这么触发的：

/* 元素 */
var element = document.getElementById("element"), 
    target = document.getElementById("target");
// 抛物线元素的的位置标记
var parabola = funParabola(element, target).mark();
// 抛物线运动的触发
document.body.onclick = function() {
    element.style.marginLeft = "0px";
    element.style.marginTop = "0px";
    parabola.init();
};

参数说明：

  • element表示移动的元素，例如demo中的小球球。原生DOM节点
  • target表示目标元素。例如demo中的椭圆形的大便池。原生DOM节点
  • options为可选参数。各个API名称以及含义如下：
    • speed 表示每帧移动的像素大小，每帧（对于大部分显示屏）大约16~17毫秒。默认大小是166.67。也就是默认10px/ms.
    • curvature 可以近似理解为抛物线的开头大小，也就是曲率。正数表示开口向下。默认大小是0.001. 数值越大，开头越小，弧度越高。因为web页面动辄大小几百像素，因此，曲率值较小。
    • progress 表示抛物线运动过程中的回调，支持两个参数，x, y，表示当前的坐标，您可以根据这些坐标值做一些特殊的处理。
    • complete 表示抛物线运动结束后的回调。

其他说明：

  1. 可选参数speed不是指x轴的位移，也不是y轴位移，而是抛物线特定坐标的切线距离。利用切线公式：y'=2ax+b就可以计算出x轴这一帧应该移动的距离。形成奔向目的地的运动效果。
  2. funParabola方法不依赖任何JS框架。您可以大胆使用。
返回顶部