Use Composition Api for animation

samples/ControlCatalog/Pages/RefreshContainerPage.axaml

@@ -2,9 +2,11 @@
              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"
+             xmlns:viewModels="using:ControlCatalog.ViewModels"
              mc:Ignorable="d"
              d:DesignWidth="800"
              d:DesignHeight="450"
+             x:DataType="viewModels:RefreshContainerViewModel"
              x:Class="ControlCatalog.Pages.RefreshContainerPage">
   <DockPanel HorizontalAlignment="Stretch"
              Height="600"

src/Avalonia.Base/Input/PullGestureRecognizer.cs

@@ -100,7 +100,7 @@ namespace Avalonia.Input
 
         public void PointerPressed(PointerPressedEventArgs e)
         {
-            if (_target != null && (e.Pointer.Type == PointerType.Touch || e.Pointer.Type == PointerType.Pen))
+            if (_target != null)// && (e.Pointer.Type == PointerType.Touch || e.Pointer.Type == PointerType.Pen))
             {
                 var position = e.GetPosition(_target);
 

src/Avalonia.Controls/PullToRefresh/RefreshContainer.cs

@@ -12,27 +12,27 @@ namespace Avalonia.Controls
 
         private readonly bool _hasDefaultRefreshInfoProviderAdapter;
 
-        private ScrollViewerIRefreshInfoProviderAdapter _refreshInfoProviderAdapter;
-        private RefreshInfoProvider _refreshInfoProvider;
-        private IDisposable _visualizerSizeSubscription;
+        private ScrollViewerIRefreshInfoProviderAdapter? _refreshInfoProviderAdapter;
+        private RefreshInfoProvider? _refreshInfoProvider;
+        private IDisposable? _visualizerSizeSubscription;
         private Grid? _visualizerPresenter;
-        private RefreshVisualizer _refreshVisualizer;
+        private RefreshVisualizer? _refreshVisualizer;
 
         public static readonly RoutedEvent<RefreshRequestedEventArgs> RefreshRequestedEvent =
             RoutedEvent.Register<RefreshContainer, RefreshRequestedEventArgs>(nameof(RefreshRequested), RoutingStrategies.Bubble);
 
-        internal static readonly DirectProperty<RefreshContainer, ScrollViewerIRefreshInfoProviderAdapter> RefreshInfoProviderAdapterProperty =
-            AvaloniaProperty.RegisterDirect<RefreshContainer, ScrollViewerIRefreshInfoProviderAdapter>(nameof(RefreshInfoProviderAdapter),
+        internal static readonly DirectProperty<RefreshContainer, ScrollViewerIRefreshInfoProviderAdapter?> RefreshInfoProviderAdapterProperty =
+            AvaloniaProperty.RegisterDirect<RefreshContainer, ScrollViewerIRefreshInfoProviderAdapter?>(nameof(RefreshInfoProviderAdapter),
                 (s) => s.RefreshInfoProviderAdapter, (s, o) => s.RefreshInfoProviderAdapter = o);
 
-        public static readonly DirectProperty<RefreshContainer, RefreshVisualizer> RefreshVisualizerProperty =
-            AvaloniaProperty.RegisterDirect<RefreshContainer, RefreshVisualizer>(nameof(RefreshVisualizer),
+        public static readonly DirectProperty<RefreshContainer, RefreshVisualizer?> RefreshVisualizerProperty =
+            AvaloniaProperty.RegisterDirect<RefreshContainer, RefreshVisualizer?>(nameof(RefreshVisualizer),
                 s => s.RefreshVisualizer, (s, o) => s.RefreshVisualizer = o);
 
         public static readonly StyledProperty<PullDirection> PullDirectionProperty =
             AvaloniaProperty.Register<RefreshContainer, PullDirection>(nameof(PullDirection), PullDirection.TopToBottom);
 
-        public ScrollViewerIRefreshInfoProviderAdapter RefreshInfoProviderAdapter
+        public ScrollViewerIRefreshInfoProviderAdapter? RefreshInfoProviderAdapter
         {
             get => _refreshInfoProviderAdapter; set
             {
@@ -42,7 +42,7 @@ namespace Avalonia.Controls
 
         private bool _hasDefaultRefreshVisualizer;
 
-        public RefreshVisualizer RefreshVisualizer
+        public RefreshVisualizer? RefreshVisualizer
         {
             get => _refreshVisualizer; set
             {
@@ -88,7 +88,7 @@ namespace Avalonia.Controls
             else
             {
                 _hasDefaultRefreshVisualizer = false;
-                RaisePropertyChanged(RefreshVisualizerProperty, null, _refreshVisualizer);
+                RaisePropertyChanged(RefreshVisualizerProperty, default, _refreshVisualizer);
             }
 
             OnPullDirectionChanged();
@@ -115,19 +115,23 @@ namespace Avalonia.Controls
 
             if (change.Property == RefreshInfoProviderAdapterProperty)
             {
-                if (_refreshInfoProvider != null)
-                {
-                    _refreshVisualizer.RefreshInfoProvider = _refreshInfoProvider;
-                }
-                else
+                if (_refreshVisualizer != null)
                 {
-                    if (RefreshInfoProviderAdapter != null && _refreshVisualizer != null)
+                    if (_refreshInfoProvider != null)
                     {
-                        _refreshInfoProvider = RefreshInfoProviderAdapter.AdaptFromTree(this, _refreshVisualizer.Bounds.Size);
-
-                        if (_refreshInfoProvider != null)
+                        _refreshVisualizer.RefreshInfoProvider = _refreshInfoProvider;
+                    }
+                    else
+                    {
+                        if (RefreshInfoProviderAdapter != null && _refreshVisualizer != null)
                         {
-                            _refreshVisualizer.RefreshInfoProvider = _refreshInfoProvider;
+                            _refreshInfoProvider = RefreshInfoProviderAdapter?.AdaptFromTree(this, _refreshVisualizer.Bounds.Size);
+
+                            if (_refreshInfoProvider != null)
+                            {
+                                _refreshVisualizer.RefreshInfoProvider = _refreshInfoProvider;
+                                RefreshInfoProviderAdapter?.SetAnimations(_refreshVisualizer);
+                            }
                         }
                     }
                 }
@@ -157,7 +161,7 @@ namespace Avalonia.Controls
 
         private void OnPullDirectionChanged()
         {
-            if (_visualizerPresenter != null)
+            if (_visualizerPresenter != null && _refreshVisualizer != null)
             {
                 switch (PullDirection)
                 {

src/Avalonia.Controls/PullToRefresh/RefreshInfoProvider.cs

@@ -1,6 +1,7 @@
 using System;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.Rendering.Composition;
 
 namespace Avalonia.Controls.PullToRefresh
 {
@@ -11,7 +12,7 @@ namespace Avalonia.Controls.PullToRefresh
         private readonly PullDirection _refreshPullDirection;
         private readonly Size _refreshVisualizerSize;
 
-        private readonly Visual _visual;
+        private readonly CompositionVisual? _visual;
         private bool _isInteractingForRefresh;
         private double _interactionRatio;
         private bool _entered;
@@ -60,7 +61,7 @@ namespace Avalonia.Controls.PullToRefresh
             }
         }
 
-        internal Visual Visual => _visual;
+        internal CompositionVisual? Visual => _visual;
 
         public event EventHandler<RoutedEventArgs> RefreshStarted
         {
@@ -74,7 +75,7 @@ namespace Avalonia.Controls.PullToRefresh
             remove => RemoveHandler(RefreshCompletedEvent, value);
         }
 
-        internal void InteractingStateEntered(object sender, PullGestureEventArgs e)
+        internal void InteractingStateEntered(object? sender, PullGestureEventArgs e)
         {
             if (!_entered)
             {
@@ -85,7 +86,7 @@ namespace Avalonia.Controls.PullToRefresh
             ValuesChanged(e.Delta);
         }
 
-        internal void InteractingStateExited(object sender, PullGestureEndedEventArgs e)
+        internal void InteractingStateExited(object? sender, PullGestureEndedEventArgs e)
         {
             IsInteractingForRefresh = false;
             _entered = false;
@@ -94,10 +95,10 @@ namespace Avalonia.Controls.PullToRefresh
         }
 
 
-        public RefreshInfoProvider(PullDirection refreshPullDirection, Size refreshVIsualizerSize, Visual visual)
+        public RefreshInfoProvider(PullDirection refreshPullDirection, Size? refreshVIsualizerSize, CompositionVisual? visual)
         {
             _refreshPullDirection = refreshPullDirection;
-            _refreshVisualizerSize = refreshVIsualizerSize;
+            _refreshVisualizerSize = refreshVIsualizerSize ?? default;
             _visual = visual;
         }
 

src/Avalonia.Controls/PullToRefresh/RefreshVisualizer.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Numerics;
 using System.Reactive.Linq;
 using System.Threading;
 using Avalonia.Animation;
@@ -7,25 +8,24 @@ using Avalonia.Controls.PullToRefresh;
 using Avalonia.Input;
 using Avalonia.Interactivity;
 using Avalonia.Media;
+using Avalonia.Rendering.Composition;
 
 namespace Avalonia.Controls
 {
     public class RefreshVisualizer : ContentControl
     {
         private const int DefaultIndicatorSize = 24;
-        private const double MinimumIndicatorOpacity = 0.4;
+        private const float MinimumIndicatorOpacity = 0.4f;
         private const string ArrowPathData = "M18.6195264,3.31842271 C19.0080059,3.31842271 19.3290603,3.60710385 19.3798716,3.9816481 L19.3868766,4.08577298 L19.3868766,6.97963208 C19.3868766,7.36811161 19.0981955,7.68916605 18.7236513,7.73997735 L18.6195264,7.74698235 L15.7256673,7.74698235 C15.3018714,7.74698235 14.958317,7.40342793 14.958317,6.97963208 C14.958317,6.59115255 15.2469981,6.27009811 15.6215424,6.21928681 L15.7256673,6.21228181 L16.7044011,6.21182461 C13.7917384,3.87107476 9.52212532,4.05209336 6.81933829,6.75488039 C3.92253872,9.65167996 3.92253872,14.34832 6.81933829,17.2451196 C9.71613786,20.1419192 14.4127779,20.1419192 17.3095775,17.2451196 C19.0725398,15.4821573 19.8106555,12.9925923 19.3476248,10.58925 C19.2674502,10.173107 19.5398064,9.77076216 19.9559494,9.69058758 C20.3720923,9.610413 20.7744372,9.88276918 20.8546118,10.2989121 C21.4129973,13.1971899 20.5217103,16.2033812 18.3947747,18.3303168 C14.8986373,21.8264542 9.23027854,21.8264542 5.73414113,18.3303168 C2.23800371,14.8341794 2.23800371,9.16582064 5.73414113,5.66968323 C9.05475132,2.34907304 14.3349409,2.18235834 17.8523166,5.16953912 L17.8521761,4.08577298 C17.8521761,3.66197713 18.1957305,3.31842271 18.6195264,3.31842271 Z";
         private double _executingRatio = 0.8;
 
-        private RotateTransform _visualizerRotateTransform;
-        private TranslateTransform _contentTranslateTransform;
         private RefreshVisualizerState _refreshVisualizerState;
-        private RefreshInfoProvider _refreshInfoProvider;
-        private IDisposable _isInteractingSubscription;
-        private IDisposable _interactionRatioSubscription;
+        private RefreshInfoProvider? _refreshInfoProvider;
+        private IDisposable? _isInteractingSubscription;
+        private IDisposable? _interactionRatioSubscription;
         private bool _isInteractingForRefresh;
         private Grid? _root;
-        private Control _content;
+        private Control? _content;
         private RefreshVisualizerOrientation _orientation;
         private float _startingRotationAngle;
         private double _interactionRatio;
@@ -46,9 +46,11 @@ namespace Avalonia.Controls
             AvaloniaProperty.RegisterDirect<RefreshVisualizer, RefreshVisualizerOrientation>(nameof(Orientation),
                 s => s.Orientation, (s, o) => s.Orientation = o);
 
-        public DirectProperty<RefreshVisualizer, RefreshInfoProvider> RefreshInfoProviderProperty =
-            AvaloniaProperty.RegisterDirect<RefreshVisualizer, RefreshInfoProvider>(nameof(RefreshInfoProvider),
+        public DirectProperty<RefreshVisualizer, RefreshInfoProvider?> RefreshInfoProviderProperty =
+            AvaloniaProperty.RegisterDirect<RefreshVisualizer, RefreshInfoProvider?>(nameof(RefreshInfoProvider),
                 s => s.RefreshInfoProvider, (s, o) => s.RefreshInfoProvider = o);
+        private Vector3 _defaultOffset;
+        private bool _played;
 
         public RefreshVisualizerState RefreshVisualizerState
         {
@@ -88,7 +90,7 @@ namespace Avalonia.Controls
             }
         }
 
-        public RefreshInfoProvider RefreshInfoProvider
+        public RefreshInfoProvider? RefreshInfoProvider
         {
             get => _refreshInfoProvider; internal set
             {
@@ -106,20 +108,17 @@ namespace Avalonia.Controls
             remove => RemoveHandler(RefreshRequestedEvent, value);
         }
 
-        public RefreshVisualizer()
-        {
-            _visualizerRotateTransform = new RotateTransform();
-            _contentTranslateTransform = new TranslateTransform();
-        }
-
         protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
         {
             base.OnApplyTemplate(e);
 
+            this.ClipToBounds = false;
+
             _root = e.NameScope.Find<Grid>("PART_Root");
 
             if (_root != null)
             {
+                _content = Content as Control;
                 if (_content == null)
                 {
                     Content = new PathIcon()
@@ -140,69 +139,113 @@ namespace Avalonia.Controls
             UpdateContent();
         }
 
+        protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+        {
+            base.OnAttachedToVisualTree(e);
+
+            UpdateContent();
+        }
+
         private void UpdateContent()
         {
-            if (_content != null)
+            if (_content != null && _root != null)
             {
-                switch (RefreshVisualizerState)
+                var root = _root;
+                var visual = _refreshInfoProvider?.Visual;
+                var contentVisual = ElementComposition.GetElementVisual(_content);
+                var visualizerVisual = ElementComposition.GetElementVisual(this);
+                if (visual != null && contentVisual != null && visualizerVisual != null)
                 {
-                    case RefreshVisualizerState.Idle:
-                        _content.Classes.Remove("refreshing");
-                        _root.Classes.Remove("pending");
-                        _content.RenderTransform = _visualizerRotateTransform;
-                        _content.Opacity = MinimumIndicatorOpacity;
-                        _visualizerRotateTransform.Angle = _startingRotationAngle;
-                        _contentTranslateTransform.X = 0;
-                        _contentTranslateTransform.Y = 0;
-                        break;
-                    case RefreshVisualizerState.Interacting:
-                        _content.Classes.Remove("refreshing");
-                        _root.Classes.Remove("pending");
-                        _content.RenderTransform = _visualizerRotateTransform;
-                        _content.Opacity = MinimumIndicatorOpacity;
-                        _visualizerRotateTransform.Angle = _startingRotationAngle + (_interactionRatio * 360);
-                        _content.Height = DefaultIndicatorSize;
-                        _content.Width = DefaultIndicatorSize;
-                        if (IsPullDirectionVertical)
-                        {
-                            _contentTranslateTransform.X = 0;
-                            _contentTranslateTransform.Y = _interactionRatio * (IsPullDirectionFar ? -1 : 1) * _root.Bounds.Height;
-                        }
-                        else
-                        {
-                            _contentTranslateTransform.Y = 0;
-                            _contentTranslateTransform.X = _interactionRatio * (IsPullDirectionFar ? -1 : 1) * _root.Bounds.Width;
-                        }
-                        break;
-                    case RefreshVisualizerState.Pending:
-                        _content.Classes.Remove("refreshing");
-                        _content.Opacity = 1;
-                        _content.RenderTransform = _visualizerRotateTransform;
-                        if (IsPullDirectionVertical)
-                        {
-                            _contentTranslateTransform.X = 0;
-                            _contentTranslateTransform.Y = _interactionRatio * (IsPullDirectionFar ? -1 : 1) * _root.Bounds.Height;
-                        }
-                        else
-                        {
-                            _contentTranslateTransform.Y = 0;
-                            _contentTranslateTransform.X = _interactionRatio * (IsPullDirectionFar ? -1 : 1) * _root.Bounds.Width;
-                        }
-
-                        _root.Classes.Add("pending");
-                        break;
-                    case RefreshVisualizerState.Refreshing:
-                        _root.Classes.Remove("pending");
-                        _content.Classes.Add("refreshing");
-                        _content.Opacity = 1;
-                        _content.Height = DefaultIndicatorSize;
-                        _content.Width = DefaultIndicatorSize;
-                        break;
-                    case RefreshVisualizerState.Peeking:
-                        _root.Classes.Remove("pending");
-                        _content.Opacity = 1;
-                        _visualizerRotateTransform.Angle += _startingRotationAngle;
-                        break;
+                    contentVisual.CenterPoint = new Vector3((float)(_content.Bounds.Width / 2), (float)(_content.Bounds.Height / 2), 0);
+                    switch (RefreshVisualizerState)
+                    {
+                        case RefreshVisualizerState.Idle:
+                            _played = false;
+                            contentVisual.Opacity = MinimumIndicatorOpacity;
+                            contentVisual.RotationAngle = (float)(_startingRotationAngle * Math.PI / 180f);
+                            visualizerVisual.Offset = IsPullDirectionVertical ?
+                                new Vector3(visualizerVisual.Offset.X, 0, 0) :
+                                new Vector3(0, visualizerVisual.Offset.Y, 0);
+                            contentVisual.Scale = new Vector3(0.9f, 0.9f, 0.9f);
+                            visual.Offset = default;
+                            break;
+                        case RefreshVisualizerState.Interacting:
+                            _played = false;
+                            contentVisual.Opacity = MinimumIndicatorOpacity;
+                            contentVisual.RotationAngle = (float)((_startingRotationAngle + (_interactionRatio * 360)) * Math.PI / 180f);
+                            Vector3 offset = default;
+                            if (IsPullDirectionVertical)
+                            {
+                                offset = new Vector3(0, (float)(_interactionRatio * (IsPullDirectionFar ? -1 : 1) * root.Bounds.Height), 0);
+                            }
+                            else
+                            {
+                                offset = new Vector3((float)(_interactionRatio * (IsPullDirectionFar ? -1 : 1) * root.Bounds.Width), 0, 0);
+                            }
+                            visual.Offset = offset;
+                            visualizerVisual.Offset = IsPullDirectionVertical ? 
+                                new Vector3(visualizerVisual.Offset.X, offset.Y, 0) :
+                                new Vector3(offset.X, visualizerVisual.Offset.Y, 0);
+                            contentVisual.Scale = new Vector3(0.9f, 0.9f, 0.9f);
+                            break;
+                        case RefreshVisualizerState.Pending:
+                            contentVisual.Opacity = 1;
+                            contentVisual.RotationAngle = (float)((_startingRotationAngle + 360) * Math.PI / 180f);
+                            if (IsPullDirectionVertical)
+                            {
+                                offset = new Vector3(0, (float)(_interactionRatio * (IsPullDirectionFar ? -1 : 1) * root.Bounds.Height), 0);
+                            }
+                            else
+                            {
+                                offset = new Vector3((float)(_interactionRatio * (IsPullDirectionFar ? -1 : 1) * root.Bounds.Width), 0, 0);
+                            }
+                            visual.Offset = offset;
+                            visualizerVisual.Offset = IsPullDirectionVertical ? 
+                                new Vector3(visualizerVisual.Offset.X, offset.Y, 0) : 
+                                new Vector3(offset.X, visualizerVisual.Offset.Y, 0);
+
+                            if (!_played)
+                            {
+                                _played = true;
+                                var scaleAnimation = contentVisual.Compositor!.CreateVector3KeyFrameAnimation();
+                                scaleAnimation.Target = "Scale";
+                                scaleAnimation.InsertKeyFrame(0.5f, new Vector3(1.5f, 1.5f, 1));
+                                scaleAnimation.InsertKeyFrame(1f, new Vector3(1f, 1f, 1));
+                                scaleAnimation.Duration = TimeSpan.FromSeconds(0.3);
+
+                                contentVisual.StartAnimation("Scale", scaleAnimation);
+                            }
+                            break;
+                        case RefreshVisualizerState.Refreshing:
+                            var rotateAnimation = contentVisual.Compositor!.CreateScalarKeyFrameAnimation();
+                            rotateAnimation.Target = "RotationAngle";
+                            rotateAnimation.InsertKeyFrame(0, (float)(0));
+                            rotateAnimation.InsertKeyFrame(0.5f, (float)(Math.PI));
+                            rotateAnimation.InsertKeyFrame(1, (float)(2 * Math.PI));
+                            rotateAnimation.Duration = TimeSpan.FromSeconds(1);
+                            rotateAnimation.IterationCount = 1000;
+
+                            contentVisual.StartAnimation("RotationAngle", rotateAnimation);
+                            contentVisual.Opacity = 1;
+                            contentVisual.Scale = new Vector3(0.9f, 0.9f, 0.9f);
+                            if (IsPullDirectionVertical)
+                            {
+                                offset = new Vector3(0, (float)(_executingRatio * (IsPullDirectionFar ? -1 : 1) * root.Bounds.Height), 0);
+                            }
+                            else
+                            {
+                                offset = new Vector3((float)(_executingRatio * (IsPullDirectionFar ? -1 : 1) * root.Bounds.Width), 0, 0);
+                            }
+                            visual.Offset = offset;
+                            visualizerVisual.Offset = IsPullDirectionVertical ?
+                                new Vector3(visualizerVisual.Offset.X, offset.Y, 0) :
+                                new Vector3(offset.X, visualizerVisual.Offset.Y, 0);
+                            break;
+                        case RefreshVisualizerState.Peeking:
+                            contentVisual.Opacity = 1;
+                            contentVisual.RotationAngle = (float)(_startingRotationAngle * Math.PI / 180f);
+                            break;
+                    }
                 }
             }
         }
@@ -254,12 +297,6 @@ namespace Avalonia.Controls
                             Width = DefaultIndicatorSize
                         };
 
-                        var transformGroup = new TransformGroup();
-                        transformGroup.Children.Add(_visualizerRotateTransform);
-
-                        _content.RenderTransform = _visualizerRotateTransform;
-                        _root.RenderTransform = _contentTranslateTransform;
-
                         var transition = new Transitions
                         {
                             new DoubleTransition()
@@ -270,16 +307,42 @@ namespace Avalonia.Controls
                         };
 
                         _content.Transitions = transition;
-                    }
 
-                    var scalingGrid = new Grid();
-                    scalingGrid.VerticalAlignment = Layout.VerticalAlignment.Center;
-                    scalingGrid.HorizontalAlignment = Layout.HorizontalAlignment.Center;
-                    scalingGrid.RenderTransform = new ScaleTransform();
-
-                    scalingGrid.Children.Add(_content);
+                        _content.Loaded += (s, e) =>
+                        {
+                            var composition = ElementComposition.GetElementVisual(_content);
+                            var compositor = composition!.Compositor;
+                            composition.Opacity = 0;
+
+                            var smoothRotationAnimation
+                                = compositor.CreateScalarKeyFrameAnimation();
+                            smoothRotationAnimation.Target = "RotationAngle";
+                            smoothRotationAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
+                            smoothRotationAnimation.Duration = TimeSpan.FromMilliseconds(100);
+
+                            var offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
+                            offsetAnimation.Target = "Offset";
+                            offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
+                            offsetAnimation.Duration = TimeSpan.FromMilliseconds(150);
+
+                            var scaleAnimation
+                                = compositor.CreateVector3KeyFrameAnimation();
+                            scaleAnimation.Target = "Scale";
+                            scaleAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
+                            scaleAnimation.Duration = TimeSpan.FromMilliseconds(100);
+
+                            var animation = compositor.CreateImplicitAnimationCollection();
+                            animation["RotationAngle"] = smoothRotationAnimation;
+                            animation["Offset"] = offsetAnimation;
+                            animation["Scale"] = scaleAnimation;
+
+                            composition.ImplicitAnimations = animation;
+
+                            UpdateContent();
+                        };
+                    }
 
-                    _root.Children.Insert(0, scalingGrid);
+                    _root.Children.Add(_content);
                     _content.VerticalAlignment = Layout.VerticalAlignment.Center;
                     _content.HorizontalAlignment = Layout.HorizontalAlignment.Center;
                 }
@@ -294,25 +357,23 @@ namespace Avalonia.Controls
             }
             else if (change.Property == BoundsProperty)
             {
-                if (_content != null)
+                switch (PullDirection)
                 {
-                    var parent = _content.Parent as Control;
-                    switch (PullDirection)
-                    {
-                        case PullDirection.TopToBottom:
-                            parent.Margin = new Thickness(0, -Bounds.Height - DefaultIndicatorSize - (0.5 * DefaultIndicatorSize), 0, 0);
-                            break;
-                        case PullDirection.BottomToTop:
-                            parent.Margin = new Thickness(0, 0, 0, -Bounds.Height - DefaultIndicatorSize - (0.5 * DefaultIndicatorSize));
-                            break;
-                        case PullDirection.LeftToRight:
-                            parent.Margin = new Thickness(-Bounds.Width - DefaultIndicatorSize - (0.5 * DefaultIndicatorSize), 0, 0, 0);
-                            break;
-                        case PullDirection.RightToLeft:
-                            parent.Margin = new Thickness(0, 0, -Bounds.Width - DefaultIndicatorSize - (0.5 * DefaultIndicatorSize), 0);
-                            break;
-                    }
+                    case PullDirection.TopToBottom:
+                        RenderTransform = new TranslateTransform(0, -Bounds.Height);
+                        break;
+                    case PullDirection.BottomToTop:
+                        RenderTransform = new TranslateTransform(0, Bounds.Height);
+                        break;
+                    case PullDirection.LeftToRight:
+                        RenderTransform = new TranslateTransform(-Bounds.Width, 0);
+                        break;
+                    case PullDirection.RightToLeft:
+                        RenderTransform = new TranslateTransform(Bounds.Width, 0);
+                        break;
                 }
+
+                UpdateContent();
             }
         }
 
@@ -354,16 +415,15 @@ namespace Avalonia.Controls
             _interactionRatioSubscription?.Dispose();
             _interactionRatioSubscription = null;
 
-            if (_refreshInfoProvider != null)
+            if (RefreshInfoProvider != null)
             {
-                _isInteractingSubscription = _refreshInfoProvider.GetObservable(RefreshInfoProvider.IsInteractingForRefreshProperty)
+                _isInteractingSubscription = RefreshInfoProvider.GetObservable(RefreshInfoProvider.IsInteractingForRefreshProperty)
                     .Subscribe(InteractingForRefreshObserver);
 
-                _interactionRatioSubscription = _refreshInfoProvider.GetObservable(RefreshInfoProvider.InteractionRatioProperty)
+                _interactionRatioSubscription = RefreshInfoProvider.GetObservable(RefreshInfoProvider.InteractionRatioProperty)
                     .Subscribe(InteractionRatioObserver);
 
-                var visual = _refreshInfoProvider.Visual;
-                visual.RenderTransform = _contentTranslateTransform;
+                var visual = RefreshInfoProvider.Visual;
 
                 _executingRatio = RefreshInfoProvider.ExecutionRatio;
             }

src/Avalonia.Controls/PullToRefresh/ScrollViewerIRefreshInfoProviderAdapter.cs

@@ -1,6 +1,7 @@
 using System;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.Rendering.Composition;
 using Avalonia.VisualTree;
 
 namespace Avalonia.Controls.PullToRefresh
@@ -11,9 +12,9 @@ namespace Avalonia.Controls.PullToRefresh
         private const int InitialOffsetThreshold = 1;
 
         private PullDirection _refreshPullDirection;
-        private ScrollViewer _scrollViewer;
-        private RefreshInfoProvider _refreshInfoProvider;
-        private PullGestureRecognizer _pullGestureRecognizer;
+        private ScrollViewer? _scrollViewer;
+        private RefreshInfoProvider? _refreshInfoProvider;
+        private PullGestureRecognizer? _pullGestureRecognizer;
         private InputElement? _interactionSource;
         private bool _isVisualizerInteractionSourceAttached;
 
@@ -22,7 +23,7 @@ namespace Avalonia.Controls.PullToRefresh
             _refreshPullDirection = pullDirection;
         }
 
-        public RefreshInfoProvider AdaptFromTree(IVisual root, Size refreshVIsualizerSize)
+        public RefreshInfoProvider? AdaptFromTree(IVisual root, Size? refreshVIsualizerSize)
         {
             if (root is ScrollViewer scrollViewer)
             {
@@ -44,7 +45,7 @@ namespace Avalonia.Controls.PullToRefresh
                 }
             }
 
-            ScrollViewer AdaptFromTreeRecursiveHelper(IVisual root, int depth)
+            ScrollViewer? AdaptFromTreeRecursiveHelper(IVisual root, int depth)
             {
                 if (depth == 0)
                 {
@@ -74,7 +75,7 @@ namespace Avalonia.Controls.PullToRefresh
             return null;
         }
 
-        public RefreshInfoProvider Adapt(ScrollViewer adaptee, Size refreshVIsualizerSize)
+        public RefreshInfoProvider Adapt(ScrollViewer adaptee, Size? refreshVIsualizerSize)
         {
             if (adaptee == null)
             {
@@ -121,7 +122,7 @@ namespace Avalonia.Controls.PullToRefresh
                 }
             }
 
-            _refreshInfoProvider = new RefreshInfoProvider(_refreshPullDirection, refreshVIsualizerSize, content);
+            _refreshInfoProvider = new RefreshInfoProvider(_refreshPullDirection, refreshVIsualizerSize, ElementComposition.GetElementVisual(content));
 
             _pullGestureRecognizer = new PullGestureRecognizer(_refreshPullDirection);
 
@@ -140,7 +141,7 @@ namespace Avalonia.Controls.PullToRefresh
             return _refreshInfoProvider;
         }
 
-        private void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
+        private void ScrollViewer_ScrollChanged(object? sender, ScrollChangedEventArgs e)
         {
             if (_isVisualizerInteractionSourceAttached && _refreshInfoProvider != null && _refreshInfoProvider.IsInteractingForRefresh)
             {
@@ -151,9 +152,46 @@ namespace Avalonia.Controls.PullToRefresh
             }
         }
 
-        private void ScrollViewer_Loaded(object sender, RoutedEventArgs e)
+        public void SetAnimations(RefreshVisualizer refreshVisualizer)
         {
-            var content = _scrollViewer.Content as Visual;
+            var visualizerComposition = ElementComposition.GetElementVisual(refreshVisualizer);
+            if (visualizerComposition != null)
+            {
+                var compositor = visualizerComposition.Compositor;
+
+                var offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
+                offsetAnimation.Target = "Offset";
+                offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
+                offsetAnimation.Duration = TimeSpan.FromMilliseconds(150);
+
+                var animation = compositor.CreateImplicitAnimationCollection();
+                animation["Offset"] = offsetAnimation;
+                visualizerComposition.ImplicitAnimations = animation;
+            }
+
+            if(_scrollViewer != null && _scrollViewer.Content is Visual visual)
+            {
+                var scollContentComposition = ElementComposition.GetElementVisual(visual);
+
+                if(scollContentComposition != null)
+                {
+                    var compositor = scollContentComposition.Compositor;
+
+                    var offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
+                    offsetAnimation.Target = "Offset";
+                    offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
+                    offsetAnimation.Duration = TimeSpan.FromMilliseconds(150);
+
+                    var animation = compositor.CreateImplicitAnimationCollection();
+                    animation["Offset"] = offsetAnimation;
+                    scollContentComposition.ImplicitAnimations = animation;
+                }
+            }
+        }
+
+        private void ScrollViewer_Loaded(object? sender, RoutedEventArgs? e)
+        {
+            var content = _scrollViewer?.Content as Visual;
             if (content == null)
             {
                 throw new ArgumentException(nameof(_scrollViewer), "Adaptee's content property must be a Visual");
@@ -166,23 +204,26 @@ namespace Avalonia.Controls.PullToRefresh
 
             MakeInteractionSource(content.Parent as InputElement);
 
-            _scrollViewer.Loaded -= ScrollViewer_Loaded;
+            if (_scrollViewer != null)
+            {
+                _scrollViewer.Loaded -= ScrollViewer_Loaded;
+            }
         }
 
-        private void MakeInteractionSource(InputElement element)
+        private void MakeInteractionSource(InputElement? element)
         {
             _interactionSource = element;
 
-            if (_pullGestureRecognizer != null)
+            if (_pullGestureRecognizer != null && _refreshInfoProvider != null)
             {
-                element.GestureRecognizers.Add(_pullGestureRecognizer);
-                _interactionSource.AddHandler(Gestures.PullGestureEvent, _refreshInfoProvider.InteractingStateEntered);
-                _interactionSource.AddHandler(Gestures.PullGestureEndedEvent, _refreshInfoProvider.InteractingStateExited);
+                element?.GestureRecognizers.Add(_pullGestureRecognizer);
+                _interactionSource?.AddHandler(Gestures.PullGestureEvent, _refreshInfoProvider.InteractingStateEntered);
+                _interactionSource?.AddHandler(Gestures.PullGestureEndedEvent, _refreshInfoProvider.InteractingStateExited);
                 _isVisualizerInteractionSourceAttached = true;
             }
         }
 
-        private void ScrollViewer_PointerReleased(object sender, PointerReleasedEventArgs e)
+        private void ScrollViewer_PointerReleased(object? sender, PointerReleasedEventArgs e)
         {
             if (_refreshInfoProvider != null)
             {
@@ -190,9 +231,12 @@ namespace Avalonia.Controls.PullToRefresh
             }
         }
 
-        private void ScrollViewer_PointerPressed(object sender, PointerPressedEventArgs e)
+        private void ScrollViewer_PointerPressed(object? sender, PointerPressedEventArgs e)
         {
-            _refreshInfoProvider.PeekingMode = !IsWithinOffsetThreashold();
+            if (_refreshInfoProvider != null)
+            {
+                _refreshInfoProvider.PeekingMode = !IsWithinOffsetThreashold();
+            }
         }
 
         private bool IsWithinOffsetThreashold()
@@ -219,9 +263,12 @@ namespace Avalonia.Controls.PullToRefresh
 
         private void CleanUpScrollViewer()
         {
-            _scrollViewer.PointerPressed -= ScrollViewer_PointerPressed;
-            _scrollViewer.PointerReleased -= ScrollViewer_PointerReleased;
-            _scrollViewer.ScrollChanged -= ScrollViewer_ScrollChanged;
+            if (_scrollViewer != null)
+            {
+                _scrollViewer.PointerPressed -= ScrollViewer_PointerPressed;
+                _scrollViewer.PointerReleased -= ScrollViewer_PointerReleased;
+                _scrollViewer.ScrollChanged -= ScrollViewer_ScrollChanged;
+            }
         }
     }
 }

src/Avalonia.Themes.Fluent/Controls/RefreshVisualizer.xaml

@@ -14,37 +14,7 @@
       <ControlTemplate>
           <Grid Name="PART_Root" MinHeight="80" Background="{TemplateBinding Background}">
             <Grid.Styles>
-              <Style Selector="Grid.pending > Grid">
-                <Style.Animations>
-                  <Animation IterationCount="1" Duration="0:0:0.25">
-                    <KeyFrame Cue="0%">
-                      <Setter Property="ScaleTransform.ScaleX"
-                              Value="1"/>
-                    </KeyFrame>
-                    <KeyFrame Cue="0%">
-                      <Setter Property="ScaleTransform.ScaleY"
-                              Value="1"/>
-                    </KeyFrame>
-                    <KeyFrame Cue="50%">
-                      <Setter Property="ScaleTransform.ScaleX"
-                              Value="1.2"/>
-                    </KeyFrame>
-                    <KeyFrame Cue="50%">
-                      <Setter Property="ScaleTransform.ScaleY"
-                              Value="1.2"/>
-                    </KeyFrame>
-                    <KeyFrame Cue="100%">
-                      <Setter Property="ScaleTransform.ScaleX"
-                              Value="1"/>
-                    </KeyFrame>
-                    <KeyFrame Cue="100%">
-                      <Setter Property="ScaleTransform.ScaleY"
-                              Value="1"/>
-                    </KeyFrame>
-                  </Animation>
-                </Style.Animations>
-              </Style>
-              <Style Selector="Grid > Grid > PathIcon.refreshing">
+              <Style Selector="Grid > PathIcon.refreshing">
                 <Style.Animations>
                   <Animation Duration="0:0:1"
                              IterationCount="Infinite">