概念

CSS層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到紅崗網(wǎng)站設(shè)計(jì)與紅崗網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋紅崗地區(qū)。

所有動(dòng)畫(huà)的基本原理都是：在短時(shí)間內(nèi)連續(xù)依次展示對(duì)應(yīng)的圖片，這樣在視覺(jué)上看起來(lái)就是'動(dòng)'的了。本文主要來(lái)說(shuō)一說(shuō)第4點(diǎn)和第5點(diǎn)。

圖片幀動(dòng)畫(huà)

當(dāng)我們要實(shí)現(xiàn)的動(dòng)畫(huà)效果比較復(fù)雜，而且開(kāi)發(fā)排期比較緊的情況下，用一張gif動(dòng)圖來(lái)實(shí)現(xiàn)動(dòng)畫(huà)是成本最低，效果也不錯(cuò)的一種方案。比如下面這種動(dòng)畫(huà)效果：

可是如果我們想讓動(dòng)效在某個(gè)時(shí)候暫停，隔一段時(shí)間后，再?gòu)臄帱c(diǎn)開(kāi)始繼續(xù)播放動(dòng)效，用gif圖就實(shí)現(xiàn)不了了。gif圖的動(dòng)效是沒(méi)有辦法暫停的。這個(gè)時(shí)候，可以考慮采用圖片幀動(dòng)畫(huà)。

圖片幀動(dòng)畫(huà)可以看做是：把gif圖的原理在前端用代碼實(shí)現(xiàn)了一遍。

上面?zhèn)€那個(gè)動(dòng)效，(假設(shè))可以分成100幀，即100張圖片，然后用代碼控制100張圖片依次顯示。并且，可以隨時(shí)在中途暫停。為了節(jié)省http請(qǐng)求，把100張圖片合成一張雪碧圖，然后用background-position去控制顯示哪一張圖。推薦一個(gè)很不錯(cuò)的圖片生成工具：GKA

我把100張圖片生成了一個(gè)豎直的雪碧圖。

在代碼里，只需要更新DOM元素的background-position即可實(shí)現(xiàn)動(dòng)畫(huà)。

首先第一個(gè)點(diǎn)需要注意：background-position設(shè)置的是背景圖片相對(duì)于DOM元素的起始位置。

假設(shè)DOM元素和圖片寬高都是 100 * 200

#wrapper {
   width: 100px;
   height: 200px;
   background-image: url('雪碧圖.png');
   background-size: 100% 10000%; // 有100張圖， 100*100
   background-repeat: no-repeat;
}

--- js

var domEl = document.querySelector('#wrapper');
var n; // n：顯示雪碧圖中第幾張圖片，n >=0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // 注意這里是負(fù)值

我們只需要用js控制n的值就行，就可以很容易實(shí)現(xiàn)隨時(shí)執(zhí)行、暫停動(dòng)效。

上面的例子中，dom元素寬高是固定的，如果不固定、想要自適應(yīng)的話(huà)，需要根據(jù)圖片寬高比，通過(guò)padding-top來(lái)設(shè)置dom元素的寬高比。這個(gè)時(shí)候，在background-position中，也無(wú)法使用具體的數(shù)值了，需要使用百分比。這里有一個(gè)需要注意的地方：

background-position百分比取值時(shí)，很自然的以為是直接用背景圖片寬高乘以百分比即可得到最終偏移量，但其實(shí)不是的。計(jì)算公式如下：

x偏移量 = (元素寬度—背景圖片的寬度)*x百分比
y偏移量 = (元素高度—背景圖片的高度)*y百分比

換算一下：

x百分比 = x偏移量 / (元素寬度 - 背景圖片寬度)
y百分比 = y偏移量 / (元素高度 - 背景圖片高度)

具體到上面的例子中，就是：

// 假設(shè)每一張小圖片寬度為w, 高度為h, 當(dāng)前需要展示第n張圖片，一共有100張圖，則
var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 =  n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;

最終，我們就能實(shí)現(xiàn)圖片幀動(dòng)畫(huà)了。當(dāng)然，如果不需要完全控制動(dòng)畫(huà)效果，可以不借助js，直接用css即可?；蛘咧苯佑胓if動(dòng)圖就好。

css曲線(xiàn)運(yùn)動(dòng)

曲線(xiàn)運(yùn)動(dòng)，使用svg，canvas是很不錯(cuò)的選擇。但是在對(duì)曲線(xiàn)的路徑不那么嚴(yán)格要求的時(shí)候，使用svg和canvas或許略微麻煩了。可以直接用css來(lái)實(shí)現(xiàn)一個(gè)『看起來(lái)是曲線(xiàn)』的運(yùn)動(dòng)。

以類(lèi)似拋物線(xiàn)的一個(gè)運(yùn)動(dòng)為例，大概是一個(gè)這樣的效果：

位移曲線(xiàn)上某點(diǎn)的切線(xiàn)就是速度，而速度可以分解成x軸的速度和y軸的速度。也就是說(shuō)，上面的運(yùn)動(dòng)可以分解成水平方向x軸的運(yùn)動(dòng)和豎直方向y軸的運(yùn)動(dòng)。從感官上，不難看出，x軸的運(yùn)動(dòng)大概是勻速的，而y軸的運(yùn)動(dòng)是越來(lái)越快的。

另外，由于運(yùn)動(dòng)分解成了兩個(gè)方向的運(yùn)動(dòng)，需要兩個(gè)DOM，分別寫(xiě)動(dòng)畫(huà)，才能實(shí)現(xiàn)最終的效果。

--- html

<div class='x-container'>
   <div class='y-container'></div>
</div>

--- css

.x-container {
   width: 50px;
   height: 50px;
   animation: xMove 2s linear;
}
.y-container {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #000;
   animation: yMove 2s cubic-bezier(.98,.03,.91,.77);
}
@keyframes xMove {
   0% {
   }
   100% {
    transform: translateX(400px);
   }
}
@keyframes yMove {
   0% {
   }
   100% {
    transform: translateY(400px);
   }
}

兩個(gè)方向的運(yùn)動(dòng)合起來(lái)，就是上面的效果了。

想要實(shí)現(xiàn)一個(gè)不那么嚴(yán)格的曲線(xiàn)運(yùn)動(dòng)，直接使用css animation，也是一個(gè)不錯(cuò)的選擇。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱(chēng)：如何用CSS實(shí)現(xiàn)圖片幀動(dòng)畫(huà)和曲線(xiàn)運(yùn)動(dòng)-創(chuàng)新互聯(lián)
URL標(biāo)題：http://jinyejixie.com/article42/gpghc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、用戶(hù)體驗(yàn)、軟件開(kāi)發(fā)、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)