資訊專欄INFORMATION COLUMN
摘要：上圖即為歸零后的坐標系，對稱軸直線為在拋物線方程中，值得正負代表著拋物線的開口方向，那么值的絕對值也和拋物線的開口大小有著反比例的關系。
廢話不多說,先上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.大功告成~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111457.html
摘要：上圖即為歸零后的坐標系，對稱軸直線為在拋物線方程中，值得正負代表著拋物線的開口方向，那么值的絕對值也和拋物線的開口大小有著反比例的關系。 廢話不多說,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源碼~https://github.com/Nelson2016... 運行的原理 很簡單的一個小特效，接下來來說一下他的原理。 顯而易見，這小東西肯定和拋物...
寫在前面 最近天氣剛剛轉熱，心想應該淘點春裝賣賣騷了，然后某寶逛的時候發現其加入購物車的動畫效果不錯，既完善了交互，又有功能導向作用，用戶體驗杠杠滴～作為一名前端汪，也想自己動手實現下此類酷炫的效果。抽空寫了個demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲?，F在講講自己的經驗，順便理理思路，加深印象：） 準備開始 開始只是在紙上作了草圖，構思了下，才發現如果要一步...
寫在前面 最近天氣剛剛轉熱，心想應該淘點春裝賣賣騷了，然后某寶逛的時候發現其加入購物車的動畫效果不錯，既完善了交互，又有功能導向作用，用戶體驗杠杠滴～作為一名前端汪，也想自己動手實現下此類酷炫的效果。抽空寫了個demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲。現在講講自己的經驗，順便理理思路，加深印象：） 準備開始 開始只是在紙上作了草圖，構思了下，才發現如果要一步...
摘要：陳家賓在做小程序的項目中，需要在添加購物車的時候，增加拋物線小球動畫。 author: 陳家賓 email: 617822642@qq.com date: 2018/2/24 在做小程序的項目中，需要在添加購物車的時候，增加拋物線小球動畫。 先給大家看下效果圖（其實已經是實現后的效果了，順便給自己公司打廣告了哈哈） showImg(https://segmentfault.com/im...
閱讀 989·2023-04-26 01:47
閱讀 1674·2021-11-18 13:19
閱讀 2047·2019-08-30 15:44
閱讀 654·2019-08-30 15:44
閱讀 2299·2019-08-30 15:44
閱讀 1236·2019-08-30 14:06
閱讀 1427·2019-08-30 12:59
閱讀 1904·2019-08-29 12:49
