1. 运用StrokeDashOffset做守候提示动画
圆形的守候提示动画非常轻易做,只需让它扭转就可以了:
然则圆形之外的外形就不轻易做了,比方三角形,总不能让它纯真地扭转吧:
要处理这个题目可以运用StrokeDashOffset。StrokeDashOffset用于掌握虚线边框的第一个短线相对于Shape最先点的位移,运用动画掌握这个数值可以做出边框转动的结果:
<Page.Resources><Storyboard x:Name="ProgressStoryboard"><DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Shape.StrokeDashOffset)" Storyboard.TargetName="triangle"><EasingDoubleKeyFrame KeyTime="0:1:0" Value="-500" /></DoubleAnimationUsingKeyFrames></Storyboard></Page.Resources><Grid Background="#FFCCCCCC"><Grid Height="100" HorizontalAlignment="Center"><StackPanel Orientation="Horizontal" VerticalAlignment="Center"><TextBlock Text="L" FontSize="55" Margin="0,0,5,4" /><local:Triangle x:Name="triangle" Height="40" Width="40" StrokeThickness="2" Stroke="RoyalBlue" StrokeDashArray="4.045 4.045" StrokeDashOffset="0.05" StrokeDashCap="Round" /><TextBlock Text="ading..." FontSize="55" Margin="5,0,0,4" /></StackPanel></Grid></Grid>
须要注重的是Shape的边长要正好能被StrokeDashArray中短线和缺口的和整除,即 满足边长 / StrokeThickness % Sum( StrokeDashArray ) = 0
,这是因为在StrokeDashOffset=0的处所会截断短线,以下图所示:
别的注重的是边长的盘算,如Rectangle,边长并非(Height + Width) * 2
,而是(Height - StrokeThickness) * 2 + (Width- StrokeThickness) * 2
,以下图所示,边长应当从边框正中间最先盘算:
有一些Shape的边长盘算还会遭到Stretch影响,如上一篇中自定义的Triangle:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"><Grid Height="50" Width="50"><local:Triangle Stretch="Fill" StrokeThickness="5" Stroke="RoyalBlue" /></Grid><Grid Height="50" Width="50" Margin="10,0,0,0"><local:Triangle Stretch="None" StrokeThickness="5" Stroke="RoyalBlue" /></Grid></StackPanel>
2. 运用StrokeDashArray做进度提示动画
StrokeDashArray用于将Shape的边框变成虚线,StrokeDashArray的值是一个double范例的有序鸠合,内里的数值指定虚线中每一段以StrokeThickness为单元的长度。用StrokeDashArray做进度提示的基础做法就是将进度Progress经由过程Converter转换为分红两段的StrokeDashArray,第一段为实线,示意当前进度,第二段为空缺。假定一个Shape的边长是100,当前进度为50,则将StrokeDashArray设置成{50,double.MaxValue}两段。
做成动画以下图所示:
<Page.Resources><Style TargetType="TextBlock"><Setter Property="FontSize" Value="12" /></Style><local:ProgressToStrokeDashArrayConverter x:Key="ProgressToStrokeDashArrayConverter" TargetPath="{Binding ElementName=Triangle}" /><local:ProgressToStrokeDashArrayConverter2 x:Key="ProgressToStrokeDashArrayConverter2" TargetPath="{Binding ElementName=Triangle}" /> <toolkit:StringFormatConverter x:Key="StringFormatConverter" /><local:ProgressWrapper x:Name="ProgressWrapper" /><Storyboard x:Name="Storyboard1"><DoubleAnimation Duration="0:0:5" To="100" Storyboard.TargetProperty="Progress" Storyboard.TargetName="ProgressWrapper" EnableDependentAnimation="True" /></Storyboard></Page.Resources><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Viewbox Height="150"><StackPanel Orientation="Horizontal"><Grid><local:Triangle Height="40" Width="40" StrokeThickness="2" Stroke="DarkGray" /><local:Triangle x:Name="Triangle" Height="40" Width="40" StrokeThickness="2" Stroke="RoyalBlue" StrokeDashArray="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource ProgressToStrokeDashArrayConverter}}" /><TextBlock Text="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource StringFormatConverter},ConverterParameter='{}{0:0}'}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,15,0,0" /></Grid><Grid Margin="20,0,0,0"><local:Triangle Height="40" Width="40" StrokeThickness="2" Stroke="DarkGray" /><local:Triangle x:Name="Triangle2" Height="40" Width="40" StrokeThickness="2" Stroke="RoyalBlue" StrokeDashArray="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource ProgressToStrokeDashArrayConverter2}}" /><TextBlock Text="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource StringFormatConverter},ConverterParameter='{}{0:0}'}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,15,0,0" /></Grid></StackPanel></Viewbox></Grid>
个中ProgressToStrokeDashArrayConverter和ProgressToStrokeDashArrayConverter2的代码以下:
public class ProgressToStrokeDashArrayConverter : DependencyObject, IValueConverter {/// <summary>/// 猎取或设置TargetPath的值/// </summary> public Path TargetPath { get { return (Path)GetValue(TargetPathProperty); } set { SetValue(TargetPathProperty, value); } }/// <summary>/// 标识 TargetPath 依靠属性。/// </summary>public static readonly DependencyProperty TargetPathProperty = DependencyProperty.Register("TargetPath", typeof(Path), typeof(ProgressToStrokeDashArrayConverter), new PropertyMetadata(null));public virtual object Convert(object value, Type targetType, object parameter, string language) { if (value is double == false)return null; var progress = (double)value;if (TargetPath == null)return null;var totalLength = GetTotalLength(); var firstSection = progress * totalLength / 100 / TargetPath.StrokeThickness;if (progress == 100) firstSection = Math.Ceiling(firstSection);var result = new DoubleCollection { firstSection, double.MaxValue };return result; }public object ConvertBack(object value, Type targetType, object parameter, string language) {throw new NotImplementedException(); }protected double GetTotalLength() {var geometry = TargetPath.Data as PathGeometry; if (geometry == null) return 0; if (geometry.Figures.Any() == false)return 0; var figure = geometry.Figures.FirstOrDefault(); if (figure == null) return 0; var totalLength = 0d; var point = figure.StartPoint; foreach (var item in figure.Segments) { var segment = item as LineSegment; if (segment == null) return 0; totalLength += Math.Sqrt(Math.Pow(point.X - segment.Point.X, 2) + Math.Pow(point.Y - segment.Point.Y, 2)); point = segment.Point; } totalLength += Math.Sqrt(Math.Pow(point.X - figure.StartPoint.X, 2) + Math.Pow(point.Y - figure.StartPoint.Y, 2)); return totalLength; } } public class ProgressToStrokeDashArrayConverter2 : ProgressToStrokeDashArrayConverter { public override object Convert(object value, Type targetType, object parameter, string language) { if (value is double == false)return null; var progress = (double)value; if (TargetPath == null) return null; var totalLength = GetTotalLength(); totalLength = totalLength / TargetPath.StrokeThickness; var thirdSection = progress * totalLength / 100; if (progress == 100) thirdSection = Math.Ceiling(thirdSection); var secondSection = (totalLength - thirdSection) / 2; var result = new DoubleCollection { 0, secondSection, thirdSection, double.MaxValue }; return result; } }
因为代码只是用于演示,protected double GetTotalLength()
写得比较迁就。可以看到这两个Converter继续自DependencyObject,这是因为这里须要经由过程绑定为TargetPath赋值。
这里另有另一个类ProgressWrapper:
public class ProgressWrapper : DependencyObject {/// <summary>/// 猎取或设置Progress的值/// </summary> public double Progress {get { return (double)GetValue(ProgressProperty); }set { SetValue(ProgressProperty, value); } }/// <summary>/// 标识 Progress 依靠属性。/// </summary>public static readonly DependencyProperty ProgressProperty = DependencyProperty.Register("Progress", typeof(double), typeof(ProgressWrapper), new PropertyMetadata(0d)); }
因为这里没有可供Storyboard操纵的double属性,所以用这个类充任Storyboard和StrokeDashArray的桥梁。UWPCommunityToolkit中也有一个差不多用法的类BindableValueHolder,这个类通用性比较强,可以参考它的用法。
3. 运用Behavior革新进度提示动画代码
只是做个动画罢了,又是Converter,又是Wrapper,又是Binding,看起来非常复杂,假如Shape上面有Progress属性就轻易多了。这时候起首会斟酌附加属性,在XAML用法以下:
<UserControl.Resources> <Storyboard x:Name="Storyboard1"><DoubleAnimation Duration="0:0:5" To="100" Storyboard.TargetProperty="(local:PathExtention.Progress)" Storyboard.TargetName="Triangle" /> </Storyboard></UserControl.Resources><Grid x:Name="LayoutRoot" Background="White"><local:Triangle x:Name="Triangle" Height="40" local:PathExtention.Progress="0" Width="40" StrokeThickness="2" Stroke="RoyalBlue" ></local:Triangle></Grid>
但实在这是行不通的,XAML有一个存在了良久的限定:However, an existing limitation of the Windows Runtime XAML implementation is that you cannot animate a custom attached property.。这个限定决议了XAML不能对自定义附加属性做动画。不过,这个限定只限定了不能对自定义附加属性自身做动画,但对附加属性中的类的属性则可以,比方以下这类写法应当是行得通的:
<UserControl.Resources> <Storyboard x:Name="Storyboard1"><DoubleAnimation Duration="0:0:5" To="100" Storyboard.TargetProperty="(local:PathExtention.Progress)" Storyboard.TargetName="TrianglePathExtention" /> </Storyboard></UserControl.Resources><Grid x:Name="LayoutRoot" Background="White"><local:Triangle x:Name="Triangle" Height="40" Width="40" StrokeThickness="2" Stroke="RoyalBlue" > <local:PathHelper><local:PathExtention x:Name="TrianglePathExtention" Progress="0" /> </local:PathHelper></local:Triangle></Grid>
更文雅的写法是应用XamlBehaviors,这篇文章很好地诠释了XamlBehaviors的作用:
XAML Behaviors非常重要,因为它们供应了一种要领,让开发人员可以以一种简约、可反复的体式格局轻松地向UI对象增添功用。 他们无需建立控件的子类或反复编写逻辑代码,只需简朴地增添一个XAML代码片断。
要运用Behavior革新现有代码,只需完成一个PathProgressBehavior:
public class PathProgressBehavior : Behavior<UIElement> {protected override void OnAttached() {base.OnAttached();UpdateStrokeDashArray(); }/// <summary>/// 猎取或设置Progress的值/// </summary> public double Progress {get { return (double)GetValue(ProgressProperty); }set { SetValue(ProgressProperty, value); } }/*Progress DependencyProperty*/protected virtual void OnProgressChanged(double oldValue, double newValue) {UpdateStrokeDashArray(); }protected virtual double GetTotalLength(Path path) {/*some code*/}private void UpdateStrokeDashArray() { var target = AssociatedObject as Path;if (target == null)return;double progress = Progress; //if (target.ActualHeight == 0 || target.ActualWidth == 0)// return; if (target.StrokeThickness == 0) return; var totalLength = GetTotalLength(target); var firstSection = progress * totalLength / 100 / target.StrokeThickness; if (progress == 100) firstSection = Math.Ceiling(firstSection); var result = new DoubleCollection { firstSection, double.MaxValue }; target.StrokeDashArray = result; } }
XAML中以下运用:
<UserControl.Resources> <Storyboard x:Name="Storyboard1"><DoubleAnimation Duration="0:0:5" To="100" Storyboard.TargetProperty="Progress" Storyboard.TargetName="PathProgressBehavior" EnableDependentAnimation="True"/> </Storyboard></UserControl.Resources><Grid x:Name="LayoutRoot" Background="White"> <local:Triangle x:Name="Triangle" Height="40" local:PathExtention.Progress="0" Width="40" StrokeThickness="2" Stroke="RoyalBlue" ><interactivity:Interaction.Behaviors> <local:PathProgressBehavior x:Name="PathProgressBehavior" /></interactivity:Interaction.Behaviors> </local:Triangle></Grid>
如许看起来就清新多了。
4. 模拟背景添补动画
先看看结果:
实在这篇文章里并不会议论添补动画,不过起首声明做添补动画会更轻易快捷,这一段只是深切进修过程当中的产品,实用价值不高。
上图三角形的添补的结果只须要叠加两个一样大小的Shape,前面谁人设置Stretch="Uniform"
,再经由过程DoubleAnimation转变它的高度就可以了。笔墨也是雷同的道理,叠加两个雷同的TextBlock,将前面谁人放在一个无边框的ScrollViewer里再去转变ScrollViewer的高度。
<Page.Resources><Style TargetType="TextBlock"><Setter Property="FontSize" Value="12" /></Style><local:ProgressToHeightConverter x:Key="ProgressToHeightConverter" TargetContentControl="{Binding ElementName=ContentControl}" /><local:ReverseProgressToHeightConverter x:Key="ReverseProgressToHeightConverter" TargetContentControl="{Binding ElementName=ContentControl2}" /><toolkit:StringFormatConverter x:Key="StringFormatConverter" /><local:ProgressWrapper x:Name="ProgressWrapper" /><Storyboard x:Name="Storyboard1"><DoubleAnimation Duration="0:0:5" To="100" Storyboard.TargetProperty="Progress" Storyboard.TargetName="ProgressWrapper" EnableDependentAnimation="True" /></Storyboard></Page.Resources><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid><local:Triangle Height="40" Width="40" StrokeThickness="2" Fill="LightGray" /><local:Triangle Height="40" Width="40" Stretch="Fill" StrokeThickness="2" Stroke="RoyalBlue" /><ContentControl x:Name="ContentControl" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource ProgressToHeightConverter}}"><local:Triangle x:Name="Triangle3" Height="40" Width="40" StrokeThickness="2" Fill="RoyalBlue" Stretch="Uniform" VerticalAlignment="Bottom" /></ContentControl><TextBlock Text="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource StringFormatConverter},ConverterParameter='{}{0:0}'}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,12,0,0" Foreground="White" /><ContentControl x:Name="ContentControl2" Height="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource ReverseProgressToHeightConverter}}" VerticalAlignment="Top" HorizontalAlignment="Center"><ScrollViewer BorderThickness="0" Padding="0,0,0,0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Height="40"><Grid Height="40"><TextBlock Text="{Binding Progress,Source={StaticResource ProgressWrapper},Converter={StaticResource StringFormatConverter},ConverterParameter='{}{0:0}'}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,12,0,0" /></Grid></ScrollViewer></ContentControl></Grid></Grid>
ProgressToHeightConverter和ReverseProgressToHeightConverter的代码以下:
public class ProgressToHeightConverter : DependencyObject, IValueConverter {/// <summary>/// 猎取或设置TargetContentControl的值/// </summary> public ContentControl TargetContentControl { get { return (ContentControl)GetValue(TargetContentControlProperty); } set { SetValue(TargetContentControlProperty, value); } }/// <summary>/// 标识 TargetContentControl 依靠属性。/// </summary>public static readonly DependencyProperty TargetContentControlProperty = DependencyProperty.Register("TargetContentControl", typeof(ContentControl), typeof(ProgressToHeightConverter), new PropertyMetadata(null)); public object Convert(object value, Type targetType, object parameter, string language) { if (value is double == false) return 0d; var progress = (double)value; if (TargetContentControl == null) return 0d; var element = TargetContentControl.Content as FrameworkElement; if (element == null) return 0d;return element.Height * progress / 100; }public object ConvertBack(object value, Type targetType, object parameter, string language) {throw new NotImplementedException(); } }public class ReverseProgressToHeightConverter : DependencyObject, IValueConverter {/// <summary>/// 猎取或设置TargetContentControl的值/// </summary> public ContentControl TargetContentControl { get { return (ContentControl)GetValue(TargetContentControlProperty); } set { SetValue(TargetContentControlProperty, value); } }/// <summary>/// 标识 TargetContentControl 依靠属性。/// </summary>public static readonly DependencyProperty TargetContentControlProperty = DependencyProperty.Register("TargetContentControl", typeof(ContentControl), typeof(ReverseProgressToHeightConverter), new PropertyMetadata(null)); public object Convert(object value, Type targetType, object parameter, string language) { if (value is double == false) return double.NaN; var progress = (double)value;if (TargetContentControl == null)return double.NaN; var element = TargetContentControl.Content as FrameworkElement; if (element == null)return double.NaN; return element.Height * (100 - progress) / 100; } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } }
再提示一次,实际上老老实实做添补动画彷佛更轻易些。
5. 将动画应用到Button的ControlTemplate
一样的手艺,合营ControlTemplate可以制造很风趣的按钮:
PointerEntered时,按钮的边框从进入点向反方向延长。PointerExited时,边框从反方向向移出点消弱。要做到这点须要在PointerEntered时转变边框的方向,运用了ChangeAngleToEnterPointerBehavior:
public class ChangeAngleToEnterPointerBehavior : Behavior<Ellipse> {protected override void OnAttached() {base.OnAttached(); AssociatedObject.PointerEntered += OnAssociatedObjectPointerEntered; AssociatedObject.PointerExited += OnAssociatedObjectPointerExited; }protected override void OnDetaching() {base.OnDetaching(); AssociatedObject.PointerEntered -= OnAssociatedObjectPointerEntered; AssociatedObject.PointerExited -= OnAssociatedObjectPointerExited; }private void OnAssociatedObjectPointerExited(object sender, PointerRoutedEventArgs e) {UpdateAngle(e); }private void OnAssociatedObjectPointerEntered(object sender, PointerRoutedEventArgs e) {UpdateAngle(e); }private void UpdateAngle(PointerRoutedEventArgs e) {if (AssociatedObject == null || AssociatedObject.StrokeThickness == 0)return; AssociatedObject.RenderTransformOrigin = new Point(0.5, 0.5);var rotateTransform = AssociatedObject.RenderTransform as RotateTransform;if (rotateTransform == null) { rotateTransform = new RotateTransform(); AssociatedObject.RenderTransform = rotateTransform; }var point = e.GetCurrentPoint(AssociatedObject.Parent as UIElement).Position;var centerPoint = new Point(AssociatedObject.ActualWidth / 2, AssociatedObject.ActualHeight / 2);var angleOfLine = Math.Atan2(point.Y - centerPoint.Y, point.X - centerPoint.X) * 180 / Math.PI; rotateTransform.Angle = angleOfLine + 180; } }
这个类定名不是很好,不过迁就一下吧。
为了做出边框延长的结果,别的须要一个类EllipseProgressBehavior:
public class EllipseProgressBehavior : Behavior<Ellipse> {/// <summary>/// 猎取或设置Progress的值/// </summary> public double Progress { get { return (double)GetValue(ProgressProperty); } set { SetValue(ProgressProperty, value); } }/// <summary>/// 标识 Progress 依靠属性。/// </summary> public static readonly DependencyProperty ProgressProperty = DependencyProperty.Register("Progress", typeof(double), typeof(EllipseProgressBehavior), new PropertyMetadata(0d, OnProgressChanged)); private static void OnProgressChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args) { var target = obj as EllipseProgressBehavior; double oldValue = (double)args.OldValue; double newValue = (double)args.NewValue;if (oldValue != newValue) target.OnProgressChanged(oldValue, newValue); } protected virtual void OnProgressChanged(double oldValue, double newValue) {UpdateStrokeDashArray(); }protected virtual double GetTotalLength() {if (AssociatedObject == null)return 0; return (AssociatedObject.ActualHeight - AssociatedObject.StrokeThickness) * Math.PI; }private void UpdateStrokeDashArray() {if (AssociatedObject == null || AssociatedObject.StrokeThickness == 0) return; //if (target.ActualHeight == 0 || target.ActualWidth == 0)// return;var totalLength = GetTotalLength(); totalLength = totalLength / AssociatedObject.StrokeThickness; var thirdSection = Progress * totalLength / 100; var secondSection = (totalLength - thirdSection) / 2; var result = new DoubleCollection { 0, secondSection, thirdSection, double.MaxValue }; AssociatedObject.StrokeDashArray = result; } }
套用到ControlTemplate以下:
<ControlTemplate TargetType="Button"><Grid x:Name="RootGrid"><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualStateGroup.Transitions><VisualTransition GeneratedDuration="0:0:1" To="Normal"><Storyboard><DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(local:EllipseProgressBehavior.Progress)" Storyboard.TargetName="EllipseProgressBehavior"><EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"><EasingDoubleKeyFrame.EasingFunction><QuinticEase EasingMode="EaseOut" /></EasingDoubleKeyFrame.EasingFunction></EasingDoubleKeyFrame></DoubleAnimationUsingKeyFrames></Storyboard></VisualTransition><VisualTransition GeneratedDuration="0:0:1" To="PointerOver"><Storyboard><DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(local:EllipseProgressBehavior.Progress)" Storyboard.TargetName="EllipseProgressBehavior"><EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"><EasingDoubleKeyFrame.EasingFunction><QuinticEase EasingMode="EaseOut" /></EasingDoubleKeyFrame.EasingFunction></EasingDoubleKeyFrame></DoubleAnimationUsingKeyFrames></Storyboard></VisualTransition></VisualStateGroup.Transitions><VisualState x:Name="Normal"><Storyboard><PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /></Storyboard></VisualState><VisualState x:Name="PointerOver"><Storyboard><PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /></Storyboard><VisualState.Setters><Setter Target="EllipseProgressBehavior.(local:EllipseProgressBehavior.Progress)" Value="100" /></VisualState.Setters></VisualState><VisualState x:Name="Pressed"><Storyboard><PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /></Storyboard></VisualState><VisualState x:Name="Disabled" /></VisualStateGroup></VisualStateManager.VisualStateGroups><ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /><Ellipse Fill="Transparent" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"><interactivity:Interaction.Behaviors><local:ChangeAngleToEnterPointerBehavior /><local:EllipseProgressBehavior x:Name="EllipseProgressBehavior" /></interactivity:Interaction.Behaviors></Ellipse></Grid></ControlTemplate>
注重:我没有勉励任何人自定义按钮表面的意义,能用体系自带的动画或款式就只管用体系自带的,没有设计师的情况下 又想UI做得异乎寻常一般会做得很丢脸。想要UI悦目,合理的规划、合理的色彩、合理的图片就足够了。
6. 结语
在进修Shape的过程当中以为好玩就做了许多尝试,因为之前工作中做过不少守候、进度的动画,所以此次就试着做出本文的动画。
XAML的传统动画并没有供应太多功用,主如果ColorAnimation、DoubleAnimation、PointAnimation三种,不过靠Binding和Converter可以填补这方面的不足,完成许多须要的功用。
本文的一些动画结果参考了SVG的动画。话说回来,Windows 10 1703新增了SvgImageSource,不过看起来只是简朴地将SVG翻译成对应的Shape,然后用Shape显现,不少高等特征都不支撑(以下图暗影的滤镜),用法以下:
<Image><Image.Source><SvgImageSource UriSource="feoffset_1.svg" /></Image.Source></Image>
以上就是用Shape做动画实例代码的细致内容,更多请关注ki4网别的相干文章!