-- W e l c o m e t o N o k e y _ b l o g --

天猫收藏五角星的抛物线效果,模仿了一下

11月 26 2014
html  js

其实这个效果造就看到过,但是没有太在意,今天决定亲自实践一下( 点击下面的小图标试试吧 ):

###一、嗯,先分析分析:

这个效果从视觉上来说,是一个 抛物线轨迹 ,而做前端页面效果无非就是 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 ,但通过一系列演算(感觉像回到了高三,幸好哥的物理还不错),我发觉斜拋运动并不符合 可以设定时间的动画 ,然后我就想为何不把它抽象成更一般的匀加速运动呢?而且,在匀变速运动中,可以把速度分解为 水平速度垂直速度 ,分别对应 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