9step源码浅析

shellzhang

2014-12-21

内容概要

  • 背景介绍
  • 基本协作模式
  • 相关数据结构与类结构
  • 亮点与不足

背景介绍

基本协作模式

  1. 加载舞台相关xml——stage.xml
  2. 加载各种资源(图片、音频文件)——asset
  3. 初始化视图与子视图
  4. 初始化视图中的事件与监听函数
  5. 启动渲染循环
  6. 用户交互,改变视图状态
  7. 渲染循环触发,擦除重绘,并返回5

相关数据结构与类结构(一)

  • System
    • 判定系统特性(isMobile, supportCanvas, etc.)
  • RunLoop
    • 渲染循环
    • 基于requestAnimationFrame触发渲染方法
  • RenderEngine
    • 初始化canvas对象
    • 基于视图类型,调用对应渲染方法
  • NotiCenter
    • 消息订阅与发布

相关数据结构与类结构(二)

  • Vec2、Mat4、Rect——辅助类
    • 矢量、矩阵、矩形的一些操作集合
    • canvas上绘制的形状,无法自行响应用户的交互(点击、拖拽等)
    • 需要根据用户点击的位置,是否在形状所在矩形区域内,进而触发绑定的方法

相关数据结构与类结构(三)

  • AssetItem
    • 各类资源——图片、文本、json、xml、声音
    • imageLoader()
    • textLoader()
    • jsonLoader()
    • xmlLoader()
    • soundLoader()
  • AssetLoader
    • 资源加载器

相关数据结构与类结构(四)

  • View——所有可见视图的基类
  • 基本形状
    • Shape
    • Motion——动画
    • ViewContainer——View的容器,可以包含各种View
  • Page
    • 继承自ViewContainer
    • 子类包括
      • NormalPage
        • Index
        • Question
        • Result
      • Stage
        • Steps9

相关数据结构与类结构(五)

  • PopupView
    • 各种模态窗口:答案提示、分享到朋友圈
  • ProgressBar
    • 初始进度加载条
  • Button
    • 按钮的交互效果

亮点与不足

  • 市面上有不少H5页面制作平台
  • 9step的亮点
    • 完全canvas,DIAO!
    • xml可配置
  • 9step的不足
    • 图片帧实现动画,预加载大量图片,网络开销与延迟
    • 一些动画效果实现相比css3复杂
    • 基于requestAnimationFrame,比css3有性能损耗
    • xml的文件生成?
  • 值得借鉴的地方
    • 整个渲染框架的设计

Thanks!

9step源码浅析

By shellzhang

9step源码浅析

九步之遥源码结构分析

  • 960