Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use Shape to do animation, the editor thinks it is very practical, so share it with you for reference. I hope you can get something after reading this article.

1. Use PointAnimation

Using PointAnimation can transform Shape, but I don't actually see how many people will use it. After all, most of the software made by WPF doesn't need to be so fancy.

1.1 using PointAnimation on XAML …

The biggest headache in this example is the Property-path syntax, and it's best to rely on Blend generation if you can't memorize it.

1.2 use PointAnimation in your code

If you have a large number of Point, such as charts, you will usually use PointAnimation in your C # code:

_ 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();

Because you can SetTarget directly, the Property-path syntax can be very simple.

two。 Extended PointAnimation

The animation of the above two examples is fairly simple, but if it is more complex, the XAML or C # code needs to be very complex. I referred to this page to make a similar animation, but found that I needed to write a lot of XAML, so I gave up using PointAnimation. The core of the animation on this page is this HTML:

It only takes a collection of Point to control the animation of all Point, which is much more efficient than PointAnimation. You can implement a PointCollectionAnimamtion in WPF by inheriting Timeline, as you can refer to this project. Unfortunately, although UWP's Timeline class is not closed, it has no idea how to inherit and derive a custom Animation.

At this time, you need to change your mind a little bit. You can think of DoubleAnimation as this: Storyboard passes TimeSpan to DoubleAnimation,DoubleAnimation through this TimeSpan (and sometimes in conjunction with EasingFunction) to calculate the current value of the target attribute and finally pass it to the target attribute, as shown in the following figure:

In this case, you can also receive the calculated Double, and then calculate the PointCollection value of the target through Converter:

Suppose you tell this Converter that when the passed-in double value (named Progress) is 0, PointCollection is {0pr 1. }, when Progress is 100, PointCollection is {1 ~ 1 ~ 2 ~ 2. }, when Progress is at any of these values, it is calculated as follows:

Private PointCollection GetCurrentPoints (PointCollection fromPoints, PointCollection toPoints, double percentage) {var result = new PointCollection (); for (var I = 0; I < Math.Min (fromPoints.Count, toPoints.Count); iTunes +) {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;}

This completes the conversion process from TimeSpan to PointCollection. Then there is the definition of how to use it on XAML. Refer to the PointCollectionAnimation above. Although there is an extra Converter, the XAML should be concise enough:

70.7 145.9118.1 157.4185.1 97.3153.5 37.2185.1 48.6118.1 0Power70.767.2 58.2 147.3 0.192.1 Magi 29 141.7105.1 118.7139.8 88.8185.1 46.1156.5 0125 86.6 71.1116.7.

Finally, I chose to name the Converter ProgressToPointCollectionBridge. You can see that Polygon binds Points to ProgressToPointCollectionBridge,DoubleAnimation and changes ProgressToPointCollectionBridge.Progress, thus changing Points. XAML is fairly concise, and has a great advantage over PointAnimation if you need to manipulate multiple points.

The running results are as follows:

Complete XAML:

97.3,0 127.4,60.9 194.6,70.7 145.9118.1 157.4185.1 97.3153.5 37.2185.1 48.6118.1 0,70.7 67.2,60.9110,58.2 147.3,0 192.1,29 141.7105.1 118.7139.8 88.8185.1 46.1156.5 0125 23.5,86.6 71.1116.7

ProgressToPointCollectionBridge:

[ContentProperty (Name = nameof (Children))] public class ProgressToPointCollectionBridge: DependencyObject {public ProgressToPointCollectionBridge () {Children = new ObservableCollection ();} / get or set the value of Points / get or set the value of Points / get or set the value of Progress / public double Progress {get {return (double) GetValue (ProgressProperty);} set {SetValue (PointsProperty, value);} / get or set the value of Progress } set {SetValue (ProgressProperty, value);}} / get or set the value of 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; iTunes +) 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; iSum +) 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) Percentage +) {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} this is the end of the article on "how to animate with Shape". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.