Alpha 过滤器及其动态效果播放器


语法:

HTML: <ELEMENT STYLE="filter:Alpha(sProperties)" ... >
脚本: object.style.filter="Alpha(sProperties)"

可能的值:

sProperties 用于指定指定过滤器提供一个或多个属性的串,如"style=1 ,startX=100,startY=100"。

对象属性/特性说明:

属性 特征 描述
enabled Enabled 设置/返回当前的Alpha过滤器可否允许。
finishOpacity FinishOpacity 设置/返回结束时不透明梯度值,该值可从0(完全透明)到100(完全不透明),默认值为0
finishX FinishX 设置/返回不透明梯度结束点的X坐标,没有默认值
finishY FinishY 设置/返回不透明梯度结束点的Y坐标
opacity Opacity 设置/返回不透明梯度值可,从0(完全透明)到100(完全不透明),默认值为0
startX StartX 设置/返回不透明梯度起始点的X坐标
startY StartY 设置/返回不透明梯度结束点的Y坐标
style Style 设置/返回不透明梯度的形状待征。可以取值为0 - 统一的 ,1 -线性的 ,2 -放射性的 ,3 - 矩形的。

使用说明:

  您在使用Aphla过滤器时,可以通过设置Style属性来设置不透明梯度的形状待征(可以是0 - 均衡的 ,1 -线性的 ,2 -放射性的 ,3 - 矩形的),下表显示了Style与其它属性的关系(Y:有效;N :无效)

Style 0—Uniform
(统一的)
1—Linear
(线性的)
2—Radial
(放射性的)
3—Rectangular
(矩形的)
opacity Y Y Y Y
finishOpacity N Y Y Y
finishX,finishY N Y Y Y
startX,startY N Y Y Y

为了在网页中使用脚本设置它们,您可以将需要过滤的对象设置一个ID值,如下:

<div ID=ID名 style="width:层宽度;height:层高度;
                    Alpha(style=1,startx=100,startY=100,opacity=50)">
    在此放入您需要的过渡的内容
</div>

用Javascript可以设置它们的相关属性,如想将Opacity更改为60, 则代码如下:

  ID名.filters.item("Alpha").opacity=60;

以下即是一个效果演示程序:

演示效果区
类别(Style):
透明度(Opacity):
结束透明度(FinishOpacity):
StartX:
StartY:
FinishX:
FinishY:

右边为可选择的属性列表,我们将这些元素名(name)和ID号均定义特性名,如类别style,其元素名便为"style", 一旦这些属性的值发生了改变OnChange,则可调用以下函数来完成:

function ChangeProperty(Obj) '入口参数:Obj对象名
{
    var name=Obj.name; //对象名即中属性名
    var value=Obj.value; //对象的值即中属性值
   //利用eval来执行相关的Alpha命令
    eval('filterDIV.filters.item("Alpha").'+name='"+value+'"');
    if(name= = "style")//为改变类别
 {   t=(value=="1") //只有当类别为1 -linear时,StartX,StartY,finishX,finishY才有效
        startX.disabled=t;
        startY.disabled=t;
        finishX.disabled=t;
        finishY.disabled=t;
        //只有当Style=0 -   Uniform  时,FinishOpacity才无效
       finishOpacity.disabled=(value=="0");
   }
}

动态效果演示

  利用上述介绍的一些参数说明,我们可以完成一些特技功能,如:若将filterDIV.filters.item("Alpha").Style设置为0(均衡的),将opacity值从0逐加到100,则可实现淡出效果,相反,将opacity从100到0,则可淡入效果。

function Fade(Type,First)
//淡入淡出:Type=0 淡入 否则 淡出
//First=1 第一次调用否则表示后来调用。
{  var obj=AlphaDIV.filterDIV.filters.item("Alpha");
   if(typeof(First)=="undefined" || First) First=1;else First=0;
   obj.Style=0;
  if(First==1) //第一次调用
     {
     if(Type==0) //类别为淡入
          opacity=0; //则开始透明度为0
     else
          opacity=100;//开始透明度为100
     isEnd=false;
   }
  else
     if(Type==0)
       {  opacity++; obj.opacity=opacity;
          if(opacity==100) isEnd=true; else isEnd=false;
        }
     else
        {  opacity--; obj.opacity=opacity;
          if(opacity==0) isEnd=true; else isEnd=false;
        }
 if(!isEnd)
      window.setTimeout("Fade("+Type+",0)",500);
}
  当然,若在图片完全淡出后,此时将图片更换成另一张图片,再淡入它,则可以实现多张图片的淡入淡出技术,此时其代码需要做一些小的改变:
var iList=new Array("images/1.jpg",
                    "images/2.jpg",
		 "images/3.jpg",
		 "images/4.jpg");//图片列表文件
var cn=0; //当前显示的是第几个(从0开始)
var isExit=false;//是否中断退出
function mFade(Type,First) 
//淡入淡出:Type=0 淡入 否则 淡出
//First=1 第一次调用否则表示后来调用。
{ var obj=AlphaDIVExp.filters.item("Alpha");
  var n;
  if(typeof(First)=="undefined" || First) First=1;else First=0;
  if (isExit && First==0) return;
  if(First==1) //第一次调用
    {    isExit=false;
        if(Type==0) n=100; //类别为淡出则开始不透明度为100
        else  n=0;//开始不透明度为0
        isEnd=false;
    }
else
    { n=obj.opacity;
      if(Type==1) //淡入
        { n++;if(n>=100) isEnd=true; else isEnd=false;}
     else //淡出
        { n--;if(n<=0) isEnd=true; else isEnd=false;}
    }
obj.opacity=n;
if(!isEnd) //没有完成,继续进行
    window.setTimeout("mFade("+Type+",0)",5);
else
{    if(Type==0) //当前是淡出结束
    {cn++;Type=1;
     if(cn>=iList.length) cn=0;
     ShowImageID.src =iList[cn]; //显示下一张图片
    }
    else  Type=0; //转换当前的显示类别
window.setTimeout("mFade("+Type+",1)",5);
}
TypeDIV.innerText=Type + ":"+ cn +":"+isEnd
}

  如果想中断演示,可以调用以下函数:  function Stop(){isExit=true;}。以下即是演示这种这种迷人的效果示例,请点击这里开始多图淡入淡出。想停止时,点击停止演示

 

Alpha动态效果播放器

  毕竟,仅有几种效果不会吸引人的注意,而制作每种效果又需要编写相关的代码,这的确让让人不可接收,而且很费时间。如果我们编写一个能播放命令的Player,改变相关的播放命令即可完成动态效果的播放,它的确会是另一种味道了。

  想先偿偿鲜的话, 你可以在下面的Player中一试身手,上面的列表中预设了几种效果。

演示效果区
效果演示:  
以下是一个非常Cool的动态Alpha效果播放器,它的命令格式为"属性名11=属性值11,...,属性名1n=属性值1n;...;属性名n1=属性值n1,...,属性名nn=属性值nn"。其中属性名可以取值为s,x,y,fx,fy,o,fo六种,属性值为0-100之间。比如,您想将当前的效果设置为淡入效果,则命令串为"s=0,o=0;o=100"(它表示首先将显示模式为o,不透明度为0,然后透明度一直达到100)。

试用后,您有什么感觉!想自己动手做一个吗?跟我来吧!

Alpha动态效果播放器实现方法

  以下我将以如下的格式命令作为播放命令串:

属性名11=属性值11,...,属性名1n=属性值1n;
属性名n1=属性值n1,...,属性名2n=属性值2n;
........
属性名n1=属性值n1,...,属性名nn=属性值nn

说明:
  1)属性名可以取值为s(style),x(startx),y(starty),fx(finishX),fy(finishY),o(opacity),fo(finishOpactiy)六种,属性值为0-100之间;如果属性名为s(style),则属性值只能是(0-3)之间。
  2)每一种效果之间用分号(;)分开,前面表示初始时的效果,后一项则表示转换后的效果。如您实现淡入效果,则命令串为"s=0,o=0;o=100"(它表示首先将显示模式为o,不透明度为0,然后透明度一直达到100)。

以下先讲解相关的函数说明

  1)PlayAlpha(ObjectName) //用于迎创PlayAlpha ,其中ObjectName表示您的使用的对象的ID号。
  2)一旦对象建立,则可以使用该对象进行相关的操作
方法:
  Object.SetSpeed(n); //改变播放的速度 n=0-1000之间,n越大速度越慢
  Object.Play(s); //开始播放命令
  Object.Stop(); //停止当前的播放
属性:
  Object.Status //返回当前播放器的状态,若Status不是1, 表示出错
  Object.Error //返回当前播放器的状态字符串

以下即是相关的函数说明

function PlayAlpha(ObjectName) //Filter对象名ID
{
    this.pName=new Array("s","x","y","fx","fy","o","fo");
    this.SrcName=new Array("style","startx","starty","finishx","finishy","opacity","finishopacity");
    this.Object=ObjectName;     this.MaxStep=0;
    this.Speed=5;    this.x=0;this.y=0;
    this.fx=0;this.fy=0;
    this.o=100; this.fo=100;
    this.ex=0; this.ey=0;
    this.efx=0; this.efy=0;
    this.eo=0; this.efo=0;
    this.Cmd=new Array();
    this.CmdCount=0;
    this.CurNo=0;    this.Step=0; this.MaxStep=0;
    this.Status=0; // 0 保留 1 正在播放 -1 中断,或者播放完成 -2 分析命令出错
    this.Error=""; //当前的错误信息串
    this.Init=PlayAlpha_Init;
    this.SetSpeed=PlayAlpha_SetSpeed;
    this.SetValue=PlayAlpha_SetValue;
    this.GetValue=PlayAlpha_GetValue;
    this.GetName=PlayAlpha_GetName;
    this.Play=PlayAlpha_Play;
    this.Stop=PlayAlpha_Stop;
    this.SetInitValue=PlayAlpha_SetInitValue;
    this.Analyze=PlayAlpha_Analyze;
    return(this);
}
function PlayAlpha_GetName(s)
{
    s=s.toLowerCase(); 
    for(i=0;i<this.pName.length;i++)
    if(s==this.pName[i]) return(this.SrcName[i]);
    return(""); 
}
function PlayAlpha_GetValue(name)
{ //取得对象的相关属性值
    name=this.GetName(name);
    if(name!="")
        return(eval(this.Object+'.filters.item("Alpha").'+name))
    else
        return(""); 
}


function PlayAlpha_SetValue(name,value)
{ //设置对象的相关属性
    name=this.GetName(name);
    if(name!="" && !isNaN(value))
    { value=parseInt(value,10);
     if(value>=0 && value<=100 && name!="style" || name=="style" && value<=3 && value>=0) 
     eval(this.Object+'.filters.item("Alpha").'+name+'='+value);
    } 
}


function PlayAlpha_SetSpeed(n)
{ //设置对象的播放速度
    if(n>=0 && n<=1000) this.Speed=n;
}

function PlayAlpha_Stop() //停止播放
{
   if(this.Status==1) this.Status=-1;
}

function PlayAlpha_Init()
{ //对象初始化
    var m;
    this.x=this.GetValue("x");     this.y=this.GetValue("y");
    this.fx=this.GetValue("fx");   this.fy=this.GetValue("fy");
    this.o=this.GetValue("o");    this.fo=this.GetValue("fo");
    this.s=this.GetValue("s");     this.ex=this.x;
    this.ey=this.y;    this.efx=this.fx;
    this.efy=this.fy;    this.eo=this.o;
    this.efo=this.fo;
    if(this.CmdCount>1 && this.CurCmdNo<=this.CmdCount && this.CurCmdNo>=1)
    { this.SetInitValue(this.Cmd[this.CurCmdNo-1],true);
        this.SetInitValue(this.Cmd[this.CurCmdNo],false);
        this.Step=0;
        //以下计算转换的最大步长
        m=Math.abs(this.o-this.eo);
        m=Math.max(m,Math.abs(this.x-this.ex)); 
        m=Math.max(m,Math.abs(this.y-this.ey)); 
        m=Math.max(m,Math.abs(this.fo-this.efo)); 
        m=Math.max(m,Math.abs(this.fx-this.efx)); 
        m=Math.max(m,Math.abs(this.fy-this.efy)); 
        this.MaxStep=m;
    } 
else 
    this.MaxStep=0;
}

function PlayAlpha_Play(s) //需要Play的命令串,返回是否有错
{   var m1 ,m2;
    if(this.Status==1) //当前有对象正在播放,返回
    { this.Error="正在播放中,不能接收另一种播放方式!,";return(true);}

    this.Cmd=s.split(";"); this.CmdCount=this.Cmd.length;
    if(this.CmdCount>1) //需要设置两个或两个变换以下才能Play
    { this.Status=0;
        for(i=0;i<this.CmdCount && this.Status!=0;i++)
        { this.Analyze(this.Cmd[i]); //分析命令串
           if(this.Status!=0)//没能过,则返回
            {this.CmdCount=0;this.CurCmdNo=0;
              return(true); 
            } 
        }
    //通过,则开始Play
    this.CurCmdNo=1;//当前播放的是第一个转换
    this.Status=1 ;//正在播放
    this.Init(); this.Error="正在播放"; StartPlay();
    return(false)
    } 
else 
    { this.Status=-2; this.Error="没有可播放的命令串!"; return(true); } 
}

function PlayAlpha_Analyze(s) //分析命令串是否合法
{
    s=s.toLowerCase();
    var nvl=s.split(",");
    for(var j=0;j<nvl.length;j++)
    {if(nvl[j]!="")
        { var nv=nvl[i].split("=");
          if(nv.length==2 && !isNaN(nv[1]))
            {  n=parseInt(nv[1]);
               if(n<0 || n>100 || nv[0]=="style" && n>3)
                { this.Status=-2;
                  this.Error="设置的值必须在0-100之间,并且s取值为0-100之间";
                  return(false); 
                }
              if(this.GetName(nv[0])=="") //是否有该属性
                { this.Status=-2;
                  this.Error="不能识别的属性:"+nv[0];
                   return(false);
                }
            }
        else
            { this.Status=-2;
              this.Error="命令格式必需为\"属性名[s,x,y,fx,fy,o,fo]=属性值[0-100,0-3]\"";
              return(false);
            } 
    }
   else
    { this.Status=-2; this.Error="命令串不能为空值!"; return(false); }
} 

if(nvl.length>0)
    {this.Status=0; return(true); }
else
    {this.Status=-2; this.Error="命令串不能为空值!"; return(false); }

}


function PlayAlpha_SetInitValue(s,isInit)
{
  var n,nvl=s.split(",");
  for(var j=0;j<nvl.length;j++)
  { nv=nvl[j].split("="); n=parseInt(nv[1]);
    switch(nv[0])
    {case "x":if(isInit) {this.x=n;this.SetValue("x",n);} this.ex=n; break;
     case "y":if(isInit) {this.y=n;this.SetValue("y",n);} this.ey=n; break;
     case "o":if(isInit) {this.o=n;this.SetValue("o",n);} this.eo=n; break;
     case "fx":if(isInit) {this.fx=n;this.SetValue("fx",n);} this.efx=n; break;
     case "fo":if(isInit) {this.fo=n;this.SetValue("fo",n);} this.efo=n; break;
     case "fy":if(isInit) {this.fy=n;this.SetValue("fy",n);} this.efy=n; break; 
     case "s": if(isInit) this.SetValue("s",n);break;
   }
  }
}

function StartPlay()
{
var c=0,t;
if(Obj.Status==-1) //中断则退出
    return;
if(Obj.Step>Obj.MaxStep) //当前的命令串Play完成
{   Obj.CurCmdNo++;
    if(Obj.CurCmdNo>=Obj.CmdCount) //已播放完成
    { Obj.Status=-1; Obj.Error="播放完成"; return; }
      Obj.Init();//对象初如化;
    }
t=(Obj.Step/Obj.MaxStep);
c=(Obj.ex-Obj.x)*t+Obj.x+0.5;Obj.SetValue("x",c);
c=(Obj.ey-Obj.y)*t+Obj.y+0.5;Obj.SetValue("y",c);
c=(Obj.eo-Obj.o)*t+Obj.o+0.5; Obj.SetValue("o",c);
c=(Obj.efo-Obj.fo)*t+Obj.fo+0.5; Obj.SetValue("fo",c);
c=(Obj.efx-Obj.fx)*t+Obj.fx+0.5; Obj.SetValue("fx",c);
c=(Obj.efy-Obj.fy)*t+Obj.fy+0.5;Obj.SetValue("fy",c);
Obj.Step=Obj.Step+1;
window.setTimeout("StartPlay()",Obj.Speed); //继续进行下一步的播放
}

比如,如果您将过渡的效果层定义为AlphaDIVExp, 那么我们可以这样建立这个动态效果播放器

    var Obj=new PlayAlpha("AlphaDIVExp");

若要播放它,调用如下的命令即可

function Play(s)
{ if(Obj.Play(s))
    alert(Obj.Error);
}

以下是一些常见动态效果的播放命令,聪明的读者会写出更多:

发表评论】 【评论查看】 【推荐于友】 【打印本页】 【关闭窗口