用Vue3和Two.js打造一個(gè)炫酷的3D圖像展示

文由ScriptEcho平臺提供技術(shù)支持

項(xiàng)目地址：傳送門

使用 Two.js 實(shí)現(xiàn)像素級雪碧圖動畫效果

應(yīng)用場景介紹

像素級雪碧圖動畫是一種優(yōu)化網(wǎng)頁性能的常見技術(shù)，它將多個(gè)圖像組合成一張大圖，然后通過 CSS 或 JavaScript 控制圖像在頁面上的顯示位置，從而實(shí)現(xiàn)動畫效果。這種技術(shù)廣泛應(yīng)用于網(wǎng)站的背景、按鈕、圖標(biāo)等元素的動畫制作中。

代碼基本功能介紹

本代碼段使用 Two.js 庫實(shí)現(xiàn)了像素級雪碧圖動畫效果。Two.js 是一個(gè)輕量級的 JavaScript 2D 繪圖庫，它可以輕松創(chuàng)建和操作各種圖形元素。該代碼段使用 Two.js 創(chuàng)建了一個(gè)像素級雪碧圖動畫，其中一個(gè)人物角色在屏幕上不斷行走。

功能實(shí)現(xiàn)步驟及關(guān)鍵代碼分析說明

1. 初始化 Two.js

const two=new Two({
  type: Two.Types.canvas,
  fullscreen: true,
  autostart: true,
}).appendTo(document.getElementById('canvas'))

首先，我們使用 Two.js 的 new Two 方法創(chuàng)建一個(gè)新的 Two 實(shí)例，并將其附加到一個(gè) HTML Canvas 元素上。fullscreen 屬性將畫布設(shè)置為全屏模式，autostart 屬性啟用自動動畫循環(huán)。

2. 加載雪碧圖

const src='//storage.googleapis.com/archive.jono.fyi/forums/codepen/ken-stance.png'

接下來，我們加載一張包含多個(gè)子圖像的雪碧圖。

3. 設(shè)置角色位置和雪碧圖尺寸

const x=two.width / 2
const y=two.height / 2
const width=78
const height=111

我們計(jì)算出角色在畫布上的中心位置，并定義每個(gè)子圖像的寬度和高度。

4. 創(chuàng)建角色精靈

const ken=new Two.Sprite(src, x, y, cols, rows, frameRate)

使用 Two.js 的 Sprite 類創(chuàng)建一個(gè)角色精靈。Sprite 類允許我們使用雪碧圖創(chuàng)建動畫角色。src 參數(shù)指定雪碧圖的路徑，x 和 y 參數(shù)指定角色的初始位置，cols 和 rows 參數(shù)指定雪碧圖中子圖像的數(shù)量，frameRate 參數(shù)指定動畫的幀率。

5. 創(chuàng)建一個(gè)矩形精靈來跟蹤角色位置

const sprite=new Two.Sprite(src, x, 78, 1, 1)

我們創(chuàng)建一個(gè)矩形精靈來跟蹤角色在雪碧圖中的位置。這個(gè)精靈將與角色精靈一起移動，并用于確定顯示哪一部分雪碧圖。

6. 設(shè)置精靈屬性

ken.scale=250 / width
ken.play()
sprite.stroke='#ccc'

我們調(diào)整角色精靈的縮放比例，使其適合畫布。我們還設(shè)置 play() 方法來啟動動畫。我們給矩形精靈添加一個(gè)邊框，以便更容易跟蹤它的位置。

7. 將精靈添加到畫布

two.add(sprite, ken)

最后，我們將角色精靈和矩形精靈添加到 Two.js 畫布中。

總結(jié)與展望

開發(fā)這段代碼的過程讓我對像素級雪碧圖動畫技術(shù)有了更深入的理解。Two.js 庫提供了強(qiáng)大的功能，可以輕松創(chuàng)建和操作動畫角色。

未來，可以對該代碼進(jìn)行拓展和優(yōu)化，例如：

添加更多的角色和動畫。
優(yōu)化動畫性能，提高幀率。
使用 CSS 或 WebGL 等其他技術(shù)實(shí)現(xiàn)更復(fù)雜的動畫效果。
更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術(shù)支持

項(xiàng)目地址：傳送門

微信搜索ScriptEcho了解更多

頁動畫圖像、Flash 動畫和 JavaScript 實(shí)現(xiàn)的效果圖片，我們用最基礎(chǔ)的CSS也能實(shí)現(xiàn)。制作一個(gè)簡單的gif動畫圖，上圖就是效果圖。

用CSS3制作動畫圖，你需要了解兩個(gè)css屬性。

其一是 @keyframes

因?yàn)?strong>它限定了CSS 樣式和動畫逐步從目前的樣式更改為新的樣式的變化過程。瀏覽器兼容的時(shí)候需要在keyframes上加前綴，-webkit-, -ms- 或 -moz- 。

keyframes中有兩個(gè)屬性，from和to，from里面的內(nèi)容定義動畫開始的狀態(tài)，to記錄動畫結(jié)束的狀態(tài)。@keyframes后面緊跟的是動畫的名字，這個(gè)可以自定義取名字，比如我取 gifname，頁面某個(gè)標(biāo)簽元素使用這個(gè)動畫時(shí)候，就需要用到這個(gè)名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比來表示動畫的過程，可以用百分比的話，就可以把動畫的內(nèi)容定義得更加豐富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一個(gè)div元素上用到這個(gè)動畫

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 與 Chrome */
}

其二是 animation

剛剛我們在div元素中看到的animation就是我們要認(rèn)識的第二個(gè)屬性。animation其實(shí)是一堆屬性的簡寫。比如看下面一句代碼：

 animation:gifname 2s step-start 1s infinite alternate;

這一句其實(shí)可以寫成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：動畫名稱

這里是引入 @keyframes 動畫的名稱。

animation-duration：動畫的持續(xù)時(shí)間

單位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：動畫的過度類型

屬性值 :默認(rèn)是 "ease"

linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。

step-start:馬上跳到動畫每一結(jié)束幀的狀態(tài)

animation-delay：動畫延遲時(shí)間

默認(rèn)是 0。

animation-iteration-count：動畫循環(huán)次數(shù)

默認(rèn)是 1。屬性值infinite 代表無數(shù)次。

animation-direction：動畫是否在下一周期逆向地播放

屬性值

normal：正常方向

reverse：反方向運(yùn)行

alternate：動畫先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行

alternate-reverse：動畫先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行

另外還有兩項(xiàng)屬性：

animation-fill-mode:設(shè)置動畫播放后的效果

取值:

none:初始樣式,不改變默認(rèn)行為.(默認(rèn)行為)

forwards:動畫播放結(jié)束后保持最后一個(gè)狀態(tài);

backwards:結(jié)束后保持第一個(gè)狀態(tài);

animation-play-state :檢索或設(shè)置對象動畫的狀態(tài)

屬性值

animation-play-state:running | paused;

running:運(yùn)動

paused: 暫停

animation-play-state:paused; 當(dāng)鼠標(biāo)經(jīng)過時(shí)動畫停止，鼠標(biāo)移開動畫繼續(xù)執(zhí)行

到此為止，屬性我們都學(xué)習(xí)完了，開始實(shí)踐部分：

首先準(zhǔn)備好我們需要的圖片，這里我使用了九張圖片。

我把九張圖片放在九個(gè)<li></li>標(biāo)簽里。所有l(wèi)i標(biāo)簽用ul標(biāo)簽包含起來。然后把ul放在一個(gè)div標(biāo)簽里，div設(shè)置成一張圖片的大小，然后通過逐幀移動ul元素實(shí)現(xiàn)動畫。

最后的處理，把超出div元素的部分隱藏即可。然后就得到了文章開始時(shí)候的圖片了。

最關(guān)鍵的，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css動畫</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后嘮叨一句，該動畫不支持IE9及更早版本的IE瀏覽器。

喜歡的話，就點(diǎn)贊支持一下吧！

有半年之久沒有更新新作品了，但這個(gè)小小領(lǐng)地我并沒有忘記，我會堅(jiān)持下去，一直在這等你，等你的每次回眸，感恩你的每次駐足，這已經(jīng)足夠成為我堅(jiān)守的動力和理由，盡管現(xiàn)在有很多不足和不盡人意，也沒很多的時(shí)間管理，我會盡量讓它保持足夠的新鮮感，每次的作品都投入足夠的用心，否則寧愿選擇缺省，當(dāng)某些東西成為寄托之后，就不能容許隨意的成分。

謝謝大家的支持，我會盡力做好每一頁的代碼，今天和大家分享的主題是《周末の玉玲》，誰的青春沒有一個(gè)故事，僅以此篇祭祀那些逝去的青春，珍惜當(dāng)下，畢業(yè)不是終點(diǎn)，不要再錯(cuò)過。

該主題包含一張index.html，后面預(yù)留了3頁，留給你們自己設(shè)計(jì)，因?yàn)槊總€(gè)人的青春都不一樣，html5+css3設(shè)計(jì)，支持手機(jī)端。

導(dǎo)語

青澀的時(shí)光，情竇初開，那是學(xué)生時(shí)代，一個(gè)男孩心系一個(gè)女孩，每到課間休息都會在走廊上等你經(jīng)過，只為看你一眼，你的一顰一笑，都印記在心里，至今無法抹去，如今的生活常常在夢中遇見你，如若歲月可以回去那一年，我能否向你表明心聲和堅(jiān)持的決心，而不是讓懊悔和思念成為了不可逆轉(zhuǎn)的結(jié)局。

主題

《周末の玉玲》

圖摘

文件目錄結(jié)構(gòu)

在線咨詢

上一篇：http跳轉(zhuǎn)https方法：如何讓http自動跳轉(zhuǎn)h
下一篇：如何將源文件為HTML的PDF文件轉(zhuǎn)成HTML

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商