Question

我想使用 ObjectAnimationUsingKeyFrames 为winrt中的一个控件设置动画。在一段时间内，控制应从Margin =“0,0，-500,0”移动到Margin =“0,0,0,0”。我有以下代码。它几乎可以工作，但一切都是立刻发生的，没有看到动画或平滑过渡。

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NameOfControl" 
                                   Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                                   Duration="00:00:00.5">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,0,-500,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="00:00:0.5">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,0,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>

你有什么线索为什么它不起作用？
你有另一种方式吗？如何将控件从某些面板外部移动到默认值位置？在我看来，使用保证金是某种类型的黑客攻击。

Answer 1

问题与ObjectAnimationUsingKeyFrames＆amp; DiscreteObjectKeyFrame你正在使用它，它没有为值设置动画，而是在所提到的关键帧时间将值设置为整数，

为了为Margin，Padding等属性设置动画，请使用ThicknessAnimationUsingKeyFrames代替SplineThicknessKeyFrame，这样可以在更平滑的过渡中为值设置动画

为您提供样品

<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="NameOfControl" 
                               Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                               Duration="00:00:00.5">
    <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,0,-500,0" />
    <SplineThicknessKeyFrame KeyTime="00:00:00.5" Value="0,0,0,0" />
</ThicknessAnimationUsingKeyFrames>

WinRT替代

因为您正在使用相关元素使用右边距将其带入视图

我尝试使用双动画

创建一个模仿相似行为的样本

    <Rectangle Fill="Red"
               Width="10"
               Height="10"
               HorizontalAlignment="Center"
               VerticalAlignment="Center">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translate"/>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.5"
                                         Storyboard.TargetProperty="X"
                                         Storyboard.TargetName="translate"
                                         From="500" 
                                         To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>

为边缘属性设置动画也不是明智之举，因为它也会强制布局再次完成

Answer 2

我怀疑你在代码中设置的持续时间和keyFrame太少了，这就是为什么你没有感受到转换的原因。请增加持续时间和关键帧，让我知道结果。

Answer 3

我想，我找到了它。看看这段代码。（它将控制向下移动100点，向右移动100点）

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextBlock1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextBlock1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
</DoubleAnimationUsingKeyFrames>

但是您可以忘记添加此代码来控制您想要移动。

<TextBlock Name="TextBlock1" Text="SomeText">
    <TextBlock.RenderTransform>
        <CompositeTransform/>
    </TextBlock.RenderTransform>
</TextBlock>

ObjectAnimationUsingKeyFrames - WinRT中位置之间的平滑过渡

3 个答案: