資訊專(zhuān)欄INFORMATION COLUMN
摘要：代碼屬性運(yùn)動(dòng)框架高動(dòng)畫(huà)寬動(dòng)畫(huà)透明度動(dòng)畫(huà)高寬透明度鏈?zhǔn)絼?dòng)畫(huà)高寬透明度同時(shí)動(dòng)畫(huà)引入的代碼運(yùn)動(dòng)框架運(yùn)動(dòng)標(biāo)桿假設(shè)所有運(yùn)動(dòng)都達(dá)到了目標(biāo)值去當(dāng)前的值獲取小數(shù)四舍五入獲取整數(shù)算速度檢測(cè)屬性動(dòng)畫(huà)是否全部達(dá)到目標(biāo)值如果不是所有的動(dòng)畫(huà)都達(dá)到目標(biāo)值，標(biāo)桿
html代碼
css屬性運(yùn)動(dòng)框架
//運(yùn)動(dòng)
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
function startMove(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag=true;//標(biāo)桿,假設(shè)所有運(yùn)動(dòng)都達(dá)到了目標(biāo)值
for(var attr in json)
{
//1.去當(dāng)前的值
var icur = 0;
if(attr == "opacity") {
icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat獲取小數(shù).Math.round四舍五入
} else {
icur = parseInt(getStyle(obj, attr)); //parseInt獲取整數(shù)
}
//2.算速度
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.檢測(cè)屬性動(dòng)畫(huà)是否全部達(dá)到目標(biāo)值
if(icur !== json[attr])
{
flag=false;//如果不是所有的動(dòng)畫(huà)都達(dá)到目標(biāo)值，標(biāo)桿設(shè)為false
}
if(attr == "opacity")
{
obj.style.filter = "alpha(opacity:" + (icur + speed) + ")";
obj.style.opacity = (icur + speed) / 100;
}
else
{
obj.style[attr] = icur + speed + "px";
}
}
//在動(dòng)畫(huà)結(jié)束的時(shí)候檢測(cè)是否有回調(diào)函數(shù),如果檢測(cè)到有回調(diào)函數(shù)，執(zhí)行
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
//獲取對(duì)象屬性
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//IE
}
else{
return getComputedStyle(obj,false)[attr];//火狐 chrome
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89621.html
摘要：貝塞爾曲線貝塞爾曲線是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。通過(guò)調(diào)整控制點(diǎn)，貝塞爾曲線的形狀會(huì)發(fā)生變化。讓我們看看貝塞爾曲線的工作原理。貝塞爾曲線需要四個(gè)值，或者更準(zhǔn)確地說(shuō)它需要兩對(duì)數(shù)字。每對(duì)描述立方貝塞爾曲線控制點(diǎn)的和坐標(biāo)。 這是專(zhuān)門(mén)探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 13 篇。 如果你錯(cuò)過(guò)了前面的章節(jié)，可以在這里找到它們： JavaScript 是如何工作的：...
摘要：網(wǎng)頁(yè)逐幀動(dòng)畫(huà)的實(shí)現(xiàn)方式網(wǎng)頁(yè)中的逐幀動(dòng)畫(huà)，大致可分為兩大類(lèi)的實(shí)現(xiàn)方式，分別是使用控制，和單純使用實(shí)現(xiàn)，兩者的優(yōu)劣總體概括來(lái)說(shuō)就是動(dòng)畫(huà)可控性更強(qiáng)，但開(kāi)銷(xiāo)大，實(shí)現(xiàn)復(fù)雜。 網(wǎng)頁(yè)逐幀動(dòng)畫(huà)的實(shí)現(xiàn)方式 網(wǎng)頁(yè)中的逐幀動(dòng)畫(huà)，大致可分為兩大類(lèi)的實(shí)現(xiàn)方式， 分別是使用JS控制，和單純使用CSS實(shí)現(xiàn)，兩者的優(yōu)劣總體概括來(lái)說(shuō)就是： JS動(dòng)畫(huà)可控性更強(qiáng)，但開(kāi)銷(xiāo)大，實(shí)現(xiàn)復(fù)雜。 CSS動(dòng)畫(huà)實(shí)現(xiàn)相對(duì)JS更簡(jiǎn)單。常見(jiàn)的網(wǎng)...
摘要：通過(guò)這種方法產(chǎn)生的動(dòng)畫(huà)，無(wú)法按照原有軌跡收回，所以在事件之后設(shè)置了定時(shí)器，定義在執(zhí)行動(dòng)畫(huà)之后，執(zhí)行另一個(gè)動(dòng)畫(huà)。方式存在較多局限性動(dòng)畫(huà)只能執(zhí)行一次，循環(huán)效果需要通過(guò)定時(shí)器完成。 在普通的網(wǎng)頁(yè)開(kāi)發(fā)中，動(dòng)畫(huà)效果可以通過(guò)css3來(lái)實(shí)現(xiàn)大部分需求，在小程序開(kāi)發(fā)中同樣可以使用css3，同時(shí)也可以通過(guò)api方式來(lái)實(shí)現(xiàn)。 指路：小程序animatiom動(dòng)畫(huà)API API解讀 小程序中，通過(guò)調(diào)用api來(lái)...
摘要：通過(guò)這種方法產(chǎn)生的動(dòng)畫(huà)，無(wú)法按照原有軌跡收回，所以在事件之后設(shè)置了定時(shí)器，定義在執(zhí)行動(dòng)畫(huà)之后，執(zhí)行另一個(gè)動(dòng)畫(huà)。方式存在較多局限性動(dòng)畫(huà)只能執(zhí)行一次，循環(huán)效果需要通過(guò)定時(shí)器完成。 在普通的網(wǎng)頁(yè)開(kāi)發(fā)中，動(dòng)畫(huà)效果可以通過(guò)css3來(lái)實(shí)現(xiàn)大部分需求，在小程序開(kāi)發(fā)中同樣可以使用css3，同時(shí)也可以通過(guò)api方式來(lái)實(shí)現(xiàn)。 指路：小程序animatiom動(dòng)畫(huà)API API解讀 小程序中，通過(guò)調(diào)用api來(lái)...
閱讀 2403·2023-04-26 02:54
閱讀 2328·2021-10-14 09:43
閱讀 3378·2021-09-22 15:19
閱讀 2852·2019-08-30 15:44
閱讀 2714·2019-08-30 12:54
閱讀 994·2019-08-29 18:43
閱讀 1945·2019-08-29 17:12
閱讀 1337·2019-08-29 16:40
