怎么使用CSS實(shí)現(xiàn)圖片幀動畫與曲線運(yùn)動-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)怎么使用CSS實(shí)現(xiàn)圖片幀動畫與曲線運(yùn)動，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比邛崍網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式邛崍網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋邛崍地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

所有動畫的基本原理都是：在短時(shí)間內(nèi)連續(xù)依次展示對應(yīng)的圖片，這樣在視覺上看起來就是'動'的了。

本文主要來說一說第4點(diǎn)和第5點(diǎn)。

圖片幀動畫

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

可是如果我們想讓動效在某個(gè)時(shí)候暫停，隔一段時(shí)間后，再從斷點(diǎn)開始繼續(xù)播放動效，用gif圖就實(shí)現(xiàn)不了了。 gif圖的動效是沒有辦法暫停的 。這個(gè)時(shí)候，可以考慮采用圖片幀動畫。

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

上面?zhèn)€那個(gè)動效，(假設(shè))可以分成100幀，即100張圖片，然后用代碼控制100張圖片依次顯示。并且，可以隨時(shí)在中途暫停。

為了節(jié)省http請求，把100張圖片合成一張雪碧圖，然后用background-position去控制顯示哪一張圖。推薦一個(gè)很不錯的圖片生成工具： GKA

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

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

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

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

--- css

#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í)行、暫停動效 。

上面的例子中，dom元素寬高是固定的，如果不固定、想要自適應(yīng)的話，需要根據(jù)圖片寬高比，通過 padding-top 來設(shè)置dom元素的寬高比。這個(gè)時(shí)候，在 background-position 中，也無法使用具體的數(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)然，如果不需要完全控制動畫效果，可以不借助js，直接用css即可?；蛘咧苯佑胓if動圖就好。

css曲線運(yùn)動

曲線運(yùn)動，使用svg，canvas是很不錯的選擇。但是在對曲線的路徑不那么嚴(yán)格要求的時(shí)候，使用svg和canvas或許略微麻煩了。可以直接用css來實(shí)現(xiàn)一個(gè)『看起來是曲線』的運(yùn)動。以類似拋物線的一個(gè)運(yùn)動為例，大概是一個(gè)這樣的效果：

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

另外，由于運(yùn)動分解成了兩個(gè)方向的運(yùn)動，需要兩個(gè)DOM，分別寫動畫，才能實(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)動合起來，就是上面的效果了

關(guān)于“怎么使用CSS實(shí)現(xiàn)圖片幀動畫與曲線運(yùn)動”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文名稱：怎么使用CSS實(shí)現(xiàn)圖片幀動畫與曲線運(yùn)動-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://muchs.cn/article0/psoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、小程序開發(fā)、網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣、App設(shè)計(jì)、營銷型網(wǎng)站建設(shè)

廣告

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