资讯专栏INFORMATION COLUMN

用animation的steps属性制作帧动画

xuxueli / 777人阅读

摘要:于是我顺着他的思路,用上了在中的属性。修改效果如下但是这都不是我们需要的效果,因为帧动画的关键在于瞬变。在的中,有一个属性。表示将动画分为帧。这个位置变化没有过渡效果,这就是的特点阶跃性。

昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到,直接就给了我一个雪碧图,并告诉我在photoshop中可以用帧动画来播放几张图片,达到类似gif的效果,程序上实现也大抵如此吧。

卧槽真是个神奇的UI boy。

  于是我顺着他的思路,用上了animation在timing-function中的steps属性。

先来看看UI给的图吧,是这样的:(注:图片宽度1200px)

如果要播放这张图片的话,很明显是分为五个帧,然后定义一个动画,background-position从(0,0)到(-图片的宽度,0)。首先要明白background-position的数值指的是背景图的左上角顶点到容器左上角顶点的x,y距离。x,y正数值越大,背景图越向右下角偏移。

所以动画的代码如下:

我们先来播放一下看看效果,设置animation:spinning 2s linear infinite,效果如下:

可以看到是从左到右依次播放:2,3,4,5,6,2,3,4,5,6....。类似跑马灯的效果,既然说到这里就顺便提一下alternate,众所周知infinite linear定义的是0 - 100 - 0 - 100 - 0 - 100......(始终正向)。而infinite alternate定义的是0 - 100 - 100 - 0 - 0 - 100......(一下正向一下反向)。修改animation:spinning 2s alternate infinite,效果如下:

但是这都不是我们需要的效果,因为帧动画的关键在于 瞬变 。在animation的timing-function中,有一个steps(n)属性。表示将动画分为n帧。比如说,这里我们定义animation:spinning 2s steps(5) infinite。它在这个例子中表示的效果如下:

在0~400ms时,position:0 0;400ms~800ms,position:-240px 0。800ms~1200ms,position:-480px 0,以此类推。需要注意的是,比如400ms时position为0 0,在401ms时position就突变成-240px 0,即是说position是瞬变的。这个位置变化没有过渡效果,这就是steps的特点:阶跃性。

此时效果如下:

400ms一帧当然太慢了,我们把时间适当压缩一下。比如总动画时长为300ms,那就是60ms一帧,分5帧播放完,这样看起来就会流畅不少。最终效果如下:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/784.html

相关文章

  • animationsteps属性制作动画

    摘要:于是我顺着他的思路,用上了在中的属性。修改效果如下但是这都不是我们需要的效果,因为帧动画的关键在于瞬变。在的中,有一个属性。表示将动画分为帧。这个位置变化没有过渡效果,这就是的特点阶跃性。  昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得...

    googollee 评论0 收藏0
  • animationsteps属性制作动画

    摘要:于是我顺着他的思路,用上了在中的属性。修改效果如下但是这都不是我们需要的效果,因为帧动画的关键在于瞬变。在的中,有一个属性。表示将动画分为帧。这个位置变化没有过渡效果,这就是的特点阶跃性。 昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十...

    zhichangterry 评论0 收藏0
  • animationsteps属性制作动画

    摘要:于是我顺着他的思路,用上了在中的属性。修改效果如下但是这都不是我们需要的效果,因为帧动画的关键在于瞬变。在的中,有一个属性。表示将动画分为帧。这个位置变化没有过渡效果,这就是的特点阶跃性。 昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十...

    GT 评论0 收藏0
  • CSS3动画

    摘要:在制作帧动画的时候,一般采用雪碧图的方式,通过切换图片的位置,使其连续播放,从而形成动画。使用改造之后的代码,利用伪类进行背景填充,然后控制该元素移动来实现逐帧动画。 在制作帧动画的时候,一般采用雪碧图的方式,通过切换图片的位置,使其连续播放,从而形成动画。 雪碧图 雪碧图的制作可以使用compass制作,还可以使用一些小工具进行制作,提供一个在线制作雪碧图的网站。CSS Sprite...

    Nino 评论0 收藏0

发表评论

0条评论

xuxueli

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<