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 相关文章推荐
深入认识javascript中的eval函数
Nov 02 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
JavaScript事件委托实例分析
May 26 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
小程序实现发表评论功能
Jul 06 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
React优化子组件render的使用
2019/05/12 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python圣诞树编写实例详解
2020/02/13 Python
python如何求100以内的素数
2020/05/27 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
会计专业推荐信
2013/10/29 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
班级团队活动方案
2014/08/14 职场文书
庆七一活动总结
2014/08/27 职场文书
中学团支部工作总结
2015/08/13 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
zabbix配置nginx监控的实现
2022/05/25 Servers
使用Django框架创建项目
2022/06/10 Python