达萨法法师法师

123

121312312

111

-要想实现3D的效果，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。

-可以呈现3d的属性有，translate3d、scale3d、rotateX、rotateY、rotateZ等等

-perspective(length) 为一个元素设置三维透视的距离。

CSS3的Animation有八个属性

1. animation-name ：动画名
2. animation-duration：时间
3. animation-delay：延时
4. animation-iteration-count：次数
5. animation-direction：方向
6. animation-play-state：控制
7. animation-fill-mode：状态
8. animation-timing-function：关键帧变化

animation:bird-slow 400ms steps(3) infinite;
@keyframes bird-slow {
    0% {background-position-x: -0px}
    100% {background-position-x: -273px}
}

steps(3)的意思就是：keyframes设置的0%-100%的段中，background-position的的x坐标会变化3次

rem和em单位一样，都是一个相对单位,不同的是em
是相对于元素的父元素的font-size进行计算,rem是相对
于根元素html的font-size进行计算,这样一来rem就绕开
了复杂的层级关系，实现了类似于em单位的功能。
默认情况下浏览器给的字体大小是16px，按照转化关系
16px = 1rem

技术点分解：

rem布局

帧动画原理

营造3d视角

canvas绘图

svg绘图

设计模式与异步代码梳理

总结：呈现3d效果需要3部分

1.  父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度

2. 3D视图，设置在父元素上，子元素都可以相对与父元素的平面进行3d变形操作

3. 3D变形函数，translate3d、scale3d、rotateX、rotateY、rotateZ等等

1. 让元素动起来：

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

   2.坐标的变化一般来说前端能用到的手段

• 元素.position定位，修改top,left坐标修改

• 通过css3的transform属性的translate

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

  3.$(".bird").transition({
        'right': "3rem",//指离右边的距离
     }, 10000,'linear',function(){
        alert("结束")
    });   这段代码是对你所设的对象进行过渡，不是对你的自适应帧动画的类进行过渡。

为解决必须通过绝对尺寸获取图片坐标，否则就会出错问题，一种是基于CSS3的scale处理直接可以让元素缩放，另一种就是通过background-size 让精灵图实现自适应缩放。

如何让单图填充一个元素呢? 这里我想到了一个办法，把整图整体缩放，就是整体缩放。3*3的矩阵，我横竖按照矩形的数量比缩放100%。按照矩形的排列整体缩放背景图：

background-size: 300% 300%;

1. keyframes这个方法要写到类的外面。

2. 若background-size改了，就把background-position改到与size一致。
   

一. CSS3的Animation有八个属性

1. animation-name ：动画名

2. animation-duration：时间

3. animation-delay：延时

4. animation-iteration-count：次数

5. animation-direction：方向

6. animation-play-state：控制

7. animation-fill-mode：状态

8. animation-timing-function：关键帧变化 //控制时间的属性。

二. steps() 函数用来切换多个精灵图的，形成帧动画，类似setTimeout的处理感觉。

三. 注意浏览器的兼容性需要加前缀：

-moz-animation: bird-slow 400ms steps(1,start) infinite;

四. 如果实现3张图帧动画效果，代码如下

animation:bird-slow 400ms steps(3) infinite;
@keyframes bird-slow {
    0% {background-position-x: -0px}
    100% {background-position-x: -273px}
}

注：要记得加前缀，所写的animation前缀是什么，该语句前缀就是什么。

1.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

'orientationchange' in window //手机浏览器是否支持orientationchange方法。

resizeEvt = 'orientationchange'；//如果支持返回orientationchange。

resizeEvt = 'resize'；//如果不支持返回resize。

//注：手机浏览器对于横屏竖屏切换事件原来都是resiz方法，后来随着技术的发展大部分手机浏览器加入了新的方法orientationchange

2.16px = 1rem

3. 设置根字体大小：20 * (docEl.clientWidth / 320) + 'px';

1.

 transform-style: preserve-3d;

1、canvas的arc方法

//arc的语法如下：arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

2.arc画圆

 var snowElement = document.getElementById("snowflake")    
 var canvasContext = snowElement.getContext("2d");    
 //开始一个画布中的一条新路径（或者子路径的一个集合）    
 canvasContext.beginPath();    
 //用来填充路径的当前的颜色，白色的雪球    
canvasContext.fillStyle = "rgba(255, 255, 255, 0.8)";    
//一个中心点和半径，为一个画布的当前子路径添加一条弧线    
//坐标，圆，沿着圆指定弧的开始点和结束点的一个角度    
//弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历    
canvasContext.arc(100,100,50,0,Math.PI*2,true);     
//关闭子路径    
canvasContext.closePath();    
//fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径    
canvasContext.fill();

1.t添加close样式

element.addClass("close").one("animationend webkitAnimationEnd", function(event) {
    complete()
 })

1、perspective

    浏览器的支持

    目前浏览器都不支持perspective

    Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

    定义和用法

    perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

    当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

1.绘制形状polygon

<svg viewBox="0 0 1000 800">      
    <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713"></polygon>        
</svg>

2、填充颜色：fill或者通过style。

3、线性渐变：linearGradient

<defs>
    <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" stop-color="#FCF0BC"></stop>
       <stop offset="0%" stop-color="#FCF0BC"></stop>
    </linearGradient>
</defs>

• 渐变颜色必须放在defs元素中

• 需要给渐变色元素设置id值，否则别的元素无法使用这个渐变色

•  渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下：
  offset属性：这个定义了该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色都是设置成0%，最后一种设置成100%。
  stop-color属性：这个很简单，定义了该成员色的颜色。
  stop-opacity属性：定义了成员色的透明度。
  x1,y1,x2,y2属性：这两个点定义了渐变的方向，默认不写的话是水平渐变，上面例子中同时也创建了一个垂直渐变。

•  渐变色的使用，如例子中所示，直接用url(#id)的形式赋值给fill或者stroke就可以了。
  

1.h5的audio元素

var audio = new Audio(url);   //创建一个音频对象并传入地址
audio.loop  = loop ||  false; //是否循环
audio.play(); //开始播放

1.transform的scale属性可以针对元素进行缩放

-webkit-transform: scale(2);//放大两倍
-moz-transform: scale(2);

2.默认是50% 50%可以单独设置

-webkit-transform-origin:71% 72%;

3.

.effect-out{
    animation: effectOut 8s ease-in-out forwards;
}
@keyframes effectOut{
    0% { opacity:1; }
    100% {transform: scale(20); opacity:0; }
}

1. querySelector() 方法仅仅返回匹配指定选择器的第一个元素

2. e.target 是目标对象，e.event是目标所发生的事件。
   

//Canvas绘制的总体步骤
//1.创建HTML页面，设置画布标签
    <canvas id="cvs"></canvas>
//2.编写js，获取DOM对象
    var cvs = document.getElementById('cvs'); //画布
//3.获取2D上下文
    var ctx = cvs.getContext('2d'); // 画笔
//4.设置绘制线样式、颜色
  ctx.fillStyle = "red";
  ctx.strokeStyle = "red";
//5.绘制矩形，或者填充矩形(x,y,w,h)
  ctx.strokeRect(10, 10, 190, 100);
  ctx.fillRect(20, 10, 20, 20);
  
  直线：
   ctx.moveTo(50,50);
   ctx.lineTo(200,200);
   ctx.stroke();
  圆：
   cxt.beginPath();   
   cxt.arc(50,50,40,2,Math.PI*2,true);    
   cxt.closePath();   
   cxt.stroke();
  渐变：
   var c=document.getElementById("myCanvas");
   var cxt=c.getContext("2d");
   var grd=cxt.createLinearGradient(0,0,175,50);
   grd.addColorStop(0,"#FF0000");
   grd.addColorStop(1,"#00FF00");
   cxt.fillStyle=grd;
   cxt.fillRect(0,0,175,50);
  图像;
   var c=document.getElementById("myCanvas");
   var cxt=c.getContext("2d");
   var img=new Image()
   img.src="flower.png"
   cxt.drawImage(img,0,0);

1. svg是基于XML标记语言可缩放矢量图形，支持无损缩放。

2. SVG的优势：

   文件体积小，能够被大量的压缩

   图片可以无限放大而不失真（矢量图的基本特征）

   在视网膜显示屏上效果极佳

   能够实现互动和滤镜效果

3. viewport是SVG图像的可见区域，个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。

   在<svg>元素中使用width和height属性来指定viewport的尺寸。

4. <svg width="100px" height="50px"></svg>//单位可带可不带,默认为px

5. 详情见：https://developer.mozilla.org/zh-CN/docs/Web/SVG
   

https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js

 //1.传建一个观察者对象
  var observer=new Observer();
 //2. 通过subscribe方法，实现一个函数的观察
 observer.publish("任务名",处理函数) 
 //3. 通过publish触发观察事件，在任意时刻触发了这个观察的任务名，将会触发这个事件订阅subscribe方法
 observer.punlish("任务名")
 //4. 取消事件订阅，意味着就不会执行了
 observer.unsubscribe("任务名")

1. deferred对象是jQuery对Promises接口的实现
   

   详解见https://www.cnblogs.com/losesea/p/4415676.html

2. var dtd=$Deferred();//创建
   dtd.resolve();    //成功
   dtd.then();          //执行回调