WPF按顺序设置和更改图像的不透明度

时间:2012-06-21 20:41:57

标签: c# wpf xaml animation opacity

我有三张图片,其中两张图片动画如下,第三张图片应闪烁:

<Window.Resources>
    <Storyboard x:Key="AnimateTarget" RepeatBehavior="Forever">

        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Duration="0:00:03" Storyboard.TargetName="img1" Storyboard.TargetProperty="Y">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="200" />
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0" />
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames BeginTime="0:0:2" Duration="0:00:03" Storyboard.TargetName="img2" Storyboard.TargetProperty="x">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="200" />
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0" />
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimation BeginTime="0:0:4" Duration="0:0:0.5" Storyboard.TargetProperty="(Image.Opacity)" Storyboard.TargetName="img3"  From="1.0" To="0.0" RepeatBehavior="Forever" AutoReverse="True" />

    </Storyboard>
</Window.Resources>

前两张图片动画效果不错,但第三张图片没有闪烁,它什么都不做,只是呆在那里,因为你可以看到我使用下面的代码来闪烁第三张图像:

<DoubleAnimation BeginTime="0:0:4" Duration="0:0:0.5" Storyboard.TargetProperty="(Image.Opacity)" Storyboard.TargetName="img3"  From="1.0" To="0.0" RepeatBehavior="Forever" AutoReverse="True" />

这也是第三张图片的代码:

<Image Height="65" Name="image1" Stretch="Fill" Width="67" Source="/PicTakeWPF;component/Images/422505_110594629067212_100003500265268_37406_1212153553_n.jpg">
    <Image.RenderTransform>
         <TranslateTransform x:Name="img3"></TranslateTransform>
    </Image.RenderTransform>
</Image>

如果有人帮助我,我将不胜感激 谢谢,

1 个答案:

答案 0 :(得分:4)

尝试将图像对象的名称(image1)用作不透明度动画的Storyboard.TargetName

<DoubleAnimation BeginTime="0:0:4" Duration="0:0:0.5" Storyboard.TargetProperty="(Image.Opacity)" Storyboard.TargetName="image1"  From="1.0" To="0.0" RepeatBehavior="Forever" AutoReverse="True" />

因为不透明度是图像本身的属性,其他2个动画会影响图像对象的转换,这就是为这些动画使用TranslateTransform名称的原因。

您甚至不需要添加

<Image.RenderTransform>
    <TranslateTransform x:Name="img3"></TranslateTransform>
</Image.RenderTransform>

表示第三张图片(如果您没有计划动画翻译)。