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

走路的实现

用精灵实现了人物脚步的变化,这样还不行,人物看起来还只是原地在踏步,如果要人物有走动的效果需要让人物坐标变化起来,3-2节介绍了让坐标变化的2种方式

  • 传统的top,left坐标修改
  • CSS3中的transform属性

这里采用修改坐标left的方式让人物变动,为什么不采用translate? 其实都可以,做案例就尽可能的用不同的方法来实现。

这里采用了CSS3的transition来修改left的值,同样原理3-2节也介绍了,我们这里引入了一个插件jquery.transit,这个就是具体封装了transition的CSS3过渡动画的实现

接下来代码部分就非常简单了

transition的使用与jQuery提供的animate()方法基本差不多,所以使用上很容易接受

$boy.transition({
    'left': $("#content").width() + 'px',
}, 10000,'linear');

我们只要给出left的坐标值,同时给出变化的时间就让人物动了,结合一下精灵动画,是不是看起来人物走路在感觉就是那么回事了?

具体的实现看右边编辑区,通过点击开始走路按钮,实现人物走路效果

任务

打开index.html文件,在代码的61行填入相应代码,通过transition渐变的方式让人物走动

$boy.transition({
    'left': $("#content").width() + 'px',
}, 10000, 'linear', function() {});
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?