CSS3帧动画

html-css027

CSS3帧动画,第1张

animation动画除了可以实现补间动画外,还可以完成逐帧动画。

在animation的属性中,有个属性 animation-timing-function 一共具有如下这些值

CSS

贝塞尔缓动就是完成补间动画的,比如流畅的缩放、位置移动等动画。

但是逐帧动画没有补间效果的,它不是电脑根据初始和结束状态的差异自动生成中间的过渡帧,而是每一帧都是关键帧,需要自己定义每一帧的状态。

比如像下面这样的图,就只能通过逐帧动画来实现运动效果↓

这几个属性值就是用来处理逐帧动画的:

CSS

steps(number,position) ,有两个参数。

number表示动画的段数。关键帧的数量=段数+1。

position这个比较难理解,有两个值:end和start。end是默认值。

先看一个效果。

两个小球,从0px运动到400px,分为了4个动画步骤,有5个关键帧。第一个是start模式,第二个是end模式。

发现start模式是时间一开始,直接进入第二个关键帧状态,然后顺利顺利走完全程。

end模式有点傻,时间一开始,从第一个关键帧开始跑,结果时间结束了,才走完第四个关键帧,没有完成全部路程就over了。

所以start和end的名字和它所表示的含义刚好相反。

比如执行次数或者填充模式。

为上面的小球加上infinite,可以看出start模式第二次开始的运动都是从第二个关键帧开始的。

加上forwards模式则变得不一样了,forwards是向前的单词意思,但是表示的则是保留动画最后的运动状态,意思和功能也是相反的。

第二个end模式的小球终于有机会走完全程了。

所以,当为end模式设置了forwards的时候要小心,因为它其实多走了一步。

1、这头熊的原始素材一共有8个步骤。

所以使用 steps(8,end) 是最好的方式,因为如果使用 steps(8,start) ,则第一帧不能执行,最后一帧会闪白,图片消失。

因为要一直运动,所以需要加上infinite,当执行完最后一张图的时候,再返回到第一张图,形成一个连贯的完步。

通过背景图片的 background-position 的改变,形成熊的运动。

CSS

可以打开codepen编辑器,把运动时间设置更大一点,可以看到慢动作,一帧一帧是如何显示的。

2、这个logo一共有24张图片

但是logo只运动一次,并且停在结束状态,根据end模式的特征,如果加上forwards的话,会多运动一步。

所以,这里是 steps(23,end) ,为什么是23步,而不是24步,因为forwards模式对它的影响。要想最后一步还要看到图片,那么背景图片的挪动就要少挪动一个图片的宽度。图片整个宽度4800px,每一张图200px的宽高。所以背景图片只需要往左边挪动-4600px即可。

CSS

通过上面的案例可以看出,对象的运动效果由逐帧绘制的图片的间距所影响。间距一样,则速度一样。利用steps不能去改变现成的图片帧与帧之间的速度。

但是利用 step-end 或者 step-start 却是可以的。

3、 step-end 的特别用处

其实 step-end 等价于 steps(1,end) , step-start 等价于 steps(1,start) 。

只有一个步骤的逐帧动画,却可以利用好时间的改变和距离的改变做出速度不同的效果来。

熊从左边快速奔跑出来,一共跑了六步,一步比一步速度放慢。然后在原地踏步。

首先这是一个逐帧动画,但是要实现不同的速度,又没有办法改变原来素材图片与图片之间的距离,所以要使用另外的办法。

第一个完步时间间隔小,left的值间隔大,相当于速度快。背景图片往左移动一张,left的值往右改变一次,熊实现往前奔跑。

CSS

第二个完步的时间间隔稍微大点,left的间隔小了一点,速度变慢了一些。依次类推,速度逐渐放缓。第二个完步又从第一帧开始。

CSS

所以说利用step-end还是可以做出速度不一样的逐帧动画的。

在线制作雪碧图: https://www.toptal.com/developers/css/sprite-generator

基于css3 animation和transition的动画类库,可以方便的使用js来调用。

不过因为所有实现均基于css3,所以不能像tweenmax那样使用到其他对象,只能作用于dom对象的css属性(可以查阅animation和transition可使用的css属性)。

API

CT.get(target, param)

CT.set(target, params)

CT.fromTo(target, duration, fromParams, toParams)

CT.from(target, duration, fromParams)

CT.to(target, duration, toParams)

CT.kill(target)

CT.killAll()

param为字符串,

Params为数组,

以下是所有配置属性:

type设置为'a'使用animation,不设置则使用transition(transiton动画的创建效率高于animation,但没有animation那样丰富的功能和回调)

ease设置缓动,

delay设置延时时间,

onEnd设置运动完成的返回函数,

onEndParams设置返回函数的参数,

只有当type:'a'时以下属性才能起作用

repeat设置重复次数,

yoyo设置重复时反向,

onStart设置运动开始的返回函数,

onStartParams设置开始返回函数的参数,

onRepeat设置运动循环中每个运动完成的返回函数,

onRepeatParams设置运动完成返回函数的参数,

缓动类

CT.Linear

CT.Quad

CT.Quart

CT.Back

除了CT.Linear只有None一项,其他均有In,InOut,Out三项选择。

以上方法和参数均是参考TweenMax的方式,有使用经验了会很容易上手。

<!DOCTYPE HTML>

<html>

<head>

<script src="../csstween.js"></script>

<style>

body{

background: #000

font-size: 14px

}

.b1{

width: 100%

height: 100%

}

.box{

width: 100px

height: 100px

}

#box1{

background: #f00

margin-left: 100px

}

#box2{

background: #0f0

margin-left: 200px

}

#box3{

background: #00f

}

</style>

</head>

<body>

<div class="b1">

<div id="box1" class="box">

</div>

<div id="box2" class="box">

</div>

<div id="box3" class="box">

</div>

</div>

<script>

setTimeout(function(){console.log('start')

CT.to('.b1 #box2', 1, {marginTop:300, opacity:1, ease:CT.Quad.InOut, onEnd:function(){

console.log("complete1")

CT.from('.b1 #box2', 1, {marginTop:100, opacity:0.5, ease:CT.Quad.Out, onEnd:function(){

console.log("complete2")

CT.fromTo('.b1 #box2', 2, {marginLeft:500, opacity:0.5}, {marginLeft:400, opacity:1, ease:CT.Quad.Out, onEnd:function(n){

console.log("complete3", this, n)

}, onEndParams:[50]})

}})

}})

}, 500)

CT.fromTo('.b1 #box1', 1, {

marginLeft:300,

transform:'rotate(80deg)',

opacity:0

}, {

type:'a',

marginLeft:200,

transform:'rotate(300deg)',

opacity:0.5,

repeat:5,

yoyo:true,

delay:1,

ease:CT.Quart.Out,

onStart:function(){

console.log("start")

},

onIteration:function(){

console.log("iteration")

},

onEnd:function(){

console.log("complete")

}

})

</script>

</body>

</html>