章节
问答
课签
笔记
评论
占位
占位

运动的状态控制

通过CSS3的animation与transition的结合实现了人物的走路的效果。一般来说运动的状态都是需要可控的,这样才方便我们做进一步的操作。

animation的暂停方式

CSS3的animation直接提供一个animation-play-state的样式来控制动画的暂停处理。增加一个控制暂停样式,写动画样式的时候特别注意下不同浏览器的兼容性,加上对应的前缀

.pauseWalk {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
}

只需要在对应的有animation动画人物元素节点上,通过动态增加删除这个样式就可以控制这个精灵的开始与暂停了,非常简单

transition的暂停方式

至于transition,一般来说要暂停的地方都是一开始就程序设定好的目标点,因此这个其实是不需要控制的,这个也没办法控制,这个是一个动画过渡的效果,浏览器只提供了一个动画结束的回调。当然可以有一个变通的办法,做一个强制改变目标过渡值的处理

如何操作:

具体可以看右边的代码块,暂停方法内transition强制做了一个设置left坐标的处理,达到一个暂停的效果,但是这样是有问题的,下一次的启动必须等上一次动画的时间结束

不难看出animation要比transition强大多了

任务

打开index.html文件,在代码的90行填入相应代码,通过定义样式的方式,让精灵动画暂停

$boy.addClass('pauseWalk');
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?