css3选用animation的steps特性制做帧动漫

日期:2021-01-20 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

  昨日十万火急火燎地接到1个每日任务,说是要做1个掷骰子的手机游戏,有关掷骰子期内的过渡动漫,我原本是想用css 3d制做1个立体式的骰子,随后叫UI给6张平面图贴上去。再用translate3d来实际操作。但是UI考虑到得10分周全,立即就给了我1个雪碧图,并告知我在photoshop中能够用帧动漫来播发几张照片,做到相近gif的实际效果,程序流程上完成也大多这般吧。

  卧槽简直个奇异的UI boy。

  因而我顺着他的思路,用到了animation在timing-function中的steps特性。

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

  

  假如要播发这张照片的话,很显著是分成5个帧,随后界定1个动漫,background-position从(0,0)到(-照片的宽度,0)。最先要搞清楚background-position的标值指的是情况图的左上角端点到器皿左上角端点的x,y间距。x,y正标值越大,情况图越向右下角偏位。

  因此动漫的编码以下:

  

  大家先来播发1下看看实际效果,设定animation:spinning 2s linear infinite,实际效果以下:

  

  能够看到是从左到右先后播发:2,3,4,5,6,2,3,4,5,6....。相近跑马灯的实际效果,既然说到这里就顺带提1下alternate,大家都知道infinite linear界定的是0 -> 100 ->0 -> 100 -> 0 -> 100......(自始至终顺向)。而infinite alternate界定的是0 -> 100 -> 100 ->0 -> 0 -> 100......(1下顺向1下反方向)。改动animation:spinning 2s alternate infinite,实际效果以下:

  

  可是这都并不是大家必须的实际效果,由于帧动漫的重要在于“瞬变”。在animation的timing-function中,有1个steps(n)特性。表明将动漫分成n帧。例如说,这里大家界定animation:spinning 2s steps(5) infinite。它在这个事例中表明的实际效果以下:

  

  在0~400ms时,position:0 0;400ms~800ms,position:⑵40px 0。800ms~1200ms,position:⑷80px 0,以此类推。必须留意的是,例如400ms时position为0 0,在401ms时position就突然变化成⑵40px 0,就是说position是瞬变的。这个部位转变沒有过渡实际效果,这便是steps的特性:阶跃性。

  此时效性果以下:

  

  400ms1帧自然太慢了,大家把時间适度缩小1下。例如总动漫时长为300ms,那便是60ms1帧,分5帧播发完,这样看起来就会顺畅很多。最后实际效果以下:

 

总结

以上所述是网编给大伙儿详细介绍的css3选用animation的steps特性制做帧动漫 ,期待对大伙儿有一定的协助!

上一篇:CSS高級技能:黑影实际效果 返回下一篇:没有了