这篇文章将为大家详细讲解有关怎么用Shape做动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联专业为企业提供敖汉网站建设、敖汉做网站、敖汉网站设计、敖汉网站制作等企业网站建设、网页设计与制作、敖汉企业网站模板建站服务，十年敖汉做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
1. 使用PointAnimation
使用PointAnimation可以让Shape变形，但实际上没看到多少人会这么用，毕竟WPF做的软件多数不需要这么花俏。
1.1 在XAML上使用PointAnimation
…
在这个例子里最头痛的地方是Property-path 语法，如果不能熟记的话最好依赖Blend生成。
1.2 在代码中使用PointAnimation
如果Point数量很多，例如图表，通常会在C#代码中使用PointAnimation：
_storyboard = new Storyboard();
Random random = new Random();for (int i = 0; i < _pathFigure.Segments.Count; i++)
{var animation = new PointAnimation { Duration = TimeSpan.FromSeconds(3) };
Storyboard.SetTarget(animation, _pathFigure.Segments[i]);
Storyboard.SetTargetProperty(animation, "(LineSegment.Point)");
animation.EnableDependentAnimation = true;
animation.EasingFunction = new QuarticEase { EasingMode = EasingMode.EaseOut };
animation.To = new Point((_pathFigure.Segments[i] as LineSegment).Point.X, (i % 2 == 0 ? 1 : -1) * i * 1.2 + 60);
_storyboard.Children.Add(animation);
}
_storyboard.Begin();
因为可以直接SetTarget，所以Property-path语法就可以很简单。
2. 扩展PointAnimation
上面两个例子的动画都还算简单，如果更复杂些，XAML或C#代码都需要写到很复杂。我参考了这个网页 想做出类似的动画，但发现需要写很多XAML所以放弃用PointAnimation实现。这个页面的动画核心是这段HTML：
只需一组Point的集合就可以控制所有Point的动画，确实比PointAnimation高效很多。 在WPF中可以通过继承Timeline实现一个PointCollectionAnimamtion，具体可以参考这个项目。可惜的是虽然UWP的Timeline类并不封闭，但完全不知道如何继承并派生一个自定义的Animation。
这时候需要稍微变通一下思维。可以将DoubleAnimation理解成这样：Storyboard将TimeSpan传递给DoubleAnimation，DoubleAnimation通过这个TimeSpan（有时还需要结合EasingFunction）计算出目标属性的当前值最后传递给目标属性，如下图所示：
既然这样，也可以接收到这个计算出来的Double，再通过Converter计算出目标的PointCollection值：
假设告诉这个Converter当传入的Double值（命名为Progress）为0的时候，PointCollection是{0,0 1,1 …}，Progress为100时PointCollection是{1,1 2,2 …}，当Progress处于其中任何值时的计算方法则是：
private PointCollection GetCurrentPoints(PointCollection fromPoints, PointCollection toPoints, double percentage)
{var result = new PointCollection();for (var i = 0;
i < Math.Min(fromPoints.Count, toPoints.Count);
i++)
{
var x = (1 - percentage / 100d) * fromPoints[i].X + percentage / 100d * toPoints[i].X;
var y = (1 - percentage / 100d) * fromPoints[i].Y + percentage / 100d * toPoints[i].Y;
result.Add(new Point(x, y));
}return result;
}这样就完成了从TimeSpan到PointCollection的转换过程。然后就是定义在XAML上的使用方式。参考上面PointCollectionAnimation，虽然多了个Converter，但XAML也应该足够简洁：
97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7…
最终我选择了将这个Converter命名为ProgressToPointCollectionBridge。可以看出Polygon 将Points绑定到ProgressToPointCollectionBridge，DoubleAnimation 改变ProgressToPointCollectionBridge.Progress，从而改变Points。XAML的简洁程度还算令人满意，如果需要操作多个点的话相对于PointAnimation的优势就很大。
运行结果如下：
完整的XAML：
97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7
ProgressToPointCollectionBridge:
[ContentProperty(Name = nameof(Children))]public class ProgressToPointCollectionBridge : DependencyObject
{public ProgressToPointCollectionBridge()
{
Children = new ObservableCollection();
}/// /// 获取或设置Points的值/// public PointCollection Points
{get { return (PointCollection) GetValue(PointsProperty); }set { SetValue(PointsProperty, value); }
}/// /// 获取或设置Progress的值/// public double Progress
{get { return (double) GetValue(ProgressProperty); }set { SetValue(ProgressProperty, value); }
}/// /// 获取或设置Children的值/// public Collection Children
{get { return (Collection) GetValue(ChildrenProperty); }set { SetValue(ChildrenProperty, value); }
}protected virtual void OnProgressChanged(double oldValue, double newValue)
{UpdatePoints();
}protected virtual void OnChildrenChanged(Collection oldValue, Collection newValue)
{var oldCollection = oldValue as INotifyCollectionChanged;if (oldCollection != null)
oldCollection.CollectionChanged -= OnChildrenCollectionChanged;var newCollection = newValue as INotifyCollectionChanged;if (newCollection != null)
newCollection.CollectionChanged += OnChildrenCollectionChanged;UpdatePoints();
}private void OnChildrenCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{UpdatePoints();
}private void UpdatePoints()
{if (Children == null || Children.Any() == false)
{
Points = null;
}else if (Children.Count == 1)
{var fromPoints = new PointCollection();for (var i = 0; i < Children[0].Count; i++)
fromPoints.Add(new Point(0, 0));var toPoints = Children[0];
Points = GetCurrentPoints(fromPoints, toPoints, Progress);
}else{var rangePerSection = 100d / (Children.Count - 1);var fromIndex = Math.Min(Children.Count - 2, Convert.ToInt32(Math.Floor(Progress / rangePerSection)));
fromIndex = Math.Max(fromIndex, 0);var toIndex = fromIndex + 1;
PointCollection fromPoints;if (fromIndex == toIndex)
{
fromPoints = new PointCollection();for (var i = 0; i < Children[0].Count; i++)
fromPoints.Add(new Point(0, 0));
}else{
fromPoints = Children.ElementAt(fromIndex);
}var toPoints = Children.ElementAt(toIndex);
var percentage = (Progress / rangePerSection - fromIndex) * 100;
Points = GetCurrentPoints(fromPoints, toPoints, percentage);
}
}private PointCollection GetCurrentPoints(PointCollection fromPoints, PointCollection toPoints, double percentage)
{var result = new PointCollection();for (var i = 0;
i < Math.Min(fromPoints.Count, toPoints.Count);
i++)
{
var x = (1 - percentage / 100d) * fromPoints[i].X + percentage / 100d * toPoints[i].X;
var y = (1 - percentage / 100d) * fromPoints[i].Y + percentage / 100d * toPoints[i].Y;
result.Add(new Point(x, y));
}return result;
}#region DependencyProperties#endregion}关于“怎么用Shape做动画”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网页题目：怎么用Shape做动画
标题来源：
http://kswsj.cn/article/gpjdhc.html
