为CSS Visual Filters and Transitions 的动画添加自定义加速度

最新推荐文章于 2022-08-02 23:08:47 发布

weixin_33875564

最新推荐文章于 2022-08-02 23:08:47 发布

阅读量114

点赞数

来到新公司

前辈派给我的第一个任务是做一个类似outlook slider的小效果可以把两个层的变化做成动画。

按照常理说这个效果需要用flash来做但是客户要求不能用脚本外的其他东西幸好是针对ie开发我想起来ie5.5 beta的新特性

DirectX filters（滤镜）了。没错 M$ 5年前就提供了这个现成的效果。IE啊你这个让人又恨又爱的东西你不这么强大又怎么会占这么多资源你。。。你该减肥了你。。。

具体可以参看

http://msdn.microsoft.com/en-us/library/ms673540(VS.85).aspx

后面的Transitions都是动画效果哦

只要有本地msdn的同学都可以在本地搜索

CSS Visual Filters and Transitions

这个索引

恩标准例子如下

Code


<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
height:300px;  filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='HIDE', bands=1) ">



    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
    background:gold"> This is DIV #1  </DIV>



    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px;
    width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
    </DIV>
</DIV>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') {
        bTranState = 1;
        oDIV2.style.visibility="visible";
        oDIV1.style.visibility="hidden";}
    else {
        bTranState = 0;
        oDIV2.style.visibility="hidden";
        oDIV1.style.visibility="visible";}
        oTransContainer.filters[0].Play();}
</SCRIPT>

http://samples.msdn.microsoft.com/workshop/samples/author/filter/Slide.htm 点此直接察看效果

随后问题就来了前辈要求的页面并不是这样匀速直线的交换两个桢而是因受力而加速的样子

这样 Play() 命令肯定是不足以胜任的。仔细看看参考我发现了一个不错的切入点

Attributes/Properties

Show:

Attributes/Properties

Methods

Attribute	Property	Description
bands	bands	Sets or retrieves the number of strips into which the content is divided during the transition.
duration	Duration	Sets or retrieves the length of time the transition takes to complete.
enabled	Enabled	Sets or retrieves a value that indicates whether the filter is enabled.
	Percent	Sets or retrieves the point in a transition at which to capture the display for a static filter output.
slideStyle	SlideStyle	Sets or retrieves the method used to reveal the new content.
	status	Retrieves the state of the transition.

恩。。。。 Percent。。。看起来很淫荡

只要定时指派正确的percent 就可以控制速度了

我淫荡的笑了

于是有了下面的代码

Code
<html>

<body>
<script language=Javascript>

var startSpeed=0   //BEGIN SPEED 开始的初始速度
var stepTime=42   //TIME  PER TICK 每tick的的时间
var speeda=0.1    // acceleration 加速度
var IsMoving =false  // lock of "moving"    是否正在移动中如果在移动中则不处理请求
var NowPercent     // now progress percent目前移动的百分比
var NowSpeed       // now speed 目前的移动速度

    var bTranState = 0;   // shown layer's index 目前占有显示的层标记
    function fnToggle() {

    if    (IsMoving ==false)    //lock the action if moving 如果目前并非在移动中则初始化移动
    {
        //init 初始化目前的状态
            NowPercent=0
        NowSpeed=0
        IsMoving=true
        // init end  初始化结束

        //apply filter, the modify after "Apply()" and  "Play() or set Psercent"  will make effect to the  resualt  image
        //应用Filter 必须有这具声明在apply之后 play或set percent之前的所有操作都将记录为结果
            oTransContainer.filters[0].Apply();

        if (bTranState == '0')
        {
                    bTranState = 1;
                    oDIV2.style.visibility = "visible";
                    oDIV1.style.visibility = "hidden";
            }
            else {
                    bTranState = 0;
                    oDIV2.style.visibility = "hidden";
                    oDIV1.style.visibility = "visible";
        }
        setTimeout("Movestep()", stepTime);  //beging movment 根据预定的tick速度进行移动。
        }




    }

function Movestep()
    {

        if (IsMoving)
        {
        NowSpeed=NowSpeed+speeda          //acceleration  add to  speed  先处理加速度
        NowPercent=NowPercent+NowSpeed         //count progress  然后计算本tick的百分比
        if (NowPercent>100) NowPercent=100    //overflow control  if  finish  如果到头了则防止溢出

        oTransContainer.filters[0].Percent=NowPercent   //apply the percentage 把目前百分比应用

        if (NowPercent!=100)
        {
            setTimeout("Movestep()", stepTime);    // next tick call  下一次timer
        }
        else
        {
            IsMoving=false                         //  release the action lock 释放操作锁定
        }
}

        }


function Moveto()
{

};

</script>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
height:300px;  filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='PUSH', bands=1) ">



    <DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:0px; width:300px; height:160px;
    background:gold"><a href=#> This is DIV #1</a>  </DIV>



    <DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:0px;
    width:300px; height:160px; background: yellowgreen; "> <BR> <a href=#>This is DIV #2
  </a>  </DIV>
</DIV>

</body>
</html>

恩根据不同条件调整加速度即可达成想要的各种效果很有趣

Toggle Transition

This is DIV #1

This is DIV #2

这个故事告诉我们

1 IE真臃肿阿，好多东西八百辈子永不到一次

2 IE真强大阿，虽然好多东西八百辈子永不到一次

3 知识不在新旧用到的时候就是宝贵的知识

4 老知识也可以通过再学习发现新的用途

-0- 真是个啰嗦的大叔阿，写完了希望对IE CSS感兴趣的弟妹们有帮助