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

文由ScriptEcho平臺提供技術支持

項目地址：傳送門

使用 Two.js 實現像素級雪碧圖動畫效果

應用場景介紹

像素級雪碧圖動畫是一種優化網頁性能的常見技術，它將多個圖像組合成一張大圖，然后通過 CSS 或 JavaScript 控制圖像在頁面上的顯示位置，從而實現動畫效果。這種技術廣泛應用于網站的背景、按鈕、圖標等元素的動畫制作中。

代碼基本功能介紹

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

功能實現步驟及關鍵代碼分析說明

1. 初始化 Two.js

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

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

2. 加載雪碧圖

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

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

3. 設置角色位置和雪碧圖尺寸

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

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

4. 創建角色精靈

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

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

5. 創建一個矩形精靈來跟蹤角色位置

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

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

6. 設置精靈屬性

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

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

7. 將精靈添加到畫布

two.add(sprite, ken)

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

總結與展望

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

未來，可以對該代碼進行拓展和優化，例如：

添加更多的角色和動畫。
優化動畫性能，提高幀率。
使用 CSS 或 WebGL 等其他技術實現更復雜的動畫效果。
更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

頁動畫圖像、Flash 動畫和 JavaScript 實現的效果圖片，我們用最基礎的CSS也能實現。制作一個簡單的gif動畫圖，上圖就是效果圖。

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

其一是 @keyframes

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

keyframes中有兩個屬性，from和to，from里面的內容定義動畫開始的狀態，to記錄動畫結束的狀態。@keyframes后面緊跟的是動畫的名字，這個可以自定義取名字，比如我取 gifname，頁面某個標簽元素使用這個動畫時候，就需要用到這個名字。

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

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

@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;}
}

比如我在一個div元素上用到這個動畫

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

其二是 animation

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

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

這一句其實可以寫成

    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：動畫的持續時間

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

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

屬性值 :默認是 "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 函數中自己的值。可能的值是從 0 到 1 的數值。

step-start:馬上跳到動畫每一結束幀的狀態

animation-delay：動畫延遲時間

默認是 0。

animation-iteration-count：動畫循環次數

默認是 1。屬性值infinite 代表無數次。

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

屬性值

normal：正常方向

reverse：反方向運行

alternate：動畫先正常運行再反方向運行，并持續交替運行

alternate-reverse：動畫先反運行再正方向運行，并持續交替運行

另外還有兩項屬性：

animation-fill-mode:設置動畫播放后的效果

取值:

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

forwards:動畫播放結束后保持最后一個狀態;

backwards:結束后保持第一個狀態;

animation-play-state :檢索或設置對象動畫的狀態

屬性值

animation-play-state:running | paused;

running:運動

paused: 暫停

animation-play-state:paused; 當鼠標經過時動畫停止，鼠標移開動畫繼續執行

到此為止，屬性我們都學習完了，開始實踐部分：

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

我把九張圖片放在九個<li></li>標簽里。所有li標簽用ul標簽包含起來。然后把ul放在一個div標簽里，div設置成一張圖片的大小，然后通過逐幀移動ul元素實現動畫。

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

最關鍵的，上代碼：

<!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瀏覽器。

喜歡的話，就點贊支持一下吧！

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

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

該主題包含一張index.html，后面預留了3頁，留給你們自己設計，因為每個人的青春都不一樣，html5+css3設計，支持手機端。

導語

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

主題

《周末の玉玲》

圖摘

文件目錄結構

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商