精灵图(sprite)实现动画

用精灵图做一个二哈奔跑的动画。

1.精灵图制作

将每一帧图片按动画序列顺序放好，然后调出PhotoShop的网格，调好每一帧的位置，同一行每一帧之间的距离等距，上下两行间的距离也调成等距。

2.代码

用PhotoShop中的标尺工具测量图片高度，作为css中height的值，如果图片做的比较好可直接用百分比(50%)，width的值为整个图片宽度。

当第一行遍历完后，前往遍历第二行的过程有个回退效果，为了减弱这个效果的显示，在css中设置第一行到第二行的转移时，尽可能地让该过程占用的时间很小。

html部分

<div class="husky"></div>

css部分

 *{margin: 0;padding: 0;}html{background-color:skyblue;}@keyframes husky_running{0%{background-position: 0 0;}50%{background-position:-591px 0px;}50.01%{background-position: 0 -88.58px;} 100%{background-position: -591px -88.58px;}}
.husky{height: 84px;width: 117px;margin: 50px auto;background-image: url(https://img-blog.csdnimg.cn/2021042516115940.png);/* overflow: hidden;*/animation: husky_running 0.5s steps(5) infinite;-webkit-animation: husky_running 0.5s steps(5) infinite;}

素材：

实现效果：如果网页中闪烁效果太明显，可以将精灵图内容放在同一行上。

精灵图(sprite)实现动画相关推荐

定位、锚点、精灵图、帧动画详解
1.定位 1.定位 position 说法文档流偏移位置(top left right bottom)时候的参照物 1.position:static; 默认值默认值默认 2.position ...
Unity制作简单的精灵图动画（新手向）
使用精灵图制作动画步骤: 1.精灵图准备 2.制作动画一.精灵图导入与切割第一种情况:导入的是已经切割好的精灵图,请直接跳动到二第二种情况:导入的是需要切割的精灵图,需要切割,切割步骤: 1按照 ...
css精灵列表使用实例,介绍一个导出CSS精灵图动画的AE小脚本
作者:李威在H5项目中如果有动画需求,一个常见的流程是设计师用 After Effect 制作动画,然后导出为序列帧. 序列帧就是一张张图片,快速连续播放就能成为动画,但是在H5里直接播放序列帧对网 ...
YYKit播放图片动画(gif/帧动画/精灵图动画)
1.显示动画类型gif的图片 #import <YYImage.h> #import <YYAnimatedImageView.h> YYImage *gifImage = [ ...
雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
CSS3控制变量输出精灵图序列帧动画 frameAnime.css
frameAnime.css [CSS精灵图序列帧动画]: 资源链接: 文档案例:http://miikio.gitee.io/frame-anime.css/ 备用下载:https://pan.ba ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
Mapbox Sprite精灵图生成
出处:ATtuing - 博客园 ,https://www.cnblogs.com/ATtuing/p/9273391.html 1.什么是sprite文件 sprite 文件主要是将一堆小图生成一种 ...
精灵图 html为什么会变大,CSS Sprite精灵图如何缩放大小
在移动端项目当中,如果要使用精灵图的话,因为我做了px自动转换vw单位,所以在使用的时候,position位置正常写单位是px,但是转化成vw后就找不到对应的图片了 "postcss-px ...

精灵图(sprite)实现动画

精灵图(sprite)实现动画

1.精灵图制作

2.代码

精灵图(sprite)实现动画相关推荐

最新文章

热门文章