javascript动画效果类封装代码

<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>

(0)

相关推荐

  • javascript动画效果打开/关闭层

    js_打开层关闭层效果_我们 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; disp

  • 用JavaScript实现动画效果的方法

    其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果. 这个实例的效果是点击网页上的"开始移动"按钮,则其中的指定图层就会从左到右移动,在这个过程中你点击"停止移动"按钮就会停止移动. 复制代码 代码如下: <html> <head> <title>JavaScript Motion Sample</title> <sc

  • 用javascript来实现动画导航效果的代码

    谁在用这些导航 google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜js写的太多了,那自己写一个吧?好,就这么干! 原理 小时候,总喜欢看动画片吧,动画片是怎样实现的呢?记得妈妈说是一张画一张画切换过去(啊?那一部葫芦兄弟要画多少副画啊? -_-! ),其实我们现在做的也是这样,用一个图片,这个图片里有很多个小图,来显示动画轨迹.按时间来移动图片,那图片不是会动了啊?(不知道,表达清楚了没-语文很重要啊!!) 准备 我们需

  • javascript动画效果类封装代码

    <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) {   clo

  • 使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    目录 代码整理 JavaScript 中的 "帧" 实现"帧"的方法 1. setInterval 2. setTimeout 3. requestAnimationFrame 实现 Timeline 时间轴 实现 start 函数 实现 Animation 类 设计时间线的更新 添加 Delay 属性支持 实现暂停和重启功能 实现 Pause 实现 Resume 上一篇文章<用 JSX 实现 Carousel 轮播组件>中,我们实现了一个 "

  • JavaScript反弹动画效果的实现代码

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:200px; height:200px; position: absolute; top:0; left:200px; background:lightblue

  • JavaScript实现扯网动画效果的示例代码

    目录 演示 技术栈 源码 css控制 js部分 演示 技术栈 JavaScript prototype(原型对象): 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法.Date 对象从 Date.prototype 继承. Array 对象从 Array.prototype 继承. Person 对象从 Person.prototype 继承. 所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例. JavaScript 对象

  • Javascript动画效果(2)

    在前面的文章中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码:border: 4px solid #000;我们发现,鼠标移出后,宽度不是200px了,那么究竟是如何产生这种情况的呢?下面我们通过一个新的例子来分析 html代码: <div id="div1">hello</div> css代码: body,div{ margin: 0px; padding:

  • AngularJS 实现JavaScript 动画效果详解

    AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 我们能够在应用的部分内容当中使用动画来表明一些变化正在发生.在我上一篇文章当中,我讲到了在Angular应用中对CSS动画的支持.在这篇文章当中,我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果. 在Angular当中,CSS和JavaScr

  • Javascript动画效果(3)

    前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的动画效果进行进一步扩充,尽量将我们的框架做到更实用.在这里我们还需要了解两个运动,一个是链式运动,一个是同时运动.它们间的区别分别是:链式运动是指运动一个接着一个(一个运动完成马上进行下一个运动):而同时运动是指所有的运动同时进行.在这里,我们该如何实现呢? 1.链式运动 前面的效果中,我们已经能对任意值进行相应的变化,我们该如何在一

  • Javascript动画效果(4)

    前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1.jpg"/><

  • jquery带动画效果幻灯片特效代码

    本文实例讲述了jquery带动画效果幻灯片插件devrama.slider.分享给大家供大家参考.具体如下: jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果. 运行效果图:                                 -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

随机推荐