元素运动实现，H5+JS+CSS3 实现圣诞情缘教程-慕课网

第1章效果预览与介绍
视频：1-1 课程简介(03:16)

第2章设计思路与蕴涵的知识点
视频：2-1 整体介绍(01:40)
视频：2-2 编程思路(02:15)

第8章最终效果与总结
编程：8-1 最终效果与总结

元素运动实现

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

因此在实现上，让元素动起来：

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

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

元素.position定位，修改top,left坐标修改
通过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("结束")
    });

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <style type="text/css"> .bird { min-width: 4rem; min-height: 2rem; top: 10%; right: 0; position: absolute; z-index: 10; background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png); background-size: 300% 100%; } .birdFly { /*写法1*/ -moz-animation-name: bird-slow; -moz-animation-duration: 400ms; -moz-animation-timing-function: steps(1,start); -moz-animation-iteration-count: infinite; /*写法2*/ -webkit-animation:bird-slow 400ms steps(3) infinite; } @-webkit-keyframes bird-slow { 0% { background-position: -0% 0%; } 100% { background-position: -300% 0%; } } @-moz-keyframes bird-slow { 0% { background-position: -0% 0%; } 50% { background-position: -100% 0%; } 75% { background-position: -200% 0%; } 100% { background-position: -300% 0%; } } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script> </head> <body> <div class="bird birdFly"></div> <button>点击运动</button> </body> <script type="text/javascript"> $("button").on("click",function(){ /** * 通过transition的方式改变运动 */ ？ }) var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

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

3-4 元素运动实现