动态滤镜小结
动态滤镜
动态滤镜可以为页面添加动人的淡入淡出、图象转化效果,分为两种blend(混合)和reveal(显示),前者可以使对象渐渐消失或出现,后者提供了24种图象转化的效果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型,参数等等,还用到脚本语言控制它的状态,首先,在开始一个动态效果之前,先需要进行装备(Apply),然后播放(Play)动态效果,在动态效果进行中还可以中断动态效果(Stop)
对象名.filters(滤镜数值).Apply()
对象名.filters(滤镜数值).Play()
对象名.filters(滤镜数值).Stop()
对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断,该值为0时,表示滤镜未执行,为1时,表示滤镜已经完成,为2时表示滤镜在执行中。
在定义filter时,如上面所提到的,可以有混合(“filter:blendTrans(duration=时间数值)”,duration表示滤镜执行需要的时间,单位为秒)和显示(“filter:revealTrans(duration=时间数值,transition=过渡类型)”,过渡类型为从0-23的数值)两种
图形转换滤镜参考
0.方形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
交叉形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
菱形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
1.方形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
交叉形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
菱形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)
2.圆形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)
加号形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
星形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)
3.圆形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
加号形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in)
星形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
4.向上逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
5.向下逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)
6.向左逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
7.向右逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)
8.垂直百叶窗效果
progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)
progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)
progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)
9.水平百叶窗效果
progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)
progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)
progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down)
progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up)
10.横向棋盘效果
progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12)
progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)
progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2)
progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)
progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60)
11.纵向棋盘效果
progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)
progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)
progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2)
progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)
progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60)
12.随机溶解效果 progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
13.左右向中部收缩 progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
14.中部向左右展开 progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
15.上下向中部收缩 progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)
16.中部向上下展开 progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal)
17.阶梯状向左下展开 progid:DXImageTransform.Microsoft.Strips(motion=leftdown)
18.阶梯状向左上展开 progid:DXImageTransform.Microsoft.Strips(motion=leftup)
19.阶梯状向右下展开 progid:DXImageTransform.Microsoft.Strips(motion=rightdown)
20.阶梯状向右上展开 progid:DXImageTransform.Microsoft.Strips(motion=rightup)
21.随机水平线效果 progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)
22.随机垂直线效果 progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
23.随机变换效果 progid:DXImageTransform.Microsoft.RevealTrans(enabled=ture,transition=23)
24.标准渐变转化效果 BlendTrans(enabled=true,percent=10)
25.可调渐变转化效果 progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0)
26.向右下插入效果 progid:DXImageTransform.Microsoft.Inset(enabled=ture)
27.马赛克效果 progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
28.时钟形射线擦除 progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)
29.楔子形射线擦除 progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
30.辐射形射线擦除 progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)
31.隐藏式幻灯片效果
progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1) progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)
32.推动式幻灯片效果
progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)
progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
33.交换式幻灯片效果
progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)
progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
34.螺旋形收缩效果 progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)
35.隐藏式伸展效果 progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
36.推动式伸展效果 progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)
37.旋转式伸展效果 progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
38.风车轮转动效果 progid:DXImageTransform.Microsoft.Wheel(spokes=20)
39.梯度擦除效果
progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)
progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)
progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)
40.Z字形曲折效果 progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
注:头23个滤镜(指有标号的)是常见滤镜,均可用第23号滤镜(排在文章中的第一种滤镜)变换参数获得。如1号滤镜可以将23号滤镜中的transition=23改为transition=1。