达萨法法师法师

如何理解解耦的问题 如何理解解耦？ 在订阅发布模式和直接调用处理函数时，我只看到了当被调用的处理函数B不存在时，触发者本身A的函数还能正常执行。而当被调用的处理函数B本身发生错误时，两种模式中A都会报错，导致代码停止。 订阅发布模式：function A(){处理某些事情；publish（"消息"，事件名）；处理某些事情；}//假设事件名对应的处理函数Function B 直接调用：function A(){处理某些事情；B（“消息”）；处理某些事情；}

绘制形状 在svg中绘制多边形的标签是polygon，这是SVG中定义的基本形状，可以通过polygon的points绘制出多边形组成的坐标点，points 属性定义多边形每个角的 x 和 y 坐标。多边形至少要有3个边，所以points至少要定义3组坐标才能创建一个三角图形。可以观察下points中是由6组坐标绘制的一个五角星图（当然我是用工具生成的坐标） 填充颜色 默认svg会用是黑色填充颜色，所以我们需要设置新的颜色。一般可以通过fill填充颜色。同时svg也是dom节点也可以通过style直接用样式属性设计元素的样式。这里填充颜色用到了linearGradient元素。 线性渐变 使用linearGradient元素即可定义线性渐变，每一个渐变色成分使用stop元素定义 <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> 1. 渐变色元素必须要放到defs元素中； 2. 需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色。 3. 渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下： offset属性：这个定义了该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色都是设置成0%，最后一种设置成100%。 stop-color属性：这个很简单，定义了该成员色的颜色。 stop-opacity属性：定义了成员色的透明度。 x1,y1,x2,y2属性：这两个点定义了渐变的方向，默认不写的话是水平渐变，上面例子中同时也创建了一个垂直渐变。 4. 渐变色的使用，如例子中所示，直接用url(#id)的形式赋值给fill或者stroke就可以了。

animation-fill-mode，定义动画播放时间之外的状态,顾名思义，要么就是在动画播放完了之后给它一个状态 animation-fill-mode : none | forwards | backwards |both; none，播放完之后不改变默认行为，默认值，forwards则是停在动画最后的的那个画面，backwards则是回调到动画最开始出现的画面，both则应用为动画结束或开始的状态。

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; }
}