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

元素运动实现

用关键帧可以实现精灵图的切换,同时通过background-size解决了自适应的问题,这样还是不够的,元素还仅仅只是在原地进行帧动画,要让一个元素动起来必须要配合元素坐标的变化

因此在实现上,让元素动起来:

运动 = 关键帧动画 + 坐标变化

关键帧动画我们已经实现了,那坐标的变化就很简单了,一般来说前端能用到的手段

  1. 元素.position定位,修改top,left坐标修改
  2. 通过css3的transform属性的translate

无论用那种需要记住的是元素的坐标 都是 position+translate的值的总和

圣诞主题我采用的是transition+position的处理

transition是css3引入的"过渡"属性,可以让css的属性值在一定的时间区间内平滑地过渡,考虑兼容性问题,这里会额外引入一个插件jquery.transit,这个就是具体封装了transition的CSS3过渡动画的实现

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

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

参考右边的代码,让飞鸟执行一个飞的动作,可以这样用

$(".bird").transition({
    'right': "3rem",
}, 10000,'linear',function(){
    alert("结束")
});

只要给出position的坐标值,同时给出变化的时间就让元素动起来了,结合一下精灵动画,是不是看起来物体运动就是那么回事了?

具体的实现看右边编辑区

任务

点击运动按钮,通过transition方法,让"鸟"从右边飞出来,飞出右边3rem的位置,请在右边对应的68行区域写出对应的代码来

?不会了怎么办

    $(".bird").transition({
        'right': "3rem",
    }, 10000,'linear',function(){
        alert("结束")
    });

 

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?