javascript动画效果类封装代码


Posted in Javascript onAugust 28, 2007

<input id=output3 style="position:absolute;top:300;left:300;"/>
<input id=output1 />
<input id=output2 />
<br/>
<input id=output4 />

<script>
function Animation(target,targetProperty,closure,precision)
{
  closure=closure||function(x){return x;};
  precision=precision||10;
  this.handle;

  var beginTime=new Date();
  var stopTime=new Date();
  this.Begin=function(){
    beginTime=new Date();
    this.handle=setInterval(
      function(){
        var now=new Date();
        target[targetProperty]=closure(now.getTime()-beginTime.getTime());
      },
      precision
    );
       }

  this.Continue=function(){
    var now=new Date();
    beginTime.setTime(now.getTime()-stopTime.getTime()+beginTime.getTime());

    this.handle=setInterval(
      function(){
        var now=new Date();
        target[targetProperty]=closure(now.getTime()-beginTime.getTime());
      },
      precision
    );
  }

  this.Stop=function(duration){

    clearInterval(this.handle);

    if(duration===undefined)
    {
      stopTime=new Date();
      duration=stopTime.getTime()-beginTime.getTime();
    }
    else stopTime.setTime(beginTime.getTime()+duration)
    target[targetProperty]=closure(duration);
  }
}

function StoryBoard(Duration,onfinish,flag)
{
  onfinish=onfinish||function(){};
  var r=new Array();
  r.appendAnimation=function(animation)
  {
    if(animation instanceof Animation)
      this.push(animation);
  }
  r.removeAnimation=function(animation)
  {
    for(var i=0;i<r.length;i++)
    {
      if(r[i]==animation)
      {
        r.splice(i,1);
        break;
      }
    }
  }
  r.start=function(){    
    for(var i=0;i<r.length;i++)
    {
      r[i].Begin();
    }
    setTimeout(
      function(){
        for(var i=0;i<r.length;i++)
        {
          r[i].Stop(Duration);
        }
      },
      Duration
    );
    onfinish();
  }
  return r;

}
//////////////////////////////下面是使用方法////////////////////////////////
function $(id)
{
   return document.getElementById(id);
}
var a1=new Animation($("output1"),"value");
var a2=new Animation($("output2"),"width",function(x){return Math.floor(x/10);});
var a3=new Animation($("output3").style,"filter",function(x){return "alpha(opacity="+Math.floor(x/5000*100)+")";});
var a4=new Animation($("output4").style,"width",function(x){return Math.floor(x*x*x/50000/5000)+"px";});
var s=new StoryBoard(5000);
s.appendAnimation(a1);
s.appendAnimation(a2);
s.appendAnimation(a3);
s.appendAnimation(a4);
s.start();

</script>
<pre>
output1是改变value
output1是改变宽度
output3是淡入
output4是带缓动的宽度
</pre>

Javascript 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
微信小程序 教程之事件
Oct 18 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
Google韩国首页图标动画效果
Aug 26 #Javascript
javascript在一段文字中的光标处插入其他文字
Aug 26 #Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 #Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 #Javascript
javascript下操作css的float属性的特殊写法
Aug 22 #Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 #Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
解决python3 安装不了PIL的问题
2019/08/16 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Tensorflow累加的实现案例
2020/02/05 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python实现图片横向和纵向拼接
2020/03/05 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python中如何添加自定义模块
2020/06/09 Python
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
《乌塔》教学反思
2014/02/17 职场文书
3分钟演讲稿
2014/04/30 职场文书
书香校园建设方案
2014/05/02 职场文书
如何写求职信
2014/05/24 职场文书
市场策划求职信
2014/08/07 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
鲁迅故里导游词
2015/02/05 职场文书
五年级语文教学反思
2016/03/03 职场文书
golang的文件创建及读写操作
2022/04/14 Golang