动画

紧跟着时代的补步伐,现在我们学习的是移动web中的动画(animation)

我觉得动画按照我们之前学习的那样,应该很简单,就是一个不断连续的画面,如果他不是和我们平时看的动画一样,那么他这个名字我觉得一点作用也没有。

 

动画的使用比较简单,我说的简单不是操作简单,而是他使用起来特别简单,只需要两步,第一步是定义动画,第二步是使用动画。

定义动画:

第一种方式

@keyframes 动画名称{

  from{从哪里}

  to{到哪里}

}

 

 

 

第二种方式

@ketframes 动画名称{

  0%{动画时长百分比0开始}

  25%{动画时长百分之25开始}

  50%{动画时长百分之50开始}

  75%{动画时长百分之75开始}

  100%{动画时长百分之100结束时}

}

 

 

 

使用动画:就是在CSS属性中添加动画属性

/* 动画的控制属性,连写状态
animation: name(名称) duration(持续时间) timing-function(速度曲线) delay(延迟时间) iteration-count(重复次数:infinite无限循环) direction(动画执行方向:alternate) fill-mode(动画执行完毕的状态:forwards/backwards); */

 

 

 

 

 

使用steps实现逐帧动画

属性名:animation-timing-fuction

属性值:steps(数字)

在实际使用中,动画的逐帧显示多用于精灵图,精灵图就是多个小图组成的一个大图。我感觉这里没有难点,无非就是精灵图的位移什么的,还有精灵图中的定位,应该是使用逐帧动画中的等分割,所以我们只需要定位一次,然后等分就可以了。

 

posted @ 2022-08-13 22:35  漫步火星  阅读(7)  评论(0编辑  收藏  举报