1.首先新建项目,然后在项目下创建一个文件夹image用来存放图片,将准备好的图片复制到image中。(如有需要调整画布与画板大小,可切换至代码界面,设置图片大小以及画布大小,调整过程中如果遇到图片随画布大小变化的情况,注意设置margin:0)
2.在如图右上方点击“+”按钮,添加Storyboard,命名为Storyboard1,点击OK,这时时间轴出现
因为图片是一张覆盖着另一张的,所以要从界面显示的那张图片做起,也就是如下图所示的img4(img1对应1.jpg;img2对应2.jpg;img3对应3.jpg;img4对应4.jpg)
3.选中img4,将时间轴移到“0”刻度处,点击“添加关键帧”按钮,再将时间轴移到“2”刻度处,点击“添加关键帧”按钮,设置img4的颜色由#FFFFFFFF改为#00000000(在下图位置修改颜色),点击“播放”按钮,即可看到两张图片之间的切换。
4.选中img3,将时间轴移到“2”刻度处,点击“添加关键帧”按钮,再将时间轴移到“4”刻度处,点击“添加关键帧”按钮,设置img3的颜色由#FFFFFFFF改为#00000000,点击“播放”按钮,即可看到三张图片之间的切换。
5.选中img2,将时间轴移到“4”刻度处,点击“添加关键帧”按钮,再将时间轴移到“6”刻度处,点击“添加关键帧”按钮,设置img2的颜色由#FFFFFFFF改为#00000000,点击“播放”按钮,即可看到四张图片之间的切换。
代码如下:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="SilverlightApplication1.MainPage"
Width="200" Height="200">
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="img4">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:2" Value="#00000000"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="img4">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="img3">
<EasingColorKeyFrame KeyTime="0:0:2" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:4" Value="#00000000"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="img2">
<EasingColorKeyFrame KeyTime="0:0:4" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:6" Value="#00000000"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="img3">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="img2">
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Image x:Name="img1" Margin="0" Source="image/1.jpg" Stretch="Fill" Width="200" Height="200"/>
<Image x:Name="img2" Margin="0" Source="image/2.jpg" Stretch="Fill" Width="200" Height="200">
<Image.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<Image x:Name="img3" Margin="0" Source="image/3.jpg" Stretch="Fill" Width="200" Height="200">
<Image.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<Image x:Name="img4" Margin="0" Source="image/4.jpg" Stretch="Fill" Width="200" Height="200">
<Image.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</Grid>
</UserControl>
可以设置N张图片切换,但方法总归是不变的,所以在这边只写到4张切换了。。。。有需要的,自行增加图片。。。。