WPF设置动画并按顺序更改图像的不透明度 [英] WPF Animate and change Opacity of Image in sequence

问题描述

我有三个图像，其中两个图像如下进行动画处理，而第三个图像应该闪烁:

I have three images, two of these images animate as follow and third image should blink:

<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>

前两张图片动画效果很好，但是第三张图片没有闪烁，它什么也不会做，只会停留在那儿，正如您所看到的，我使用以下代码来闪烁第三张图片:

The first two images are animating fine but the third image doesn’t blink, it will do nothing and just stay there as you can see I have used the following code for blinking the third image:

<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" />

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

Also this is a code for the third image:

<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>

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

I would appreciate if someone helps me on this Thanks,

推荐答案

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

Try using the Name (image1) of your image object as Storyboard.TargetName for the opacity animation

<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名称的原因.

because the opacity is a property of the image itself, the other 2 animations affect the translation of the image object and that's why you use the TranslateTransform name for those animations.

您甚至不需要添加

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

获取第三张图片(如果您不打算为翻译制作动画).

for the third image (if you're not planning on animating the translation).

这篇关于WPF设置动画并按顺序更改图像的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！