关于stickek.js的分析

coding 学习

库地址

stickerjs

库的特点

• 生成便利贴的效果
• 没有其他库或框架的依赖
• 通过css3的transform特性进行动画交互
• 只支持鼠标事件
• 通过.sticker-img指定图案
• 通过.sticker-shadow来控制阴影的透明度
• 通过Sticker.init('.sticker')来进行初始化

文件结构分析

全局变量

_direction 记录触发的方向
_savePos 记录element的定位信息
_prefixes 浏览器前缀的记录数组
_aniTrans css trasnlate的属性值
_setTrans 重置css trasnlate的属性值为0
newStyle 新建一个style标签，入面记录各个方向的阴影值

全局函数

vendor(el, prop) 在相应的标签上相关的属性添加浏览器前缀
css(el, prop) 在相应的标签上设置css
createEl(tag, prop) 生成新的标签
checkDerection(e, pos, sizeQ) 检测事件发生时的进入方向
checkPos(e, pos, size) 记录相关的位置信息
onEnter(e, value) 事件进入时的处理函数
onLeave(e, value) 事件离开时的处理函数
onMove(e, value) 事件移动时的处理函数
sticker.init(dom) 当dom为string时返回相应的的标签，再创建相关的标签进行挂载

sticker.init函数调用顺序

创建的element层次

• rootElement
  
  • container
    position: 'relative',
    width: size + 'px',
    height: size + 'px',
    overflow: 'hidden'，
    
    • mask
      position: 'relative',
      width: size + 'px',
      height: size + 'px',
      overflow: 'hidden'
      
      • move
        position: 'relative',
        borderRadius: '50%',
        width: size + 'px',
        height: size + 'px',
        overflow: 'hidden'
        
        • front
          classname: 'sticker-img sticker-front',
          position: 'relative',
          borderRadius: '50%',
          width: size + 'px',
          height: size + 'px',
          zIndex: 1
        • depth
          classname: 'sticker-shadow'
          position: 'absolute',
          width: size + 'px',
          height: size + 'px',
          left: '0',
          top: '0',
          zIndex: 1
        • back
          position: 'absolute',
          borderRadius: '50%',
          width: size + 'px',
          height: size + 'px',
          left: '0',
          top: '0',
          zIndex: 3,
          backgroundColor: '#ffffff',
          transform: 'translate(' + size + 'px, ' + 0 + 'px)',
          overflow: 'hidden'
          
          • backImg
            classname: 'sticker-img sticker-back'
            position: 'relative',
            borderRadius: '50%',
            width: size + 'px',
            height: size + 'px',
            opacity: '0.4'
          • backShadow
            classname: 'sticker-shadow'
            position: 'absolute',
            width: size + 'px',
            height: size + 'px',
            left: '0',
            top: '0',
            zIndex: 1

onEnter函数调用过程

1.cpos变量记录container相对于视口的位置及宽高
2.mpos变量记录container相对于document的left和top值

var cpos = value.container.getBoundingClientRect(),
    mpos = {x:cpos.left + window.pageXOffset, y:cpos.top + window.pageYOffset};

3.调用checkDerection函数确定事件发生的进入方向
4.调用checkPos函数记录位置信息

_savePos = checkPos(e, mpos, value.size);
_savePos.pos = mpos;

5.根据获得的_savePos值设置相应的css的值

  var bx = _savePos.bx, by = _savePos.by, sx = _savePos.sx, sy = _savePos.sy, bs = _savePos.bs;
      value.backShadow.className = value.depth.className = 'sticker-shadow ' + bs;
css(value.mask, {
    transition: _setTrans,
    width: value.size + 'px',
    height: value.size + 'px',
    transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.move, {
    transition: _setTrans,
    transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.back, {
    transition: _setTrans,
    transform: 'translate(' + bx + 'px, ' + by + 'px)'
});
css(value.backImg, {
    transform: 'scaleX(' + sx + ') scaleY(' + sy + ')'
});
css(value.depth, {
    transform: 'translate(' + -10000 + 'px, ' + -10000 + 'px)'
});

onLeave函数调用过程

1.检测_savePos是否为null,是则返回

if (_savePos == null) return;

2.重设为onEnter的初始状态

var bx = _savePos.bx, by = _savePos.by;
css(value.mask, {
    transition: _aniTrans,
    width: value.size + 'px',
    height: value.size + 'px',
    transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.move, {
    transition: _aniTrans,
    transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.back, {
    transition: _aniTrans,
    transform: 'translate(' + bx + 'px, ' + by + 'px)'
});
css(value.depth, {
    transform: 'translate(' + -10000 + 'px, ' + -10000 + 'px)'
 });

3.设置_savePos为null

_savePos = null;

onMove函数调用过程

checkPos函数的运行过程

1.传人的pos参数记录发生事件对象的element元素相对于document的x和y值
2.
fx为contanier相对于document的x值;
fy为contanier相对于document的x值;
tx为事件对象发相对于document的x值与fx的差，即事件发生对象距离相关的element元素的x值;
ty为事件对象发相对于document的y值与fy的差，即事件发生对象距离相关的element元素的y值;
a为相关element元素的大小与tx的差值，即事件发生对象与相关element元素右边的距离的正4负值;
b为相关element元素的大小与ty的差值，即事件发生对象与相关element元素下边的距离的负值;
c d e f为tx ty a b相应值的一半;

var fx = pos.x, fy = pos.y, tx = e.pageX - fx, ty = e.pageY - fy, value,
    a = size - tx, b = size - ty, c = tx >> 1, d = ty >> 1, e = a >> 1, f = b >> 1;

3.通过不同的_direction值，即不同的事件发生位置计算value的值

• _direction为0，即左侧发生

  • bx为-size，by为0
  • sx为-1，sy为1
  • bs为shadowL
  • bmx为-size+tx，bmy为0
  • bsw为tx，bsh为size
  • bsx为a，bsy为0
  • cw为size-c，ch为size
  • cx为c，cy为0
  • dw为c，dh为size
  • dx为c - (c >> 1)，dy为0
    

    (_direction == 0) value = {bx:-size, by:0, sx:-1, sy:1, bs:'shadowL', bmx:-size + tx, bmy:0, bsw:tx, bsh:size, bsx:a, bsy:0, cw:size - c, ch:size, cx:c, cy:0, dw:c, dh:size, dx:c - (c >> 1), dy:0}; // left

• _direction为1，即右侧发生

  • bx为size，by为0
  • sx为-1，sy为1
  • bs为shadowR
  • bmx为tx，bmy为0
  • bsw为a，bsh为size
  • bsx为0，bsy为0
  • cw为size-e，ch为size
  • cx为0，cy为0
  • dw为e，dh为size
  • dx为size - a + (e >> 1)，dy为0
    

    (_direction == 1) value = {bx:size, by:0, sx:-1, sy:1, bs:'shadowR', bmx:tx, bmy:0, bsw:a, bsh:size, bsx:0, bsy:0, cw:size - e, ch:size, cx:0, cy:0, dw:e, dh:size, dx:size - a + (e >> 1), dy:0}; // right

• _direction为2，即上侧发生

  • bx为0，by为-size
  • sx为1，sy为-1
  • bs为shadowT
  • bmx为0，bmy为-size+ty
  • bsw为size，bsh为ty
  • bsx为0，bsy为b
  • cw为size，ch为size-d
  • cx为0，cy为d
  • dw为size，dh为d
  • dx为0，dy为d - (d >> 1)
    

    (_direction == 2) value = {bx:0, by:-size, sx:1, sy:-1, bs:'shadowT', bmx:0, bmy:-size + ty, bsw:size, bsh:ty, bsx:0, bsy:b, cw:size, ch:size - d, cx:0, cy:d, dw:size, dh:d, dx:0, dy:d - (d >> 1)}; // top

• _direction为3，即下侧发生

  • bx为0，by为size
  • sx为1，sy为-1
  • bs为shadowB
  • bmx为0，bmy为ty
  • bsw为size，bsh为b
  • bsx为0，bsy为0
  • cw为size，ch为size-f
  • cx为0，cy为0
  • dw为size，dh为f
  • dx为0，dy为size - b + (f >> 1)
    

    value = {bx:0, by:size, sx:1, sy:-1, bs:'shadowB', bmx:0, bmy:ty, bsw:size, bsh:b, bsx:0, bsy:0, cw:size, ch:size - f, cx:0, cy:0, dw:size, dh:f, dx:0, dy:size - b + (f >> 1)}; // bottom

4.返回value值