无线代码库开发分享
Upcoming SlideShare
Loading in...5
×
 

无线代码库开发分享

on

  • 932 views

 

Statistics

Views

Total Views
932
Views on SlideShare
932
Embed Views
0

Actions

Likes
1
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    无线代码库开发分享 无线代码库开发分享 Presentation Transcript

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