日期:2014-05-16  浏览次数:20317 次

用JS编写JQuery插件版的动画播放器

最近再做个一个移动平台的小网游,其中部分页面要用到一个连续播放图片的小插件,于是乎写了个简单的。

代码很简单,播放个小动画就够了,注释部分有时间我会补上。这里只是简单讲下,_scripts定义了一组序列用来表示动画'boss'的每一帧,我省略了一部分。其代码如同:

?

_scripts={
'boss':[
['图片地址 as string', '持续时间 as int', '跳转帧序号 as int']
],[...]
}

其中持续时间是个参量,默认间隔每100毫秒为一个单位,这个参量指定了其与默认间隔的倍数,默认为1。跳转帧指定了其播放后的下一帧位置,指该数组的键,不提供则在本帧播放后自动停止。

?

使用时像这样:

?

<script type="text/javascript" src="../js/lib/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../js/lib/player.js"></script>
<script type="text/javascript">
$(function(){
    $('#_player').player('帧序列称',{i:“开始帧编号”});
})
</script>

?

HTML的部分只要这样:

?

 <div id="_player"></div>
?

提供三个常规方法:

  1. play([帧序列称?as string], options) :播放某组帧动画。
  2. stopIt():终止动画
  3. setScript(帧序列称?as string):设置帧序列

注:options包含了interval, width, height, i, m几个设置变量。其中interval表示默认帧间隔,毫秒计;width,height分别表示容器宽高;i表示默认播放此帧,默认0;m暂时保留。

?

如果在构造时指定了"帧序列名",则在加载完成后将自动播放动画,不过目前暂时没写预加载处理机制。此方法可在ios或android上跑,暂定如此。

?

期待高人指点!

?