运动的状态控制，H5+JS+CSS3实现七夕言情教程-慕课网

第8章背景音乐
编程：8-1 HTML5 audio

运动的状态控制

通过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');

?不会了怎么办

index.html
pageA.css
style.css
Swipe.js

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
* {
       padding
       : 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/////////
//页面滑动 //
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

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

问答
评论
笔记
资料下载
代码

全部精华我要发布

背景图显示问题

最新回答 / jjccjwdlh

定位有问题

1 回答 1048 浏览

2018-09-06

请大家给我解释以下这个代码

最赞回答 / 想转IT的机械狗

当点击了按钮之后设置小男孩的left值为当前的left

3 回答 1143 浏览

2019-06-19

'left': $("#content").width() + 'px',

最新回答 / 相见恨晚sos

document.getElementById("id").style.width = document.body.clientWidth + "px";

1 回答 1422 浏览

2018-08-15

var left = $boy.css('left'); $boy.css('left',left);

最新回答 / 慕田峪7218554

固定boy图片的坐标，使他不再移动

3 回答 1542 浏览

2018-04-22

<script type="text/javascript" src="http://img.mukewang.com/down/55ac9ea30001ace700000000.js"></script>

最新回答 / 慕粉_李小白

好的，谢谢

2 回答 2072 浏览

2017-05-03

.transition is not a function

最赞回答 / 非典型材料IT男

虽然知道原因了但是怕还有人为此困扰所以还是来说一下。这个就是因为你没有引入jquery.transit.js这个插件的原因！

1 回答 1745 浏览

2017-05-25

可以都使用animation// 开始 $("button:first").click(function() { $boy.removeClass('pauseWalk')//**有对应的stop方法** $boy.addClass('slowWalk').animate({ 'left': $("#content").width() + 'px', }, 10000); }); // 暂停 $("button:l...

2 回答 1025 浏览

2018-07-15

关于大家一致讨论小男孩点击暂停之后，再次点击开始后漂移以及时间不对的问题！可以通过如下这句代码可以完美解决"$boy.stop().removeClass('pauseWalk').addClass('slowWalk')",也不用像yuyang123那位同学一样通过大量的js代码去判断！

最赞回答 / JohnDoe4290627

为什么多次开始与暂停后，最后会发现小男孩在目标位置之前就停止动画消失不见了呢，是不是因为多次暂停导致总时间10s发生了误差减小？

2 回答 1184 浏览

2019-04-23

走路的状态不能改变

最新回答 / D__C

这里既可以用CSS3的属性实现。也可以用老师的写法，$boy.addClass('slowWalk').transition({})是JQuery的一个函数，此处采用链式写法。给你两个参考，望采纳：http://www.htmleaf.com/jQuery/Layout-Interface/201501281289.htmlhttp://code.ciaoca.com/jquery/transit/

1 回答 926 浏览

2016-08-23

关于文件里面的一个js文件

最新回答 / 力哥

jQuery.transit过度效果

3 回答 1003 浏览

2016-08-23

transtion

最新回答 / echo_kinchao

表现效果一样但是本质有很大的区别

1 回答 1892 浏览

2016-08-23

暂停后在原地走，动作没有停止。再按开始按钮继续向前走，没有出现其他同学所说的"漂移"现象是怎么回事？？

最赞回答 / 慕仙2215045

在暂停按钮里这么写，用完动作和走路的class之后都已移出掉。重新点击的时候再添加。

$boy.removeClass('pauseWalk').removeClass('slowWalk')

5 回答 1832 浏览

2019-04-19

暂停开始切换问题

+ 我来回答回答最高可+2积分

3 回答 1537 浏览

2022-07-18

暂停后，娃娃自己动的问题

最赞回答 / 艾伦Aaron

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

2 回答 1343 浏览

2017-02-03

全部我要发布

最热最新

只看我的

七夕主题课程素材图片立即下载
七夕主题课程音乐素材立即下载

3-4 运动的状态控制