逐帧动画效果—

当我们制作一些通过属性变化无法实现的动画效果时，就需要使用逐帧动画。

现在lllustrator 矢量图绘图软件中绘制好跑步动作的每一个环节（这里我借鉴书上的图）：

这里图像的每一帧内容都是 300x372像素的宽高。可以发现这张图片的像素是 3600x372像素，所以一共有十二帧。

在网页中引入此图片：

<div class="run"></div>

    .run{/*宽高度只显示第一帧图像*/width: 300px;height: 372px;background: url(run.png) no-repeat;}

逐帧动画的基本思路就是通过背景图片的位置，来实现图片的切换，进而呈现出动画效果。由于我们的动画一共有十二帧，加上动画的开头和结尾是同样的两个节点，因此一共需要十三个节点，将100%平均分为13份，则可以得到每个节点的百分比值依次为0%、8.3%、16.7%…100%。在每个节点中，我们只需要设置background-position属性，使图片依次向左移动300像素即可。

background-position：为每个背景图片设置初始位置。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

下面是设计动画的代码：原理再简单的解释一下，我们最开始加载了一张含有十二帧动画的图片，然而我们只显示了最初的一张。之后，在下面代码中，我们让这张图片每次向左移动 300像素的距离，这样时间短了就显示成动画。

    @keyframes run{0% {background-position:0 0;}8.3% {background-position:-300px 0;}16.7% {background-position:-600px 0;}25% {background-position:-900px 0;}33.3% {background-position:-1200px 0;}41.7% {background-position:-1500px 0;}50% {background-position:-1800px 0;}58.3% {background-position:-2100px 0;}66.7% {background-position:-2400px 0;}75% {background-position:-2700px 0;}83.3% {background-position:-3000px 0;}91.7% {background-position:-3300px 0;}100% {background-position:0 0;}}

在.run中加上执行代码即可：

    .run{animation: run 900ms steps(1) infinite;}

steps(1)：让每一帧动画不是线性变化，而是台阶式变化。 https://blog.csdn.net/qq_23269747/article/details/76152689

逐帧动画效果——简单篇相关推荐

html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
html帧动画效果,利用css3-animation实现逐帧动画效果
本文分享了用css3-animation来制作逐帧动画的实现方法,供大家参考,具体内容如下常见用法: CSS Code复制内容到剪贴板 :hover{ animation:mymove 4s ea ...
html5+css3实现动画、逐帧动画效果
上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d.3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明. 首先我们需要了解css3中动画的意思, ...
css动画帧动画效果,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
计算机类说课比赛视频,全国“xx杯”计算机类说课大赛课件一等奖作品：制作逐帧动画说课课件...
<全国"xx杯"计算机类说课大赛课件一等奖作品:制作逐帧动画说课课件>由会员分享,可在线阅读,更多相关<全国"xx杯"计算机类说课大赛课件一等 ...
安卓案例：利用定时器实现逐帧动画
安卓案例:利用定时器实现逐帧动画一.运行效果单击[开始]按钮,可以看到逐帧动画效果: 单击[停止]按钮,可以停止动画效果. 二.涉及知识点 1.图像视图(ImageView) 2.按钮(Butto ...
html逐帧动画,CSS秘密花园：逐帧动画
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
android语音动画,Android逐帧动画的简单使用-语音播放效果的实现
逐帧动画(Frame-By-Frame Animation)原理很简单,即快速切换不同的图片,形成动画效果.Android中逐帧动画的实现方式也很简单,下面以语音播放效果为例说明. 1. 首先准备图片 ...

逐帧动画效果——简单篇

当我们制作一些通过属性变化无法实现的动画效果时，就需要使用逐帧动画。

逐帧动画效果——简单篇相关推荐

最新文章

热门文章