无线代码库开发分享

1,093 views

Published on

  • Be the first to comment

无线代码库开发分享

  1. 1. 无线代码库开发分享<br />陈振焯<br />
  2. 2. 概况<br />Event<br />Animation<br />Scroller<br />
  3. 3. Event<br />
  4. 4. 点击触摸屏触发事件:<br /><ul><li>touchstart
  5. 5. touchend
  6. 6. mousemove
  7. 7. mousedown
  8. 8. mouseup
  9. 9. click</li></ul>520ms<br />
  10. 10. 添加自定义的tap事件:<br /><ul><li>touchstart
  11. 11. touchend
  12. 12. tap
  13. 13. mousemove
  14. 14. mousedown
  15. 15. mouseup
  16. 16. click</li></ul>20ms<br />
  17. 17. Tap:<br /><ul><li>touchstart和touchend间移动小于阀值即触发</li></ul>Double Tap:<br /><ul><li>double tap 与tap代码类似,合在一起
  18. 18. 在elem添加属性tapLastTime
  19. 19. 触发double tap后,阻止tap事件</li></ul>在tap事件判断element.doubleTapFlag<br />用setTimeout保证判断在double tap结束后再执行<br />
  20. 20. taphold:<br /><ul><li>touchstart时setTimeout,移动和touchend时clearTimeout
  21. 21. 无法阻止浏览器上默认的长按事件的发生</li></ul>swipe:<br /><ul><li>记录位移距离,高于某值touchend时触发</li></ul>Pinch:<br /><ul><li>gesturestart, gesturechange, gestureend
  22. 22. 阻止touchstart, touchmove, touchend</li></li></ul><li>Event<br />问题:<br /><ul><li>两个以上手指触摸时出现错误
  23. 23. Android兼容</li></li></ul><li>Animation<br />
  24. 24. CSS3 Animation:<br />
  25. 25. CSS3 Animation:<br />运动结束后,样式复原:<br />
  26. 26. CSS3 Animation:<br />若不想复原,需手动添加与动画结束时一样的样式<br />
  27. 27. CSS3 Animation:<br />通过keyframes彻底控制动画过程<br />运动结束后难以定格样式<br />跟js没什么关系,无法用js控制运动过程<br />
  28. 28. CSS3 Transition:<br />
  29. 29. CSS3 Transition:<br />接口:<br />
  30. 30. CSS3 Transition:<br />动画结束:<br /><ul><li>webkitTransitionEnd 作用在元素上的transition动画结束后触发
  31. 31. 多个动画叠加时,webkitTransitionEnd触发混乱,难以管理
  32. 32. 抛弃webkitTransitionEnd,用setTimeout执行动画结束回调</li></li></ul><li>CSS3 Transition:<br />动画停止:<br /><ul><li>getComputedStyle获得运动过程中的样式值
  33. 33. element.style[“”]获得最终的样式值
  34. 34. 去除webkitTransitionProperty属性,停止动画</li></li></ul><li>CSS3 Transition:<br />Bug:<br />baidu.m.fx.stop里:<br />
  35. 35. CSS3 Transition:<br />webkitTransform:<br /><ul><li> translate, scale, rotate, skew, matrix
  36. 36. 3D变换会启用硬件加速
  37. 37. 封装后叠加问题</li></li></ul><li>Scroller<br />
  38. 38. viewport<br /><ul><li> 无滚动条
  39. 39. 无法在屏幕固定元素</li></li></ul><li>应用场景<br />
  40. 40. 实现<br />使用webkitTransform和webkitTransition模拟滚动<br />Wapper<br />position:relative<br />Overflow:hidden<br />Content<br />Drag this element<br />
  41. 41. 技术点<br /><ul><li> 边界判断,拉回
  42. 42. 内容变更
  43. 43. 动力加速,摩擦力减速(插件)
  44. 44. 仿真滚动条(插件)</li></li></ul><li>iScroll<br />已实现区域滚动的所有功能<br />
  45. 45. 需要做的事<br /><ul><li> 简化代码
  46. 46. 分离插件</li></ul>14.7k => 12.5k, 7.5k, 6k<br /><ul><li>完善细节</li></li></ul><li>仿真滚动条插件分离实现<br />滚动条与滚动同步,需要在scroll众多方法上插入程序<br />
  47. 47. 存在的问题<br /><ul><li>侵入式插件
  48. 48. 低版本iOS不知名bug</li></li></ul><li>End<br />Thanks~<br />

×