Merge pull request #4790 from worldbeater/master

Add a CompositePageTransition to Avalonia.Visuals

src/Avalonia.Visuals/Animation/CompositePageTransition.cs

@@ -0,0 +1,61 @@
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Avalonia.Metadata;
+
+namespace Avalonia.Animation
+{
+    /// <summary>
+    /// Defines a composite page transition that can be used to combine multiple transitions.
+    /// </summary>
+    /// <remarks>
+    /// <para>
+    /// Instantiate the <see cref="CompositePageTransition" /> in XAML and initialize the
+    /// <see cref="Transitions" /> property in order to have many animations triggered at once.
+    /// For example, you can combine <see cref="CrossFade"/> and <see cref="PageSlide"/>.
+    /// <code>
+    /// <![CDATA[
+    /// <reactiveUi:RoutedViewHost Router="{Binding Router}">
+    ///   <reactiveUi:RoutedViewHost.PageTransition>
+    ///     <CompositePageTransition>
+    ///       <PageSlide Duration="0.5" />
+    ///       <CrossFade Duration="0.5" />
+    ///     </CompositePageTransition>
+    ///   </reactiveUi:RoutedViewHost.PageTransition>
+    /// </reactiveUi:RoutedViewHost>
+    /// ]]>
+    /// </code>
+    /// </para>
+    /// </remarks>
+    public class CompositePageTransition : IPageTransition
+    {
+        /// <summary>
+        /// Gets or sets the transitions to be executed. Can be defined from XAML.
+        /// </summary>
+        [Content]
+        public List<IPageTransition> PageTransitions { get; set; } = new List<IPageTransition>();
+
+        /// <summary>
+        /// Starts the animation.
+        /// </summary>
+        /// <param name="from">
+        /// The control that is being transitioned away from. May be null.
+        /// </param>
+        /// <param name="to">
+        /// The control that is being transitioned to. May be null.
+        /// </param>
+        /// <param name="forward">
+        /// Defines the direction of the transition.
+        /// </param>
+        /// <returns>
+        /// A <see cref="Task"/> that tracks the progress of the animation.
+        /// </returns>
+        public Task Start(Visual from, Visual to, bool forward)
+        {
+            var transitionTasks = PageTransitions
+                .Select(transition => transition.Start(from, to, forward))
+                .ToList();
+            return Task.WhenAll(transitionTasks);
+        }
+    }
+}

src/Avalonia.Visuals/Animation/CrossFade.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Threading.Tasks;
+using Avalonia.Animation.Easings;
 using Avalonia.Styling;
 using Avalonia.VisualTree;
 
@@ -74,14 +75,26 @@ namespace Avalonia.Animation
         /// </summary>
         public TimeSpan Duration
         {
-            get
-            {
-                return _fadeOutAnimation.Duration;
-            }
-            set
-            {
-                _fadeOutAnimation.Duration = _fadeInAnimation.Duration = value;
-            }
+            get => _fadeOutAnimation.Duration;
+            set => _fadeOutAnimation.Duration = _fadeInAnimation.Duration = value;
+        }
+
+        /// <summary>
+        /// Gets or sets element entrance easing.
+        /// </summary>
+        public Easing FadeInEasing
+        {
+            get => _fadeInAnimation.Easing;
+            set => _fadeInAnimation.Easing = value;
+        }
+
+        /// <summary>
+        /// Gets or sets element exit easing.
+        /// </summary>
+        public Easing FadeOutEasing
+        {
+            get => _fadeOutAnimation.Easing;
+            set => _fadeOutAnimation.Easing = value;
         }
 
         /// <summary>

src/Avalonia.Visuals/Animation/PageSlide.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Threading.Tasks;
+using Avalonia.Animation.Easings;
 using Avalonia.Media;
 using Avalonia.Styling;
 using Avalonia.VisualTree;
@@ -48,6 +49,16 @@ namespace Avalonia.Animation
         /// Gets the duration of the animation.
         /// </summary>
         public SlideAxis Orientation { get; set; }
+        
+        /// <summary>
+        /// Gets or sets element entrance easing.
+        /// </summary>
+        public Easing SlideInEasing { get; set; } = new LinearEasing();
+        
+        /// <summary>
+        /// Gets or sets element exit easing.
+        /// </summary>
+        public Easing SlideOutEasing { get; set; } = new LinearEasing();
 
         /// <summary>
         /// Starts the animation.
@@ -75,18 +86,12 @@ namespace Avalonia.Animation
             {
                 var animation = new Animation
                 {
-                    Children = 
+                    Easing = SlideOutEasing,
+                    Children =
                     {
                         new KeyFrame
                         {
-                            Setters =
-                            {
-                                new Setter
-                                {
-                                    Property = translateProperty,
-                                Value = 0d
-                                }
-                            },
+                            Setters = { new Setter { Property = translateProperty, Value = 0d } },
                             Cue = new Cue(0d)
                         },
                         new KeyFrame
@@ -100,10 +105,10 @@ namespace Avalonia.Animation
                                 }
                             },
                             Cue = new Cue(1d)
-                        }                       
-                    }
+                        }
+                    },
+                    Duration = Duration
                 };
-                animation.Duration = Duration;
                 tasks.Add(animation.RunAsync(from));
             }
 
@@ -112,9 +117,9 @@ namespace Avalonia.Animation
                 to.IsVisible = true;
                 var animation = new Animation
                 {
+                    Easing = SlideInEasing,
                     Children =
                     {
-
                         new KeyFrame
                         {
                             Setters =
@@ -129,19 +134,12 @@ namespace Avalonia.Animation
                         },
                         new KeyFrame
                         {
-                            Setters =
-                            {
-                                new Setter
-                                {
-                                    Property = translateProperty,
-                                    Value = 0d
-                                }
-                            },
+                            Setters = { new Setter { Property = translateProperty, Value = 0d } },
                             Cue = new Cue(1d)
                         }
-                    }
+                    },
+                    Duration = Duration
                 };
-                animation.Duration = Duration;
                 tasks.Add(animation.RunAsync(to));
             }