Sprites图+JavaScript制作动画效果

最新推荐文章于 2024-08-09 07:06:45 发布
最新推荐文章于 2024-08-09 07:06:45 发布
阅读量776 收藏 1
点赞数
分类专栏： HTML CSS JavaScript 文章标签： javascript 动画 图片 代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juhaotian/article/details/49002123
版权
本文介绍如何通过JavaScript和Sprites图实现动画效果。作者在Codepen上发现灵感，加载大图后通过改变background-position来制作动画。文章指出，虽然当前实现忽略了首次加载的延时处理，但计划寻找更优解决方案以提升性能。代码可以直接运行。
摘要由CSDN通过智能技术生成

闲逛Codepen时发现了一个利用Sprites图做动画效果的示例，大为所动，遂cope其图，自己实现一下。

整体思路很简单：加载大图之后，利用js不断改变background-position以实现动画效果。

ps1：只简单实现了动画效果，没有对首次加载图片的延时做处理，如果没看到动画，刷新一下页面就可以了

ps2：处理延时时采用的setTimeout，性能堪忧，待我找到更好的方式后再优化。

ps3：代码可直接复制运行。


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                background-color: #38393c;
            }
            .string {
                position: absolute;
                top: 5%;
                left: 50%;
                transform: translateX(-50%);
                display: block;
                width: 275px;
                height: 600px;
                background: url(http://spectrafishing.com/_ui/skin/img/spectra-wire-sprite.png) no-repeat 0px 0px transpar
最低0.47元/天 解锁文章
Orange_J
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript制作简单动画特效及注意问题（个人整理笔记）
Kami丶
09-22 1948
个人理解：所谓的动画，就是利用定时器，把元素的属性按某一规律变化的过程。 在函数内利用参数当css属性时，style[attr] &amp;amp;amp;lt;==&amp;amp;amp;gt; style.arr，比如arr等于border。 注意问题 IE和其他浏览器的兼容，IE的事件对象和其他浏览器的事件对象不同，IE为window.event，而其他浏览器的函数中默认有e的事件对象。 把a标签的href设置为javascript:...
javascript 制作动画
08-07
javascript 制作动画
Sprites 图片动画（Animation）
丁七岁的博客
09-23 550
代码： <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>少女动画</title> </head> <style type="text/css"> *{ margin: 0; padding: 0;
Sprite.js 教程
最新发布
gitblog_00684的博客
08-09 578
Sprite.js 教程 sprite.jsAn efficient javascript sprite animation framework项目地址:https://gitcode.com/gh_mirrors/sp/sprite.js 一、项目介绍 Sprite.js 是一个跨平台高性能的图形系统，可以在Web、Node.js及小程序等多个环境中渲染图形。其目标是提供一个统一的框架，支持桌...
sprite.js: 一款轻量级的JavaScript库，用于创建和管理精灵图
gitblog_00010的博客
03-09 601
sprite.js: 一款轻量级的JavaScript库，用于创建和管理精灵图 sprite.jsAn efficient javascript sprite animation framework项目地址:https://gitcode.com/gh_mirrors/sp/sprite.js 什么是sprite.js？ Sprite.js是一个轻量级的JavaScript库，专为创建和管理精灵...
SpriteJS
qq_26642611的博客
11-30 770
官方文档 SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库，可以基于 canvas 快速绘制结构化 UI 、动画和交互效果，并发布到任何拥有 canvas 环境的平台上（比如浏览器、小程序和 node ）。 我们知道，Canvas Api 可以很灵活地绘制各种矢量图形到画布上，但是 Canvas Api 本身比较低级，比如我们要在画布中央绘制一个带有圆角的红色矩形，使用 Canvas 原生的 Api 需要很多代码。 而Sprite 为图形创建类似于 DOM 的对象
javascript制作js逐帧动画.zip
01-10
这些图片可以作为背景图片加载到DOM元素中，或者使用CSS精灵图（CSS Sprites）技术，通过改变元素的背景位置来显示不同的帧。 6. **性能优化**：为了提高动画性能，开发者可能会考虑使用Web Workers进行计算密集型...
SCSSMixin让图片精灵产生动画
08-07
在本主题中，我们将深入探讨如何使用SCSS Mixin来实现图片精灵（Sprite）的动画效果，这在JavaScript开发中尤其有用，特别是在创建高效的前端界面时。 首先，让我们理解什么是图片精灵。图片精灵是一种网页优化技术...
使用three.js制作的图像过渡效果.zip
01-06
在这个“使用three.js制作的图像过渡效果”项目中，我们将深入理解three.js的核心概念以及如何将其应用于图像的平滑过渡。 1. three.js基础知识 - **场景（Scene）**：所有3D对象都包含在场景中，是渲染的起点。 ...
JS_Background_Portfolio:它包括使用javascript制作的可移动背景
05-25
6. **性能优化**：对于大规模的背景图像，为了提高页面性能，可能使用CSS精灵（CSS Sprites）技术，将多个背景图像合并为一个大图，然后通过调整`background-position`来显示不同的部分。此外，使用事件代理可以减少...
javaScript制作动画
08-04
javaScript制作动画
css Sprites精灵图制作
09-07
css Sprites精灵图制作。加快网页加载速度 浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染 后期维护简单 该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用 使用教程链接http://blog.csdn.net/Makenzie/article/details/77881957
animateSprite-可控制雪碧图（sprites）动画的jQuery插
12-11
jquery.animateSprite是一款可控制雪碧图（sprites）制作动画效果的jQuery插件。通过该插件可以控制雪碧图播放、暂停、反向播放和更改播放动画速度等。
sprite.js：高效的javascript sprite动画框架
02-20
Sprite.js框架 该项目旨在提供一种易于使用且易于扩展的抽象，以在任何浏览器中绘制精灵。 有关更多信息，请参阅文档： 有关框架提供的示例： 使用sprite.js的项目 是动态JSON地图阅读器。 是涉及物理拼图的平台游戏。 是使用nodejs的多人HTML5游戏。 。 是一款具有不同生物和头目的演示RPG。
spriteAnimEaselJS:EaselJS SpriteStage 动画工具的基本设置（支持 WebGL）
06-03
精灵动画 ######注意：如果您已经在项目中使用了 EaselJS（或 CreateJS 套件），请使用它，如果没有，则转到不需要 EeaselJS 的版本，，因为它更轻。 使用 EaselJS 创建简单的精灵动画 这只是一个代码片段，具有精灵动画的基本设置。 它与 EaselJS v0.8.0+ 一起运行我创建它主要是因为我很难浏览 EaselJS 的文档，并且需要反复试验才能找到正确的设置。 如果您有一个 DOM 应用程序，并且想在 WebGL 中创建一些快速的 spritesheets，然后又回到 Canvas，那么这可能会有所帮助。 EaselJS 为您提供了所有内容，包括 requestAnimationFrame 的使用。 ＃用法 加载 还有我的“片段” 获得此版本的 spritestage.js 非常重要，因为它是一个自定义版本，其中一位 CreateJS 开发人
精灵图（css sprites）
鹿蹊zz的博客
05-10 2944
目录 一、什么是精灵图？ 二、精灵图的优点 三、精灵图的缺点 四、精灵图的基本用法 五、 background-position 六、渐变 1、线性渐变 2、径向渐变 一、什么是精灵图？ 所谓精灵图就是图片拼合技术，把很多的小图片合并到一张较大的图片里，通过css中的background-position属性，显示精灵图中某一个小图标。 二、精灵图的优点 在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，.....
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
wolishenfan的博客
03-19 1332
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式。 又被解释为： CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图 图片合成技术 CSS Sprites的原理 就是把一个页面涉及到的所有零星图片（适合小的导航图标icon图片、按钮图标icon图片；不适合大的页面背景图片）等有规则的合并成一张大图中，即将多个图片融合到一张整图里面。 在需要用到图片的时候，通过CSS属性background-image组合background-repeat, back
JS拖动效果，sprite制作动画
weixin_30588729的博客
05-10 153
逐帧动画。又累又饿，写不下去。几个参考。 做sprite image的网址http://spritegen.website-performance.org/ 非常非常实用。 https://idiotwu.me/css3-running-animation/ http://wiki.pinyin.sogou-inc.com/index.php?title=Css3%E5%8A%A8%E7...
CSS Sprites优化与HTML+JavaScript网页设计实践
网页课程设计主要关注HTML和JavaScript在网页制作中的应用，特别是通过CSS Sprites技术优化图片加载性能。CSS Sprites是一种将多个小图像合并成一张大图像的技术，用于减少HTTP请求次数，从而提高网页加载速度。当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值