animation - 使用 Windows 8 翻译 Xaml 中的图像

Question

我是 XAML 和 Windows 8 的新手。我想将屏幕外的图像设置为某个 X、Y 值。我已经成功地将图像从其原始位置移动到一个点

var translate = new TranslateTransform();
translate.X = 400;
translate.Y = 400;
MyImage.RenderTransform = translate;

其中 MyImage 在 XAML 中定义。

但是，我想使用线性缓动动画，以便它从一个点滑到另一个点。我在一些示例中看到了故事板的使用，但我不确定如何完成我的任务。另外，我想在代码中而不是在 XAML 中设置图像结束的点。

任何帮助，将不胜感激。

Answer 1

<Page.Resources>
    <Storyboard x:Name="Storyboard1">
        <DoubleAnimationUsingKeyFrames x:Name="TranslateX" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="imageToAnimate">
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames x:Name="TranslateY" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="imageToAnimate">
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image x:Name="imageToAnimate" Source="/Assets/Logo.png" Width="150" Height="150" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <CompositeTransform/>
        </Image.RenderTransform></Image>
</Grid>

在代码中，您可以设置要翻译的点

        EasingDoubleKeyFrame animateX1 = new EasingDoubleKeyFrame();
        animateX1.KeyTime = new TimeSpan(0);
        animateX1.Value = 1;
        EasingDoubleKeyFrame animateX2 = new EasingDoubleKeyFrame();
        animateX2.KeyTime = new TimeSpan(0, 0, 2);
        animateX2.Value = 250;

        EasingDoubleKeyFrame animateY1 = new EasingDoubleKeyFrame();
        animateY1.KeyTime = new TimeSpan(0);
        animateY1.Value = 1;
        EasingDoubleKeyFrame animateY2 = new EasingDoubleKeyFrame();
        animateY2.KeyTime = new TimeSpan(0, 0, 2);
        animateY2.Value = 250;

        TranslateX.KeyFrames.Add(animateX1);
        TranslateX.KeyFrames.Add(animateX2);

        TranslateY.KeyFrames.Add(animateY1);
        TranslateY.KeyFrames.Add(animateY2);

        Storyboard1.Begin();