Class: Film

new Film(node, config)

图片帧（逐帧）动画控制，支持sprite图及序列图片两种方式
版本:
  • 1.0
作者:
  • Aidenxiong
继承:
依赖:
  • module:../../resource/zepto/zepto.js
源码:
Example
     var film = new mo.Film(document.getElementById('test'), {
           resource: []
        });

  • 参数

  • 属性

  • 方法

  • 名称 类型 参数 描述
    node HTMLElement 帧动画播放的节点
    config object <optional>
    		 帧动画配置参数
    Properties
    名称 类型 参数 默认值 描述
    resource array | string 帧资源图片，可以是数组也可以是单张图片，单张图片会被认为是sprite图
    totalFrame number <optional>
    		 10 总帧数
    spriteDirect number <optional>
    		 0 使用sprite图片的时候，可以指明sprite平铺方向 1为横向 2为纵向 如果值为0 那么根据长宽比进行判断
    index number <optional>
    		 0 默认显示第几帧
    playTime number <optional>
    		 1000 滚动执行时间
    aniType string <optional>
    		 linear 运算轨迹
    onLoading function <optional>
    		 资源加载时的回调
    onComplete function <optional>
    		 资源加载完成后的回调
    onPlaying function <optional>
    		 每次完成一张图片切换时的回调
    aniComplete function <optional>
    		 每次自动完成一次动画播放后的回调

  • animationId :[type]

    播放动画ID
    源码:

    curIndex :Number

    当前停留在的帧序号
    源码:

    filmNode :[type]

    真正执行帧动画的节点
    源码:

    filmSize :Object

    帧动画的尺寸(宽高)
    源码:

    frameStyles :Array

    每帧对应的样式/src
    源码:

    isLoading :Boolean

    是否正在加载
    源码:

    resource :Array

    需要加载的资源
    源码:

    totalFrame :Number

    帧数
    源码:

  • constructor()

    构造函数
    继承自:
    • mo.Base#constructor
    源码:

    next() → {object}

    跳转到下一帧
    源码:
    Returns:
    film对象
    Type
    object

    off()

    绑定事件
    继承自:
    • mo.Base#off
    源码:

    on()

    绑定事件
    继承自:
    • mo.Base#on
    源码:

    pause() → {object}

    暂停播放
    源码:
    Returns:
    film对象
    Type
    object

    play(t, dir) → {object}

    播放帧动画
    源码:
    Returns:
    film对象
    Type
    object

    playByIndex(index, opt) → {object}

    通过告诉停留在第几个位置上来定位滑动位置
    源码:
    Returns:
    film对象
    Type
    object

    playByNum(num, opt) → {object}

    通过规定播放的帧数来滑动
    源码:
    Returns:
    film对象
    Type
    object

    prev() → {object}

    跳转到上一帧
    源码:
    Returns:
    film对象
    Type
    object

    trigger()

    触发事件
    继承自:
    • mo.Base#trigger
    源码:
    •

    多图形式运行Demo二维码

    Loading...

    雪碧图形式运行Demo二维码

    Loading...