这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 绘制购物车抛物线动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上 demo
一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛物线本质上就是向右和向上方向各有一个速度(就上面的 demo 而言),向右的速度匀速,向上的速度递减,减到 0 后再反方向递增,元素的 left 和 top值随时间递增而改变,元素运动轨迹就是抛物线,这个思路不具备通用性,实现也比较复杂,放弃了。
之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗。
思路我再捋一捋,抛物线函数 y = a*x*x + b*x + c , 其中 a 不等于 0,a、b、c 为常数。x、y 为抛物线经过的坐标;a 决定抛物线的开口方向,a>0 开口向上,a<0 开口向下。很明显天猫的抛物线开口向下,a 还决定开口的大小,值越小开口越大,抛物线越平顺,反之抛物线越陡。所以 a 的值可以自定义,等于是已知两个坐标(起点和终点坐,即元素 left、top 值),求两个未知数,初中的数学就学过,二元二次方程。
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
a 已知,代入两个已知坐标[x1, y1][x2, y2] 可以得出 b、c 的值,x 和 y 的对应关系有了。
不管抛物线开口向上还是向下,元素在水平方向上移动的速度不变,即 left 值匀速改变,可以设定抛物线运动时间 t,元素在水平方向上的速度为 speedx =(x2 - x1)/t,设置一个定时器,每 30ms 执行一次,left 值在每次定时器执行后的值为当前的 x = speedx * 定时器已执行时长,再代入函数 y = a*x*x + b*x + c 得到 top 值,由于这一切的计算都建立在起点坐标平移到原点(终点也随之平移)的基础上,所以最终设置运动元素的 left/top 值的时候必须将起点元素的初始 left/top 值加上。具体请 F12 查看 demo 代码。
主要代码:
- /**
- * js抛物线动画
- * @param {[object]} origin [起点元素]
- * @param {[object]} target [目标点元素]
- * @param {[object]} element [要运动的元素]
- * @param {[number]} a [抛物线弧度]
- * @param {[number]} time [动画执行时间]
- * @param {[function]} callback [抛物线执行完成后回调]
- */
- var parabola = function(config){
- var b = 0,
- INTERVAL = 15,
- timer = null,
- x1,y1,x2,y2,originx,originy,diffx,diffy;
- this.config = config || {};
- // 起点
- this.origin = $(this.config.origin)||null;
- // 终点
- this.target = $(this.config.target)||null;
- // 运动的元素
- this.element = $(this.config.element)||null;
- // 曲线弧度
- this.a = this.config.a || 0.004;
- // 运动时间(ms)
- this.time = this.config.time || 1000;
- this.init = function(){
- x1 = this.origin.offset().left;
- y1 = this.origin.offset().top;
- x2 = this.target.offset().left;
- y2 = this.target.offset().top;
- originx = x1;
- originy = y1;
- diffx = x2-x1;
- diffy = y2-y1,
- speedx = diffx/this.time;
- // 已知a, 根据抛物线函数 y = a*x*x + b*x + c 将抛物线起点平移到坐标原点[0, 0],终点随之平移,那么抛物线经过原点[0, 0] 得出c = 0;
- // 终点平移后得出:y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1)
- // 即 diffy = a*diffx*diffx + b*diffx;
- // 可求出常数b的值
- b = (diffy - this.a*diffx*diffx)/diffx;
- this.element.CSS({
- left: x1,
- top: y1
- })
- return this;
- }
- // 确定动画方式
- this.moveStyle = function(){
- var moveStyle = 'position',
- testDiv = document.createElement('div');
- if('placeholder' in testDiv){
- ['','ms','moz','webkit'].forEach(function(pre){
- var transform = pre + (pre ? 'T' : 't') + 'ransform';
- if(transform in testDiv.style){
- moveStyle = transform;
- }
- })
- }
- return moveStyle;
- }
- this.move = function(){
- var start = new Date().getTime(),
- moveStyle = this.moveStyle(),
- _this = this;
- timer = setInterval(function(){
- if(new Date().getTime() - start > _this.time){
- clearInterval(timer);
- _this.element.css({
- left: x2,
- top: y2
- })
- typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
- return;
- }
- x = speedx * (new Date().getTime() - start);
- y = _this.a*x*x + b*x;
- if(moveStyle === 'position'){
- _this.element.css({
- left: x+originx,
- top: y+originy
- })
- }else{
- if(window.requestAnimationFrame){
- window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');
- }else{
- _this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';
- }
- }
- },INTERVAL)
- return this;
- }
- this.init();
- }
来源: http://www.phperz.com/article/17/0709/332163.html