1.元素运动实现:position+translate
CSS3中translate、transform和translation的区别和联系
http://www.cnblogs.com/mumu-web/p/5706779.html
translation:平滑过渡。需要事件的触发,例如单击、获取焦点、失去焦点等;
translate:移动,transform的一个方法。
transform:变形,包括旋转、扭曲、缩放、移动等;
在本章中,老师引入了一个jquery.transit插件,下面是关于插件的详细介绍
http://ricostacruz.com/jquery.transit/
http://code.ciaoca.com/jquery/transit/
这个插件在jquery1.4+以上的版本中都可以支持, $.fn.transition()
和$.fn.animate()
的效果一样,只是它使用了CSS3过渡。
下面是 transit.js 的使用样例:
$("#box").transition({
opacity: 0.1, scale: 0.3,
duration: 500,
easing: 'linear',
complete: function(){}
});
2.3D变换的梳理
对transform3D、perspective-style、rotateX、rotateY、rotateZ分析很透彻:
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
2D变换,针对X轴、Y轴: transform:translate\rotate\scale\skew\matrix,
http://www.runoob.com/css3/css3-2dtransforms.html
总结:呈现3d效果需要3部分
- 父元素或者当前运动元素上设置透视角perspective,perspective属性的值决定了3D效果的强度。
- 3D视图,设置在父元素上,子元素都可以相对与父元素的平面进行3d变形操作
- 3D变形函数,translate3d、scale3d、rotateX、rotateY、rotateZ等等
如下,要为一个页面中的图片设置3D效果:
舞台
//给舞台加一个视觉距离 perspective:800px;作用于后代,而不作用于自身。
容器
//加一个3D视图声明 transform-style:preserve-3d;只影响这个元素的子元素。
//如果孙元素也有3d效果,那么还必须给子元素设置preserve-3d。
图片1
//增加transform旋转效果:rotate\translate等。
图片2
图片3
3.异步编程梳理
JavaScript的执行流程是分为”同步”与”异步”,同步编程与异步编程的区别:
http://www.oschina.net/translate/event-based-programming-what-async-has-over-sync
异步编程很容易陷入我们常说的“回调地狱”。Jquery1.5+版本中引入了promise对象,避免陷入双层嵌套循环中,
http://www.jb51.net/article/83435.htm
Defferred.promise()
http://www.css88.com/jqapi-1.9/promise/
Defferred.then()
http://www.css88.com/jqapi-1.9/deferred.then/
Defferred.resolve()
http://www.css88.com/jqapi-1.9/deferred.resolve/
4.观察者模式的理解
观察者模式,又叫发布-订阅模式,就是定义一个一对多的依赖关系,当一个对象的状态发生改变,所依赖它的对象将会得到这个改变的通知。
Javascript中引入了 observer.js对象,
5.SVG概述
svg是基于XML标记语言可缩放矢量图形,支持无损缩放的同时也是因为dom节点,所以也支持事件。弊端是dom数量庞大,复杂度高,渲染速度慢,不适合游戏开发。
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
6.CANVAS概述
HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
canvas是标签容器,必须使用JS脚本来绘图。
http://www.runoob.com/html/html5-canvas.html
总的来说:Canvas绘制的总体的步骤
//1.创建HTML页面,设置画布标签
<canvas id="cvs"></canvas>
//2.编写js,获取画布dom对象
<script type="text/javascript">
//3.通过Canvas标签的Dom对象获取上下文
var cvs = document.getElementById('cvs');
//4.创建context对象,getContext('2d')是内建的HTML5对象
var ctx = cvs.getContext('2d'); // 画笔
//5.指定画笔颜色
ctx.strokeStyle = "red";
//6.绘制矩形
ctx.strokeRect(10, 10, 190, 100);
//6.或者填充矩形
ctx.fillRect(110,110,100,100);
</script>