achieve animation and capsulate the function that come out animation effect - myjavawork

公告

achieve animation and capsulate the function that come out animation effect

In the javascript to achieve animation effects in general accordance with the following few ideas to achieve:

1.With the setInterval () function to call the cycle of。

2.setInterval function in the call process, changing the style of the corresponding DOM object。

3.Have a start value and end value, while providing value to control the speed of the animation display。

1.Using animation to achieve a constant rate of change is very simple animation

//o 要进行动画的对象

//attr style属性

//add  Incremental
//t   时间间隔

//start 起始值

//end 结束值


function animate(o,attr,add,start,end,t) {

  var max=Math.max(start,end),

      min=Math.min(start,end);

  var interval=setInterval(function () {

    if (add>0) {

      if (min>=max) {clearInterval(interval);}

      min+=add;

      o.style[attr]=min+"px";

    } else {

      if (max<=min) {clearInterval(interval);}

      max+=add;

      o.style[attr]=max+"px";

    }

  },t);

}

与方法相关的HTML代码

<style type="text/css">

#oDiv {

width:200px;

height:200px;

border:3px ridge aqua;

background:blue;

position:absolute;

font-size:10px;

left:150px;

top:150px;

filter:alpha(opacity=40);

}

</style>

</head>

<body class="redStyle">

  <h1>动画</h1>


  <div id="oDiv">


  </div>

</body>

2.In the use of the animation process, the Use keys on the way to pass property values and add more animation effects more than

类似于这样的一种情况.

$("#block").animate({ 

    width: "70%",

    opacity: 0.4,

    marginLeft: "0.6in",

    fontSize: "3em", 

    borderWidth: "10px"

  }, 1500 );

});

相应的示例代码

/*

参数说明

curTime:当前时间,即动画已经进行了多长时间,开始时间为0

start:开始值

dur:动画持续多长时间

alter:总的变化量

*/

//left 从100 增加到150，增加了50

function animate(o,start,alter,dur,fx) {

  var curTime=0;

  var t=setInterval(function () {

    if (curTime>=dur) clearTimeout(t);
//通过遍历对象的方式来实现一次性添加多个属性值
    for (var i in start) {

      o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";

    }

    curTime+=50;

    

  },50);

}

以下是几个效果，要进行调用的话，直接使用函数调用即可


function Linear(start,alter,curTime,dur) {

  return start+curTime/dur*alter;

}//最简单的线性变化,即匀速运动


function Quad(start,alter,curTime,dur) {

  return start+Math.pow(curTime/dur,2)*alter;

}

实例代码

animate(oDiv,{

    'width':100,

    'left':100,

    'top':50

  },900,Quad);

Javascript used in a transparent animation

With IE and W3C in the realization of the transparent effect, there are some differences: IE Use alpha (opacity = value greater than 0 and less than 100) to achieve a transparent effect, the W3C is Use filters, especially filters firefox to achieve transparency Effect.

Therefore, the effect of achieving transparency, transparency and animation are often used in combination, the following is a method of animation packages transparent

第一：The difference between a browser to achieve the cancellation of transparency

var setOpacity = (document.documentElement.filters)?function (obj,val) {

  obj.style.filter = "alpha(opacity="+val+")";

}:function (obj,val) {

  obj.style.opacity = val/100+" ";

};

第二：实现透明动画的效果

function opacityAnimate(o,start,alter,dur,fx) {

  var curTime=0;

  var t=setInterval(function () {

    if (curTime>=dur) clearTimeout(t);

    //o.style.opacity=fx(start,alter,curTime,dur)+"px";

    setOpacity(o,fx(start,alter,curTime,dur));

    curTime+=50;

  },50);

一些实现动画的效果

function Linear(start,alter,curTime,dur) {

  return start+curTime/dur*alter;

}//最简单的线性变化,即匀速运动

function Quad(start,alter,curTime,dur) {

  return start+Math.pow(curTime/dur,2)*alter;

相应实例的调用代码

var oDiv=$("oDiv");


setTimeout(function () {

  opacityAnimate(oDiv,100,-100,1000,Quad);

},1000);

posted on 2011-03-29 18:57 myjavawork 阅读(240) 评论(0) 收藏举报

刷新页面返回顶部

In the javascript to achieve animation effects in general accordance with the following few ideas to achieve:

1.Using animation to achieve a constant rate of change is very simple animation

2.In the use of the animation process, the Use keys on the way to pass property values ​​and add more animation effects more than

Javascript used in a transparent animation

2.In the use of the animation process, the Use keys on the way to pass property values and add more animation effects more than