H5+JS+CSS3 实现圣诞情缘--学习心得2

最新推荐文章于 2024-01-20 14:07:53 发布

LeapMotion1

最新推荐文章于 2024-01-20 14:07:53 发布

阅读量1.8k

点赞数 1

分类专栏：前端开发文章标签： css3 javascript

本文链接：https://blog.csdn.net/leapmotion1/article/details/72956004

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>