hooyantsing's Blog

P232_24_steps步进动画规则详解

字数统计: 147阅读时长: 1 min
2020/04/25

P232 24 steps步进动画规则详解

steps

步进动画函数。

不希望连贯的运动,可以使用步进,一帧一帧的动,就像是机械舞。

82dc0d4891573062cada97fe6c8aadad.png

1
2
3
4
//start立即开始步进动画
animation-timing-function: step(4,start);
//end等待一个帧的时间后再步进动画
animation-timing-function: step(4,end);

P233 25 step-start与step-end单步处理

steps-start

简写,相当于step(1,start)。

1
animation-timing-function: steps-start;

steps-end

简写,相当于step(1,end)。

1
animation-timing-function: steps-end;

设置1帧动画时,动画可能会卡住,需要在动画里设置两个动作。

d10dd988dbd352bf9d0c65a1b6694ffb.png

动画:

8379beb5aa2288385e4520b18d0d3f02.png

CATALOG