실버 라이트의 애니메이션 마진 변화

Question

나는 Silverlight에서 국경 크기를 애니메이션하고 있지만 주변의 여백을 점차적으로 제거해야합니다 (현재 50). 블렌드는 마진 변경을 위해 트윈을 생성하지 않는 것 같습니다. 한 번에 50에서 0으로 점프합니다. 이것을 달성 할 수있는 방법이 있습니까?

Answer 1

문제는 마진이 실제로 "System.windows.thickness"유형이므로 종속성 객체가 아니기 때문에 왼쪽, 상단, 오른쪽 및 하단은 종속성 속성이 아니므로 DoubleAnimation (트위닝을 허용 함)을 사용하여 애니메이션 할 수 없다는 것입니다. .

여백을 애니메이션하는 데 사용되는 것은 트윈이 아닌 대변소입니다. 그렇기 때문에 마진이 원래 위치에서 새로운 위치로 점프하는 이유입니다. 또 다른 일반적인 예와 같이, 가시와 붕괴 사이의 가시성 속성을 애니메이션하려고 할 때도 마찬가지입니다.

마진을 애니메이션하거나 두께 객체에 대한 고유 한 애니메이션 유형을 구현하려면 타이머 기반 애니메이션을 수행해야합니다.

Answer 2

Ben Lemmon은 우아한 해결책을 제공합니다. http://blogs.msdn.com/blemmon/archive/2009/03/18/animating-margins-in-silverlight.aspx

Answer 3

다음은 업데이트 된 버전입니다 이를 통해 XAML 내에서 애니메이션 할 수 있습니다

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace NiceCards.Animations
{
    public class ThicknessAnimationX
    {
        public static readonly DependencyProperty ElementProperty = DependencyProperty.RegisterAttached("Element", typeof(DependencyObject), typeof(DoubleAnimation), new PropertyMetadata(new PropertyChangedCallback(OnElementPropertyChanged)));

        // The time along the animation from 0-1
        public static DependencyProperty TimeProperty = DependencyProperty.RegisterAttached("Time", typeof(double), typeof(DoubleAnimation), new PropertyMetadata(OnTimeChanged));

        // The object being animated
        public static DependencyProperty TargetProperty = DependencyProperty.RegisterAttached("Target", typeof(DependencyObject), typeof(ThicknessAnimationX), null);
        public static DependencyProperty TargetPropertyProperty = DependencyProperty.RegisterAttached("TargetProperty", typeof(DependencyProperty), typeof(DependencyObject), null);

        public static readonly DependencyProperty FromProperty = DependencyProperty.RegisterAttached("From", typeof(Thickness), typeof(DoubleAnimation), null);
        public static readonly DependencyProperty ToProperty = DependencyProperty.RegisterAttached("To", typeof(Thickness), typeof(DoubleAnimation), null);

        public static void SetElement(DependencyObject o, DependencyObject value)
        {
            o.SetValue(ElementProperty, value);
        }

        public static DependencyObject GetElement(DependencyObject o)
        {
            return (DependencyObject)o.GetValue(ElementProperty);
        }

        private static void OnElementPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.NewValue != null)
            {
                DoubleAnimation doubleAnimation = (DoubleAnimation)d;

                doubleAnimation.SetValue(TargetProperty, e.NewValue);
                doubleAnimation.From = 0;
                doubleAnimation.To = 1;
                doubleAnimation.SetValue(TargetPropertyProperty, FrameworkElement.MarginProperty);
                Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(ThicknessAnimationX.Time)"));
                Storyboard.SetTarget(doubleAnimation, doubleAnimation);
            }
        }


        private static void OnTimeChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            DoubleAnimation animation = (DoubleAnimation)sender;
            double time = GetTime(animation);
            Thickness from = (Thickness)sender.GetValue(FromProperty);
            Thickness to = (Thickness)sender.GetValue(ToProperty);
            DependencyProperty targetProperty = (DependencyProperty)sender.GetValue(TargetPropertyProperty);
            DependencyObject target = (DependencyObject)sender.GetValue(TargetProperty);
            target.SetValue(targetProperty, new Thickness((to.Left - from.Left) * time + from.Left,
                                                          (to.Top - from.Top) * time + from.Top,
                                                          (to.Right - from.Right) * time + from.Right,
                                                          (to.Bottom - from.Bottom) * time + from.Bottom));
        }

        public static double GetTime(DoubleAnimation animation)
        {
            return (double)animation.GetValue(TimeProperty);
        }

        public static void SetTime(DoubleAnimation animation, double value)
        {
            animation.SetValue(TimeProperty, value);
        }

        public static Thickness GetFrom(DoubleAnimation animation)
        {
            return (Thickness)animation.GetValue(FromProperty);
        }

        public static void SetFrom(DoubleAnimation animation, Thickness value)
        {
            animation.SetValue(FromProperty, value);
        }

        public static Thickness GetTo(DoubleAnimation animation)
        {
            return (Thickness)animation.GetValue(ToProperty);
        }

        public static void SetTo(DoubleAnimation animation, Thickness value)
        {
            animation.SetValue(ToProperty, value);
        }
    }   
}

그런 다음 XAML 에서이 작업을 수행 할 수 있습니다

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="Positions">
        <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:0.2"/>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="Left">                    
            <Storyboard>
                <DoubleAnimation Duration="0:0:0.3" NiceCards:ThicknessAnimationX.To="0,0,0,0" NiceCards:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity"/>
            </Storyboard>                       
        </VisualState>
        <VisualState x:Name="Right">                    
            <Storyboard>
                <DoubleAnimation Duration="0:0:0.3" NiceCards:ThicknessAnimationX.To="0,200,0,0" NiceCards:ThicknessAnimationX.Element="{Binding ElementName=rectangle1}" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity"/>
            </Storyboard>                    
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Height="100" HorizontalAlignment="Left" Margin="23,25,0,0" x:Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="#FF1BAA00"/>

XAML에서 대상 속성을 DoubleAnimation으로 설정하지 않으면 Blend에 컨트롤/페이지를 표시 할 수 없습니다. 이 문제를 해결하려면 가짜 대상 속성을 추가하기 만하면 (위의 코드에서 이중 값인 불투명 속성을 추가하면) 어쨌든 런타임에 재정의됩니다.