首页 > 代码库 > 【UWP】对 Thickness 类型属性进行动画
【UWP】对 Thickness 类型属性进行动画
好几个月没写 blog 了，一个是在忙新版的碧影壁纸，另一方面是等（观望）周年更新的 api（不过现在还是比较失望，仍然没法支持矩形以外的 Clip）。闲话少说，进入主题。
在 UWP 中，出于性能考虑，微软是不建议、不推荐对会影响布局的属性进行动画的。例如 Width 和 Height 这种，如果真的需要对这些属性进行动画的话（毕竟需求就摆在那里），可以将 Animation 的 EnableDependentAnimation 属性设置为 true 来对这些属性进行动画的。
但是，对于 Thickness 类型来说，这是行不通的，因为 UWP 中并没有 ThicknessAnimation 这种动画类型（PS：WPF 里是有这种动画类型的说）。
不过既然我标题都写了出来，那办法肯定是有的。Thickness 就是四个方向分量，也就是说，对这四个方向分量进行动画就等于对这个 Thickness 进行了动画。
还有另外一点要注意的是，Thickness 类型的四个属性并不是依赖属性。
例如：
control.Margin.Left = 10;这一句是没有效果的。
要实现效果，只能对 Margin 属性从新赋一个值：
var margin = control.Margin;margin.Left = 10;control.Margin = margin;
也就是说，我们需要一个可绑定的 Margin。（我就叫它 BindableMargin）
新建一个用户控件：
为什么是用户控件？因为经过我的发现，我们自定义的类的依赖属性，得有 xaml 文件才能进行动画。（不信你可以试试^-^）
然后修改 BindableMargin.xaml 如下：
<DependencyObject x:Class="AnimateThicknessDemo.BindableMargin" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" />
相当简单的一段 xaml，设计器就无视好了。重点在 BindableMargin.xaml.cs 里，修改代码：
public partial class BindableMargin { public static readonly DependencyProperty BottomProperty = DependencyProperty.Register(nameof(Bottom), typeof(double), typeof(BindableMargin), new PropertyMetadata(default(double), BottomChanged)); public static readonly DependencyProperty LeftProperty = DependencyProperty.Register(nameof(Left), typeof(double), typeof(BindableMargin), new PropertyMetadata(default(double), LeftChanged)); public static readonly DependencyProperty RightProperty = DependencyProperty.Register(nameof(Right), typeof(double), typeof(BindableMargin), new PropertyMetadata(default(double), RightChanged)); public static readonly DependencyProperty TopProperty = DependencyProperty.Register(nameof(Top), typeof(double), typeof(BindableMargin), new PropertyMetadata(default(double), TopChanged)); private readonly FrameworkElement _owner; public BindableMargin(FrameworkElement owner) { if (owner == null) { throw new ArgumentNullException(nameof(owner)); } _owner = owner; } public double Bottom { get { var ownerBottom = _owner.Margin.Bottom; var bottom = (double)GetValue(BottomProperty); if (ownerBottom.Equals(bottom) == false) { SetValue(BottomProperty, ownerBottom); } return ownerBottom; } set { SetValue(BottomProperty, value); } } public double Left { get { var ownerLeft = _owner.Margin.Left; var left = (double)GetValue(LeftProperty); if (ownerLeft.Equals(left) == false) { SetValue(LeftProperty, ownerLeft); } return ownerLeft; } set { SetValue(LeftProperty, value); } } public double Right { get { var ownerRight = _owner.Margin.Right; var right = (double)GetValue(RightProperty); if (ownerRight.Equals(right) == false) { SetValue(RightProperty, ownerRight); } return ownerRight; } set { SetValue(RightProperty, value); } } public double Top { get { var ownerTop = _owner.Margin.Top; var top = (double)GetValue(TopProperty); if (ownerTop.Equals(top) == false) { SetValue(TopProperty, ownerTop); } return ownerTop; } set { SetValue(TopProperty, value); } } private static void BottomChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var obj = (BindableMargin)d; var value = http://www.mamicode.com/(double)e.NewValue; var owner = obj._owner; var margin = owner.Margin; margin.Bottom = value; owner.Margin = margin; } private static void LeftChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var obj = (BindableMargin)d; var value = http://www.mamicode.com/(double)e.NewValue; var owner = obj._owner; var margin = owner.Margin; margin.Left = value; owner.Margin = margin; } private static void RightChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var obj = (BindableMargin)d; var value = http://www.mamicode.com/(double)e.NewValue; var owner = obj._owner; var margin = owner.Margin; margin.Right = value; owner.Margin = margin; } private static void TopChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var obj = (BindableMargin)d; var value = http://www.mamicode.com/(double)e.NewValue; var owner = obj._owner; var margin = owner.Margin; margin.Top = value; owner.Margin = margin; } }
别看代码这么多，其实不复杂。构造函数传入需要动画的控件。然后四个方向的依赖属性，值发生改变时回写到控件上。
然后动画的例子代码：
BindableMargin margin = new BindableMargin(control);DoubleAnimation animation = new DoubleAnimation();animation.EnableDependentAnimation = true;animation.From = 0;animation.To = 100;animation.Duration = TimeSpan.FromSeconds(1);Storyboard.SetTarget(animation, margin);Storyboard.SetTargetProperty(animation, "Left");
await storyboard.BeginAsync();// WinRTXamlToolkit 里的扩展方法。margin.Left = 100;
另外建议在动画播放完毕后，执行一次常规的赋值操作（一般赋最终值），因为视乎机器的配置，Storyboard 会有一定程度的跳帧，在低端的机器，可能动画就完全跳过去了。
说了这么多，还是说说有啥应用吧。
这是一个类似 IT 之家的通知控件。通过动画了 Margin 的 Right 来实现的。
Demo 下载地址：AnimateThicknessDemo.zip
当然应用还有很多，例如对 Border 的圆角进行动画。通过这么一种“桥”的方式，我们可以对很多属性，并不局限于 Thickness 类型，也进行动画，这里就留给各位看官发挥想象了。
【UWP】对 Thickness 类型属性进行动画