w3ctech

简单的模仿一下天猫收藏按钮那个红色星星的运动效果

一、嗯,先分析分析:

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

  1. 首先在文档里面插入一个 Clone 元素,也就是克隆一个需要进行效果变换的元素;
  2. 然后用 getBoundingClientRect 获取起始元素的位置,设置 lefttop 属性;
  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 ,但通过一系列演算(感觉像回到了高三,幸好哥的物理还不错),我发觉斜拋运动并不符合 可以设定时间的动画 ,然后我就想为何不把它抽象成更一般的匀加速运动呢?而且,在匀变速运动中,可以把速度分解为 水平速度垂直速度 ,分别对应 lefttop ,也就是在在水平方向做 匀速运动 ,垂直方向做 初速度不为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

Nokey

w3ctech微信

扫码关注w3ctech微信公众号

共收到2条回复

  • 赞个

    最后的图真心喜欢

    回复此楼
  • 哈哈,谢谢,最后的图纯属娱乐

    回复此楼