效果图
简单的定时器结合DoubleAnimation使用示例,实现轮播图淡化切入特效
代码部分
<Image x:Name="carouselImage" Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="UniformToFill">
<Image.Resources>
<Storyboard x:Key="SwitchImageStoryboard">
<DoubleAnimation Storyboard.TargetName="carouselImage" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="carouselImage" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:3" />
</Storyboard>
</Image.Resources>
</Image>
private void StartCarousel()
{
timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 4);
timer.Tick += Timer_Tick;
timer.Start();
SetImageSource(currentImageIndex);
}
private void Timer_Tick(object sender, EventArgs e)
{
currentImageIndex = (currentImageIndex + 1) % imageFiles.Count;
SetImageSource(currentImageIndex);
}
private void SetImageSource(int index)
{
var path = imageFiles[index];
carouselImage.Source = GetImageCache(path);
((Storyboard)carouselImage.Resources["SwitchImageStoryboard"]).Begin();
}
private BitmapImage GetImageCache(string sUrl)
{
BitmapImage bmp = null;
BitmapImage img = new BitmapImage();
img.BeginInit();
img.CacheOption = BitmapCacheOption.OnLoad;
img.UriSource = new Uri(sUrl);
img.EndInit();
img.Freeze();
bmp = img;
return bmp;
}