为CSS Visual Filters and Transitions 的动画添加自定义加速度
2008-11-18 16:02
423 查看
来到新公司
前辈派给我的第一个任务是做一个类似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
<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) ">
<!-- This is the first content that is displayed. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:0px; width:300px; height:160px;
background:gold"><a href=#> This is DIV #1</a> </DIV>
<!-- This content displays after the first content. -->
<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>
恩 根据不同条件调整加速度 即可达成想要的各种效果 很有趣
var startSpeed=1 //BEGIN SPEED 开始的初始速度
var stepTime=40 //TIME PER TICK 每tick的的时间
var speeda=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()
{
};
Toggle Transition
This is DIV #1
This is DIV #2
这个故事告诉我们
1 IE真臃肿阿，好多东西八百辈子永不到一次
2 IE真强大阿，虽然好多东西八百辈子永不到一次
3 知识不在新旧 用到的时候就是宝贵的知识
4 老知识也可以通过再学习发现新的用途
-0- 真是个啰嗦的大叔阿，写完了 希望对IE CSS感兴趣的弟妹们有帮助
前辈派给我的第一个任务是做一个类似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
<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) ">
<!-- This is the first content that is displayed. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:0px; width:300px; height:160px;
background:gold"><a href=#> This is DIV #1</a> </DIV>
<!-- This content displays after the first content. -->
<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>
恩 根据不同条件调整加速度 即可达成想要的各种效果 很有趣
var startSpeed=1 //BEGIN SPEED 开始的初始速度
var stepTime=40 //TIME PER TICK 每tick的的时间
var speeda=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()
{
};
Toggle Transition
This is DIV #1
This is DIV #2
这个故事告诉我们
1 IE真臃肿阿，好多东西八百辈子永不到一次
2 IE真强大阿，虽然好多东西八百辈子永不到一次
3 知识不在新旧 用到的时候就是宝贵的知识
4 老知识也可以通过再学习发现新的用途
-0- 真是个啰嗦的大叔阿，写完了 希望对IE CSS感兴趣的弟妹们有帮助
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 边框动画 Creating a Border Animation Effect with SVG and CSS 动画边框，很不错！
- 114自定义UITableViewCell（扩展知识：为UITableViewCell添加动画效果）
- andbase框架实现上拉加载，下拉刷新和自定义旋转动画的方式
- AngularJs 自定义ajax服务为请求添加加载动画
- Android动画效果之自定义ViewGroup添加布局动画
- animate() 方法执行 CSS 属性集的自定义动画。
- Animate.css让添加CSS动画像喝水一样容易
- 关于高德地图转换经纬度为屏幕点,方便自定义需链接网络的marker且添加属性动画
- Android自定义视图三：给自定义视图添加“流畅”的动画
- iOS开发之地图-添加多个自定义的大头针及自定义大头针动画
- iOS的Cocos2d-x工程载入CocoStudio制作的动画素材'xxx.csb/csd'文件，添加自定义用户头像图片到动画。
- odoo10普通视图添加自定义css和自定义js
- 给地图自定义的大头针添加下降下落动画
- [HTML] Creating visual skip links in HTML and CSS
- 页面加入_JS,CSS使用,#include添加文件,缓存页面,页面间传递汉字,IsPostBack控制页面的加载,自定义错语页面
- CSS自定义带动画导航条
- [VS Code]跟我一起在Visual Studio Code 添加自定义snippet（代码段），附详细配置
- 自定义ViewGroup，并添加高仿雪球app分享弹出动画。
- 【更新】sass安装（淘宝源安装失败直接下载按照gif动画安装）+webstorm中为scss添加watcher转化为css
- <html5+css3+js>用javascript显示隐藏，添加，删除元素，css动画效果