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与其他库冲突的方法介绍
Jan 02 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
webpack入门+react环境配置
Feb 08 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
vue实现购物车的监听
Apr 20 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
繁简字转换功能
2006/07/19 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Django时区详解
2019/07/24 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
儿子婚宴答谢词
2014/01/09 职场文书
毕业设计计划书
2014/01/09 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
网吧消防安全责任书
2014/07/29 职场文书
会计稽核岗位职责
2015/04/13 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
微信搭讪开场白
2015/05/28 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书