一、嗯，先分析分析：

这个效果从视觉上来说，是一个 抛物线轨迹 ，而做前端页面效果无非就是 JS 、 CSS ，CSS我就不考虑了，那么用JS做动画有一个不可或缺的东西，就是 缓动函数 ，它会让元素属性按照一定的规律进行动画变换，我之前做过一个 飞图 的效果，类似于 百度图片 里点击图片收藏的那个飞图效果，有兴趣的同学可以试一下 Baidu Image Effect。这样大体思路就确定了：

1. 首先在文档里面插入一个 Clone 元素，也就是克隆一个需要进行效果变换的元素；
2. 然后用 getBoundingClientRect 获取起始元素的位置，设置 left 、 top 属性；
3. 使用 JS 根据缓动函数进行动画。

二、可以动手了：

首先是Clone元素的样式：

#clone_ball{
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    color:#2095F0;
    cursor:pointer;
    z-index: 9999;
    font-size: 16px;
}

然后我就想我是否能够根据我做的 飞图 效果来做这个，因为这两个的 建模 思想都是一样的，在 飞图 里面，我抽象出一个 飞机 对象，而每个被点击的图片就是 乘客 ，行为触发是这样的：每当点击图片，都会有一个飞机来接这位乘客，然后运 送到 目的地，这里的运送就是动画的过程了，那么我主要写缓动函数就行了，但是由于时间和一些额外的因素，我用了 原生JS 写了这个动画，而且jQuery的animate加载自定义缓动函数没怎么接触过，所以就用原生吧！

三、构建物理模型：

那么在这里遇到的最大困难就是 建模 了，起初我并不是这么想的，而是想用数学的思想，用抛物线的顶点式 y = a(x-h)^2 + k ，来解出一个方程式，奈何坐标变换、求根推算了半天，没算出来。然后想到为何不用物理的方式来解决，但是 物理建模 对于接触不多的我来说也不是很简单的，一开始我想把它抽象成 斜拋运动 ，众所周知，不管“斜拋”、“平抛”还是怎么抛，它的重力加速度都是一定的 G ，但通过一系列演算（感觉像回到了高三，幸好哥的物理还不错），我发觉斜拋运动并不符合 可以设定时间的动画 ，然后我就想为何不把它抽象成更一般的匀加速运动呢？而且，在匀变速运动中，可以把速度分解为 水平速度 和 垂直速度 ，分别对应 left 和 top ，也就是在在水平方向做 匀速运动 ，垂直方向做 初速度不为0的匀减速直线运动 （要注意方向！）

分解完运动，就可以根据已知条件求解运动函数了，也就是所谓的 缓动函数 （花最多时间的也就是这里了＝.＝）。求解过程大家自己去尝试吧，我就简单的说一下垂直方向的匀减速直线运动：

• 已知条件：以设定的最大高度 H ，垂直方向上的位移 v_dis ，已设定的总时间 time
• 需求解变量：初速度 v2 ，加速度 G
• 最后根据 s=vt-1/2at^2 就OK了

四、创建对象（总免不了要面向对象，哈哈）：

我把这个对象的名字取名为： Baseball （当然你也可以取名 Football、Basketball。。。），直接上代码：

function Baseball(opt){
        // The plane will fly from START to END
        this.start = opt.start;
        this.end = opt.end;

        // Start & End Coordinate
        this.start_x = 0;
        this.start_y = 0;
        this.end_x = 0;
        this.end_y = 0;

        // Horizontal distance & Vertical distance
        this.h_dis = 0;
        this.v_dis = 0;

        // The Initial speed of Horizontal & Vertical
        this.v1 = 0;    // Horizontal
        this.v2 = 0;    // Vertical

        // Motion duration
        this.time = opt.time;

        // G
        this.G = 0;

        // The maximum height of vertical motion
        this.H = 0;

        // The moving clone Ele
        this.ball = document.createElement('i');

    };
    Baseball.prototype.init = function(){

    };
    Baseball.prototype.set_v1 = function(){

    }
    Baseball.prototype.set_v2 = function(){

    };
    Baseball.prototype.coo_x = function(t){

    };
    Baseball.prototype.coo_y = function(t){

    };
    Baseball.prototype.move = function(callback){

    };

五、来看一下效果：

这是我的 Blog，最近才搭建好，我还没做优化和响应 ＝.＝，先将就看吧，第一篇文章就是，点击那个 Github 图标就可以看到

Nokey

扫码关注w3ctech微信公众号