用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小时内与您取得联系。

整合营销服务商