WPF에서 마진 속성을 애니메이션화하는 방법

WPF에서 마진 속성을 애니메이션화하는 방법

직사각형 객체를 이동하여 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 속성에서 사용합니다.

XAML WPF에서 개체를 이동하려면 어떻게 해야 합니까?

Margin속성은 다음을 사용하여 애니메이션화할 수 있습니다.ThicknessAnimation

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

사실, 당신은 당신이 하고 싶은 것을 할 수 있습니다, 정확히 당신이 하고 싶은 것을 사용합니다.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>
</Grid>

X축에서 개체를 50px 이동하고 페이드 인하는 동안 페이드 인)하기도 합니다.그것을 시도하고 가치관을 가지고 놀아보세요.X재산과 그KeyTime당신이 원하는 것을 얻기 위해.이게 도움이 되길 바래요, 건배.

여백을 애니메이션화할 수 없습니다.왼쪽(왜냐하면Left종속성 속성은 아니지만 애니메이션을 만들 수 있습니다.Margin사용:

<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. 캔버스 안에 대상을 배치하고 다음을 사용하여 x 위치를 애니메이션화합니다.Canvas.Left.
2. 대상에 a를 적용하고 다음을 사용하여 x 위치를 애니메이션화합니다.TranslateTransform.X.

다른 대답으로@McGarnagle에 애니메이션을 사용할 수 있습니다.HorizontalAlignment그리고.VerticalAlignment특성.

예:

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

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

저는 방금 애니메이션을 만들었습니다.아래의 코드

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

}

}

언급URL : https://stackoverflow.com/questions/21542657/how-to-animate-margin-property-in-wpf