如何在WPF中为Margin属性设置动画

Question

我想移动矩形对象的动画以在x轴上移动它。 我是WPF动画的新手，从以下开始：

<Storyboard x:Key="MoveMe">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                   Storyboard.TargetName="GroupTileSecond"
                                   Storyboard.TargetProperty="(**Margin.Left**)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="**134, 70,0,0**" />
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="**50, 70,0,0**" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

显然我发现我不能使用Margin.Left作为Storyboard.TargetProperty或在Value属性中使用134,70,0,0 。

那么，如何在XAML WPF中移动对象。

Answer 1

可以使用ThicknessAnimation动画Margin属性

<Storyboard >
     <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
        <SplineThicknessKeyFrame KeyTime="00:00:00" Value="134, 70,0,0" />
        <SplineThicknessKeyFrame KeyTime="00:00:03" Value="50, 70,0,0" />
     </ThicknessAnimationUsingKeyFrames>
</Storyboard>

Answer 2

实际上，你可以做你想做的事情，就像你想要使用RenderTransform混合一些DoubleAnimation ，甚至为它添加一些额外的天赋，例如;

<Grid x:Name="TheObject" Opacity="0">
      <Grid.RenderTransform>
            <TranslateTransform x:Name="MoveMeBaby" X="50" />
      </Grid.RenderTransform>
      <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                  <BeginStoryboard>
                         <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveMeBaby" Storyboard.TargetProperty="X">
                                   <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
                              </DoubleAnimationUsingKeyFrames>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheObject" Storyboard.TargetProperty="Opacity">
                                   <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />
                              </DoubleAnimationUsingKeyFrames>
                         </Storyboard>
                  </BeginStoryboard>
            </EventTrigger>
      </Grid.Triggers>

将该对象在X轴上移动50px，甚至在它移动时将其淡入。 给它一个镜头并使用X属性和KeyTime来获得你想要的东西。 希望这会有所帮助，欢呼。

Answer 3

你不能为Margin.Left设置动画（因为Left不是依赖属性），但你可以为Margin设置动画。 使用ObjectAnimationUsingKeyFrames ：

<Storyboard x:Key="MoveMe">
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" 
            Storyboard.TargetName="GroupTileSecond" 
            Storyboard.TargetProperty="Margin">
        <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>134,70,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="00:00:03">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>50,70,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

有一些替代方法允许您使用DoubleAnimation ，而不是关键帧：

1. 将目标放在Canvas中，并使用Canvas.Left为其x位置设置动画。
2. 将TranslateTransform应用于目标，并使用TranslateTransform.X为其x位置设置动画。

Answer 4

作为替代答案@McGarnagle您可以将动画用于HorizontalAlignment和VerticalAlignment属性。

例：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GroupTileSecond" 
                               Storyboard.TargetProperty="HorizontalAlignment">

    <DiscreteObjectKeyFrame KeyTime="0:0:0">
        <DiscreteObjectKeyFrame.Value>
            <HorizontalAlignment>Center</HorizontalAlignment>
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

Answer 5

我刚刚创建了一个动画。 代码吼叫

using System;
using System.Windows;
using System.Windows.Media.Animation;

namespace ImagesSwitcher
{
    class MarginAnimation : AnimationTimeline
    {
        protected override Freezable CreateInstanceCore()
        {
            return new MarginAnimation();
        }

    public override Type TargetPropertyType => typeof(Thickness);

    private double GetContrast(double dTo,double dFrom,double process)
    {
        if (dTo < dFrom)
        {
            return dTo + (1 - process) * (dFrom - dTo);
        }

        return dFrom + (dTo - dFrom) * process;
    }

    public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock)
    {
        if (!From.HasValue || !To.HasValue || animationClock.CurrentProgress == null) return null;
        var progress = animationClock.CurrentProgress.Value;

        if (progress.Equals(0)) return null;

        if (progress.Equals(1)) return To.Value; 

        var fromValue = From.Value;
        var toValue = To.Value;

        var l = GetContrast(toValue.Left ,fromValue.Left, progress);
        var t = GetContrast(toValue.Top, fromValue.Top, progress);
        var r = GetContrast(toValue.Right, fromValue.Right, progress);
        var b = GetContrast(toValue.Bottom, fromValue.Bottom, progress);

        return new Thickness(l,t,r,b);
    }

    public Thickness? To
    {
        set => SetValue(ToProperty, value);
        get => (Thickness)GetValue(ToProperty);
    }
    public static DependencyProperty ToProperty = DependencyProperty.Register("To", typeof(Thickness), typeof(MarginAnimation), new PropertyMetadata(null));

    public Thickness? From
    {
        set => SetValue(FromProperty, value);
        get => (Thickness)GetValue(FromProperty);
    }
    public static DependencyProperty FromProperty = DependencyProperty.Register("From", typeof(Thickness), typeof(MarginAnimation), new PropertyMetadata(null));

}

}