Javascript中的抛物线 ~ 加入购物车小动画

sarva 发布于2019-08-29 11:09 / 586人阅读

摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。

废话不多说,先上DEMO~
http://jsrun.net/PxKKp?uid=483
再上源码~
https://github.com/Nelson2016...

运行的原理

很简单的一个小特效，接下来来说一下他的原理。

显而易见，这小东西肯定和抛物线肯定有着割不开的情缘啦~

上图！

那么我们将跑速先多带带拿出来看：

首先抛物线嘛~得有自己的方程啊，就像自己的身份证一样。

我们假设抛物线的方程为 y = ax^2 + bx + c。

为了计算方便呢，我们另抛物线经过（0，0）这一点，那么c的值就为0了。

上图即为归零后的坐标系，对称轴直线为 x2 = -b / 2a.

在抛物线方程中，a值得正负代表着抛物线的开口方向，那么a值的绝对值也和抛物线的开口大小有着反比例的关系。那么a值我们即定位一个已知值作为参数传给运动。

到现在为止，y = ax^2 + bx + c;方程中的a值与c之就为已知了

那么抛物线对称轴的x值-x2 在起始点坐标与终点坐标已知的情况下是苛求的，那么x2变为已知量。

通过x2 = -b / 2a即可就出b值，那么整个抛物线方程我们就得出啦~

码代码

1.定义一个全局的对象。

nelsonAddtoCartAnimation{}

2.在nelsonAddtoCartAnimation中我们定义几个值：

a:"",//抛物线系数
b:"",//抛物线系数
c:"",//抛物线系数
startX:"",//起始X坐标
startY:0,//其实Y坐标
endX:"",//终点X坐标
endY:0,//终点Y坐标
second:0,//动画总计时
speed:10,//动画速度

3.接下来我们用一个init函数来初始化这个‘小球’：创建“小球”的DOM，把它放到起始位置，并计算动画需要的时间。

 function init(startX,endX,rC,txt){    
    if(!document.getElementById("nelsonATCAContainer")){
        var _nelsonATCAContainer = document.createElement("div");
        _nelsonATCAContainer.className = "nelsonATCAContainer";
        _nelsonATCAContainer.id = "nelsonATCAContainer";
        _nelsonATCAContainer.innerText = txt?txt:"";
        _nelsonATCAContainer.style.left = startX + "px";
        nelsonATCAControlBar.appendChild(_nelsonATCAContainer);
        nelsonATCAContainer = _nelsonATCAContainer;
        _nelsonATCAContainer = null;
        his.startX = startX;
        this.endX = endX;
        this.formula(rC);
        this.second = Math.abs(startX - endX) * this.speed / 1000;
        return this;
    }
}

4.计算a、b、c的值：首先根据起点、终点坐标计算对称轴的坐标centerX，然后根据a值和centerX值计算b的值，由于我们强制使抛物线经过（0，0）点，而实际中我们需要对抛物线进行移动，根据抛物线终点坐标和起点坐标计算c的值，最终得到抛物线方程。

function formula(rC){
    var centerX =  (this.startX - this.endX) / 2 + this.endX;
    this.a = rC;
    this.b = -2 * this.a * centerX;
    this.c = -1 * this.a * this.startX * this.startX - this.b * this.startX;
}

5.开始漂移

function move(){
    var that = this;
    for(var i in prefixes){
           nelsonATCAContainer.style[prefixes[i] + prefixes[i]?"A":"a" + "nimation"] = "moveAnimation " + that.second + "s forwards";
    }
    nelsonATCAContainer.style.display = "block";
    var s = setInterval(function(){
        var startLeft = nelsonATCAContainer.offsetLeft;
        if(startLeft <= that.endX){
            clearInterval(s);
            that.resetPosition();
            return that;
        }
        nelsonATCAContainer.style.left = startLeft - 1 + "px";
        startLeft = nelsonATCAContainer.offsetLeft;
        nelsonATCAContainer.style.top = that.a * startLeft * startLeft + that.b * startLeft + that.c + "px";
    },that.speed)
}

6.大功告成~

云服务器 GPU云服务器 js 抛物线购物车 Android抛物线动画 asp加入购物车 html 加入购物车

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111457.html

Javascript中的抛物线 ~ 加入购物车小动画

摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理很简单的一个小特效，接下来来说一下他的原理。显而易见，这小东西肯定和抛物...

AZmake 2019-08-20 10:19 评论0 收藏0
实现加入购物车抛物线效果

写在前面最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）准备开始开始只是在纸上作了草图，构思了下，才发现如果要一步...

yunhao 2019-08-20 14:51 评论0 收藏0
实现加入购物车抛物线效果

写在前面最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）准备开始开始只是在纸上作了草图，构思了下，才发现如果要一步...

xiguadada 2019-08-30 15:53 评论0 收藏0
JS 实现抛物线动画

摘要：陈家宾在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。 author: 陈家宾 email: 617822642@qq.com date: 2018/2/24 在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。先给大家看下效果图（其实已经是实现后的效果了，顺便给自己公司打广告了哈哈） showImg(https://segmentfault.com/im...

zollero 2019-08-26 17:15 评论0 收藏0