Silverlight遮罩动画效果.docVIP

Silverlight遮罩一直不知道这么做，知道今天我想了个方法，也不知道好不好，全当抛砖引玉了。 我所说的遮罩，是像flash中的一样。在网上看了一些关于Silvelright遮罩教程，貌似和我想要的不一样，他是通过UIElement的Clip属性实现的，但是clip不能做动画，静态的还行。 下面是用OpacityMask的方法实现一个百叶窗的效果： 最终效果是这样的 1．放两张图片，两张图片重叠起来，当然Image2是在上层。 2．设置image2的OpacityMask属性为渐变。 注意：上图中将黑色渐变点拖动到白色渐变点上重合，你会发现白色始终在黑色的上层，所以说渐变点有上下顺序，根据新建先后，后建的会在上一层。 Code: Image x:Name=image2 Source=1534087_550x550_0.jpg Stretch=Fill HorizontalAlignment=Left Width=166 Height=117 VerticalAlignment=Top Image.OpacityMask LinearGradientBrush EndPoint=0.5,1 MappingMode=RelativeToBoundingBox StartPoint=0.5,0 GradientStop Color=White/ GradientStop Color=Transparent/ GradientStop Color=Transparent/ GradientStop Color=White/ GradientStop Color=White Offset=0.25/ GradientStop Color=Transparent Offset=0.25/ GradientStop Color=Transparent Offset=0.25/ GradientStop Color=White Offset=0.25/ GradientStop Color=White Offset=0.5/ GradientStop Color=Transparent Offset=0.5/ GradientStop Color=Transparent Offset=0.5/ GradientStop Color=White Offset=0.5/ GradientStop Color=White Offset=0.75/ GradientStop Color=Transparent Offset=0.75/ GradientStop Color=Transparent Offset=0.75/ GradientStop Color=White Offset=0.75/ /LinearGradientBrush /Image.OpacityMask /Image 3.按照先后新建16个渐变点，前四个放在0%处，并把2、3点的Alpha设置成0；第二个4放在25%处，并把6、7点的Alpha设置成0…其余依次排列，得到如下图 4.新建Storyboard，在第二秒修改image2的OpacityMask属性 得到下图 然后我没就可以运行动画了。 Code: Storyboard x:Name=Storyboard1 RepeatBehavior=1x AutoReverse=False DoubleAnimation Duration=0:0:2 To=1 Storyboard.TargetProperty=(UIElement.OpacityMask).(GradientBrush.GradientStops)[15].(GradientStop.Offset) Storyboard.TargetName=image2 d:IsOptimized=True/ DoubleAnimation Duration=0:0:2 To=1 Storyboard.TargetProperty=(UIElement.OpacityMask).(GradientBrush.GradientStops)[14].(GradientStop.Offset) Storyboard.TargetName=image2 d:IsOptimized=True/ DoubleAnimation Duration=0:0:2 To=0.75 Storyboard.TargetProperty=(UIElement.O