Silverlight中为Margin添加动画

概述因为在Silverlight中没有ThicknessAnimation，所以为Margin添加动画有点麻烦： 1. 使用ObjectAnimationUsingKeyFrames来做，这个就是通过计算要显示的每一帧内容来设置动画，可能看起来不是那么平滑，如果需要平滑的话，那样就需要写代码来动态生成动画效果，看起来会平滑很多。 使用XAML来进行描述就是这样： <Grid x:Name="Layou

因为在Silverlight中没有ThicknessAnimation，所以为margin添加动画有点麻烦：

1. 使用ObjectAnimationUsingKeyFrames来做，这个就是通过计算要显示的每一帧内容来设置动画，可能看起来不是那么平滑，如果需要平滑的话，那样就需要写代码来动态生成动画效果，看起来会平滑很多。

使用XAML来进行描述就是这样：

<GrID x:name="LayoutRoot" Background="White">        <GrID.RowDeFinitions>            <RowDeFinition Height="*"/>            <RowDeFinition Height="150"/>        </GrID.RowDeFinitions>        <GrID.Resources>            <Storyboard x:name="sb">                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="margin"                                   Storyboard.Targetname="bdTest">                    <discreteObjectKeyFrame KeyTime="0" Value="0"/>                    <discreteObjectKeyFrame KeyTime="0:0:0.5">                        <discreteObjectKeyFrame.Value>                            <Thickness>3,7,5,9</Thickness>                        </discreteObjectKeyFrame.Value>                    </discreteObjectKeyFrame>                    <discreteObjectKeyFrame KeyTime="0:0:0.6">                        <discreteObjectKeyFrame.Value>                            <Thickness>4,8,6,10</Thickness>                        </discreteObjectKeyFrame.Value>                    </discreteObjectKeyFrame>                    <discreteObjectKeyFrame KeyTime="0:0:0.7">                        <discreteObjectKeyFrame.Value>                            <Thickness>40,80,60,100</Thickness>                        </discreteObjectKeyFrame.Value>                    </discreteObjectKeyFrame>                </ObjectAnimationUsingKeyFrames>            </Storyboard>        </GrID.Resources>        <border x:name="bdTest" GrID.Row="0" borderBrush="Black" borderThickness="1" HorizontalAlignment="left" Height="100" VerticalAlignment="top" WIDth="100" Background="Red" />        <button Content="button" HorizontalAlignment="left" GrID.Row="1" VerticalAlignment="top" WIDth="75" Click="button_Click_1" />            </GrID>

2. 另一种方式请参见 Code Project:

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 ThicknessAnimation{	public class ThicknessWrapper : FrameworkElement	{		public FrameworkElement Target		{			get			{				return (FrameworkElement)GetValue(TargetProperty);			}			set			{				SetValue(TargetProperty,value);			}		}		// Using a DependencyProperty as the backing store for Target.  This enables animation,styling,binding,etc...		public static Readonly DependencyProperty TargetProperty =			DependencyProperty.Register("Target",typeof(FrameworkElement),typeof(ThicknessWrapper),new PropertyMetadata(null,OnTargetChanged));		static voID OnTargetChanged(DependencyObject source,DependencyPropertyChangedEventArgs args)		{			ThicknessWrapper sender = (ThicknessWrapper)source;			sender.Updatemargin();		}		public String Propertyname		{			get			{				return (String)GetValue(PropertynameProperty);			}			set			{				SetValue(PropertynameProperty,value);			}		}		// Using a DependencyProperty as the backing store for Propertyname.  This enables animation,etc...		public static Readonly DependencyProperty PropertynameProperty =			DependencyProperty.Register("Propertyname",typeof(String),new PropertyMetadata("margin"));		public SIDe SIDe		{			get			{				return (SIDe)GetValue(SIDeProperty);			}			set			{				SetValue(SIDeProperty,value);			}		}		// Using a DependencyProperty as the backing store for SIDe.  This enables animation,etc...		public static Readonly DependencyProperty SIDeProperty =			DependencyProperty.Register("SIDe",typeof(SIDe),new PropertyMetadata(SIDe.left,OnSIDeChanged));		static voID OnSIDeChanged(DependencyObject source,DependencyPropertyChangedEventArgs args)		{			ThicknessWrapper sender = (ThicknessWrapper)source;			sender.Updatemargin();		}		public double Value		{			get			{				return (double)GetValue(ValueProperty);			}			set			{				SetValue(ValueProperty,value);			}		}		// Using a DependencyProperty as the backing store for Value.  This enables animation,etc...		public static Readonly DependencyProperty ValueProperty =			DependencyProperty.Register("Value",typeof(double),new PropertyMetadata(0.0,OnValueChanged));		static voID OnValueChanged(DependencyObject source,DependencyPropertyChangedEventArgs args)		{			ThicknessWrapper sender = (ThicknessWrapper)source;			sender.Updatemargin();		}		static voID OnPropertyChanged(DependencyObject source,DependencyPropertyChangedEventArgs args)		{			ThicknessWrapper sender = (ThicknessWrapper)source;			sender.Updatemargin();		}		private voID Updatemargin()		{			if(Target != null)			{				var thicknessProperty = Target.GetType().GetProperty(Propertyname);				var currentThickness = (Thickness)thicknessProperty.GetValue(Target,null);				var nextThickness = new Thickness(					CalculateThickness(SIDe.left,currentThickness.left),CalculateThickness(SIDe.top,currentThickness.top),CalculateThickness(SIDe.Right,currentThickness.Right),CalculateThickness(SIDe.Bottom,currentThickness.Bottom)					);				thicknessProperty.SetValue(Target,nextThickness,null);			}		}		private double CalculateThickness(ThicknessAnimation.SIDe sIDetoCalculate,double currentValue)		{			return (SIDe & sIDetoCalculate) == sIDetoCalculate ? Value : currentValue;		}	}	[Flags]	public enum SIDe	{		left = 1,top = 2,Right = 4,Bottom = 8,All = 15	}}

<GrID x:name="LayoutRoot" Background="White">        <GrID.Resources>            <Storyboard x:Key="animation">                <!--<DoubleAnimation Storyboard.Targetname="recttopmargin" Storyboard.TargetProperty="Value" From="0" To="100" Duration="00:00:1"></DoubleAnimation>-->                <DoubleAnimation Storyboard.Targetname="rectstrokeThickness" Storyboard.TargetProperty="Value" From="0" To="20" Duration="00:00:1"></DoubleAnimation>            </Storyboard>        </GrID.Resources>        <local:ThicknessWrapper x:name="recttopmargin" Target="{Binding Elementname=rect}" SIDe="top" Propertyname="margin"></local:ThicknessWrapper>        <local:ThicknessWrapper x:name="rectstrokeThickness" Target="{Binding Elementname=rect}" SIDe="left,Right" Propertyname="borderThickness"></local:ThicknessWrapper>        <StackPanel>            <button Content="Click to animate" Click="button_Click"></button>            <border x:name="rect" HorizontalAlignment="left"  borderBrush="Black" VerticalAlignment="top" Background="Green" Height="50" WIDth="50"></border>        </StackPanel>    </GrID>

总结

以上是内存溢出为你收集整理的Silverlight中为Margin添加动画全部内容，希望文章能够帮你解决Silverlight中为Margin添加动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。