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();
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果.分享给大家供大家参考.具体如下: 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单,并非使用了Mootools,但效果却和使用了Mootools差不多,动画效果平滑,操作舒服,给菜单增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下: <!DOCTYPE html

  • js弹性势能动画之抛物线运动实例详解

    抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动 在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的. 通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的.-

  • js实现商品抛物线加入购物车特效

    本文实例为大家分享了js实现商品抛物线加入购物车动画代码,供大家参考,具体内容如下 parapola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * under MIT license */ var funParabola = function(element, target, options)

  • JS高仿抛物线加入购物车特效实现代码

    1. 简介 要想让你的购物车有种高大上的感觉,加入特效的功能是必不可少的. 2. 实现思路 设置一些简单的样式 模拟把它添加到购物车中,数量增加 从点击的位置开始动画,结束动画 3. 代码实现 CSS代码 咱们给它设置一些简单的样式,让它显得不是那么的太low .flyer { display: block; width: 50px; height: 50px; border-radius: 50px; position: fixed; margin-left: 50px; z-index: 9

  • js绘制购物车抛物线动画

    天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛物线本质上就是向右和向上方向各有一个速度(就上面的demo而言),向右的速度匀速,向上的速度递减,减到0后再反方向递增,元素的left和top值随时间递增而改变,元素运动轨迹就是抛物线,这个思路不具备通用性,实现也比较复杂,放弃了. 之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗

  • 基于jquery fly插件实现加入购物车抛物线动画效果

    先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一.插件下载 插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr

  • Android贝塞尔曲线实现加入购物车抛物线动画

    本文实例为大家分享了Android贝塞尔曲线实现加入购物车抛物线动画的具体代码,供大家参考,具体内容如下 先上图看效果 步骤: a.确定动画的起终点b.在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹c.设置属性动画,ValueAnimator插值器,获取中间点的坐标d.将执行动画的控件的x.y坐标设为上面得到的中间点坐标e.开启属性动画f.当动画结束时的操作 获取控件在屏幕中的绝对坐标: int[] parentLocation = new int[2]; mRLayout.getLoc

  • JS抛物线动画实例制作

    在做无人便利小程序的项目中,某一天产品说要像某产商产品学习,给添加购物车增加抛物线小球动画.好吧,产品你最大,做! 先给大家看下效果图 分析 这种不固定起始位置的动画,自然不能用 gif 图,所以只能用原生代码实现 那我们有什么工具来实现动画呢? 小程序提供了 JS API createAnimation 来创建动画 CSS animation 工具有了,我们再看一下什么是抛物线. 这里我们只讨论水平抛物线,水平抛物线从数学原理上来说就是[水平匀速.垂直加速的运动],转换成代码层面就是在动画效果

  • vue实现购物车抛物线小球动画效果的方法详解

    本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,

  • Android把商品添加到购物车的动画效果(贝塞尔曲线)

    当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

  • ichart.js绘制虚线、平均分虚线效果的实现代码

    ichart.js绘制虚线.平均分虚线效果的实现代码 var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], datasets : [ { name : '优秀率', color:'#1dbcfe', line_width:4, value : [80,75,92,62,0] } ] } Data[1]

  • three.js绘制地球、飞机与轨迹的效果示例

    对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果 这个缩小后的图片,下面我们来看下近距离的动态效果.. 效果比较简陋,需要后期再处理... 下面进入主题,代码篇.. HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

  • JS实现自定义状态栏动画文字效果示例

    本文实例讲述了JS实现自定义状态栏动画文字效果.分享给大家供大家参考,具体如下: 在IE浏览器中打开,显示动态文字的效果,主要浏览器左下角的文字. <body onload="stack();"> <script type="text/javascript"> var statusText="自定义动画状态栏文字"; var out=""; var pause=100; var animateWidth

随机推荐