Minor Fixes on KFSM regarding backward fill mode.

Reimplemented ClippingPage.xaml to XAML Keyframes.
Reverted Animatable properties to a DirectProperty.

samples/RenderTest/Pages/AnimationsPage.xaml

@@ -35,13 +35,15 @@
         <Style.Animations>
           <Animation Duration="0:0:2.5"
                      RepeatBehavior="Repeat"
-                     RepeatCount="2"
-                     FillMode="Both"
+                     RepeatCount="4"
+                     FillMode="None"
                      PlaybackDirection="AlternateReverse"
                      Easing="SineEaseInOut">
             <TransformKeyFrames Property="RotateTransform.Angle">
-              <KeyFrame Cue="0%" Value="45"/>
-              <KeyFrame Cue="100%" Value="120"/>
+              <KeyFrame Cue="0%" Value="0"/>
+              <KeyFrame Cue="100%" Value="0"/>
+              <KeyFrame Cue="20%" Value="45"/>
+              <KeyFrame Cue="80%" Value="120"/>
             </TransformKeyFrames>
             <TransformKeyFrames Property="ScaleTransform.ScaleX">
               <KeyFrame Cue="0%" Value="1"/>

samples/RenderTest/Pages/ClippingPage.xaml

@@ -1,13 +1,53 @@
-<UserControl xmlns="https://github.com/avaloniaui">
+<UserControl 
+  xmlns="https://github.com/avaloniaui">
   <Grid ColumnDefinitions="Auto" RowDefinitions="Auto,Auto">
-    <Border Name="clipped"
+    <Grid.Styles>
+      <Styles>
+        <Style Selector="Border#clipped :pointerover">
+          <Setter Property="Border.Background" Value="Crimson"/>   
+        </Style>
+        <Style Selector="Border#clipChild">
+          <Style.Animations>
+            <Animation Duration="0:0:2" RepeatBehavior="Loop">
+              <TransformKeyFrames Property="RotateTransform.Angle">
+                <KeyFrame Cue="0%" Value="0"/>
+                <KeyFrame Cue="100%" Value="360"/>
+              </TransformKeyFrames>
+            </Animation>
+          </Style.Animations>
+        </Style>
+      </Styles>
+    </Grid.Styles>
+    <Border Name="clipped" 
             Background="Yellow"
             Width="100"
             Height="100"
-            Clip="M 58.625 0.07421875 C 50.305778 0.26687364 42.411858 7.0346526 41.806641 15.595703 C 42.446442 22.063923 39.707425 13.710754 36.982422 12.683594 C 29.348395 6.1821635 16.419398 8.4359222 11.480469 17.195312 C 6.0935256 25.476803 9.8118851 37.71125 18.8125 41.6875 C 9.1554771 40.62945 -0.070876925 49.146842 0.21679688 58.857422 C 0.21545578 60.872512 0.56758794 62.88911 1.2617188 64.78125 C 4.3821886 74.16708 16.298268 78.921772 25.03125 74.326172 C 28.266843 72.062552 26.298191 74.214838 25.414062 76.398438 C 21.407348 85.589198 27.295992 97.294293 37.097656 99.501953 C 46.864883 102.3541 57.82177 94.726518 58.539062 84.580078 C 58.142158 79.498998 59.307538 83.392694 61.207031 85.433594 C 67.532324 93.056874 80.440232 93.192029 86.882812 85.630859 C 93.836392 78.456939 92.396838 65.538666 84.115234 60.009766 C 79.783641 57.904836 83.569793 58.802369 86.375 58.193359 C 96.383335 56.457569 102.87506 44.824101 99.083984 35.394531 C 95.963498 26.008711 84.047451 21.254079 75.314453 25.849609 C 72.078834 28.113269 74.047517 25.960974 74.931641 23.777344 C 78.93827 14.586564 73.049722 2.8815081 63.248047 0.67382812 C 61.721916 0.22817968 60.165597 0.038541919 58.625 0.07421875 z ">
+            Clip="M 58.625 0.07421875
+                  C 50.305778 0.26687364 42.411858 7.0346526 41.806641 15.595703
+                  C 42.446442 22.063923 39.707425 13.710754 36.982422 12.683594
+                  C 29.348395 6.1821635 16.419398 8.4359222 11.480469 17.195312
+                  C 6.0935256 25.476803 9.8118851 37.71125 18.8125 41.6875
+                  C 9.1554771 40.62945 -0.070876925 49.146842 0.21679688 58.857422 
+                  C 0.21545578 60.872512 0.56758794 62.88911 1.2617188 64.78125 
+                  C 4.3821886 74.16708 16.298268 78.921772 25.03125 74.326172 
+                  C 28.266843 72.062552 26.298191 74.214838 25.414062 76.398438
+                  C 21.407348 85.589198 27.295992 97.294293 37.097656 99.501953 
+                  C 46.864883 102.3541 57.82177 94.726518 58.539062 84.580078 
+                  C 58.142158 79.498998 59.307538 83.392694 61.207031 85.433594 
+                  C 67.532324 93.056874 80.440232 93.192029 86.882812 85.630859 
+                  C 93.836392 78.456939 92.396838 65.538666 84.115234 60.009766 
+                  C 79.783641 57.904836 83.569793 58.802369 86.375 58.193359 
+                  C 96.383335 56.457569 102.87506 44.824101 99.083984 35.394531 
+                  C 95.963498 26.008711 84.047451 21.254079 75.314453 25.849609
+                  C 72.078834 28.113269 74.047517 25.960974 74.931641 23.777344 
+                  C 78.93827 14.586564 73.049722 2.8815081 63.248047 0.67382812
+                  C 61.721916 0.22817968 60.165597 0.038541919 58.625 0.07421875 z ">
       <Border Name="clipChild" Background="{DynamicResource ThemeAccentBrush}" Margin="4">
         <!-- Setting opacity puts the TextBox on a new layer -->
         <TextBox Text="Avalonia" Opacity="0.9" VerticalAlignment="Center"/>
+          <Border.RenderTransform>
+            <RotateTransform/>
+          </Border.RenderTransform>
       </Border>
     </Border>
     <CheckBox Name="useMask" IsChecked="True" Grid.Row="1">Apply Geometry Clip</CheckBox>

samples/RenderTest/Pages/ClippingPage.xaml.cs

@@ -16,7 +16,6 @@ namespace RenderTest.Pages
         public ClippingPage()
         {
             InitializeComponent();
-            CreateAnimations();
             WireUpCheckbox();
         }
 
@@ -25,18 +24,6 @@ namespace RenderTest.Pages
             AvaloniaXamlLoader.Load(this);
         }
 
-        private void CreateAnimations()
-        {
-            //var clipped = this.FindControl<Border>("clipChild");
-            //var degrees = Animate.Timer.Select(x => x.TotalMilliseconds / 5);
-            //clipped.RenderTransform = new RotateTransform();
-            //clipped.RenderTransform.Bind(RotateTransform.AngleProperty, degrees, BindingPriority.Animation);
-            //clipped.Bind(
-            //    Border.BackgroundProperty,
-            //    clipped.GetObservable(Control.IsPointerOverProperty)
-            //        .Select(x => x ? Brushes.Crimson : AvaloniaProperty.UnsetValue));
-        }
-
         private void WireUpCheckbox()
         {
             var useMask = this.FindControl<CheckBox>("useMask");

src/Avalonia.Animation/Animatable.cs

@@ -27,7 +27,7 @@ namespace Avalonia.Animation
             AnimatableTimer = Timing.AnimationStateTimer
                                 .Select(p =>
                                 {
-                                    if (PlayState == PlayState.Pause)
+                                    if (this._playState == PlayState.Pause)
                                     {
                                         return PlayState.Pause;
                                     }
@@ -46,31 +46,44 @@ namespace Avalonia.Animation
         /// <summary>
         /// Defines the <see cref="PlayState"/> property.
         /// </summary>
-        public static readonly StyledProperty<PlayState> PlayStateProperty =
-            AvaloniaProperty.Register<Animatable, PlayState>(nameof(PlayState), PlayState.Run);
+        public static readonly DirectProperty<Animatable, PlayState> PlayStateProperty =
+            AvaloniaProperty.RegisterDirect<Animatable, PlayState>(
+                nameof(PlayState),
+                o => o.PlayState,
+                (o, v) => o.PlayState = v);
+
+        private PlayState _playState = PlayState.Run;
 
         /// <summary>
-        /// Gets or sets the property transitions for the control.
+        /// Gets or sets the state of the animation for this
+        /// control.
         /// </summary>
         public PlayState PlayState
         {
-            get { return GetValue(PlayStateProperty); }
-            set { SetValue(PlayStateProperty, value); }
+            get { return _playState; }
+            set { SetAndRaise(PlayStateProperty, ref _playState, value); }
+
         }
 
+
         /// <summary>
         /// Defines the <see cref="Transitions"/> property.
-        /// </summary>  
-        public static readonly StyledProperty<IEnumerable<ITransition>> TransitionsProperty =
-            AvaloniaProperty.Register<Animatable, IEnumerable<ITransition>>(nameof(Transitions));
+        /// </summary>
+        public static readonly DirectProperty<Animatable, IEnumerable<ITransition>> TransitionsProperty =
+            AvaloniaProperty.RegisterDirect<Animatable, IEnumerable<ITransition>>(
+                nameof(Transitions),
+                o => o.Transitions,
+                (o, v) => o.Transitions = v);
+
+        private IEnumerable<ITransition> _transitions = new AvaloniaList<ITransition>();
 
         /// <summary>
         /// Gets or sets the property transitions for the control.
         /// </summary>
         public IEnumerable<ITransition> Transitions
         {
-            get { return GetValue(TransitionsProperty); }
-            set { SetValue(TransitionsProperty, value); }
+            get { return _transitions; }
+            set { SetAndRaise(TransitionsProperty, ref _transitions, value); }
         }
 
         /// <summary>

src/Avalonia.Animation/Keyframes/KeyFramesStateMachine.cs

@@ -9,8 +9,8 @@ namespace Avalonia.Animation.Keyframes
     /// </summary>
     internal class KeyFramesStateMachine<T> : IObservable<object>, IDisposable
     {
-        T _lastInterpValue = default(T);
-        T _firstKFValue = default(T);
+        object _lastInterpValue;
+        object _firstKFValue;
         private ulong _delayTotalFrameCount,
             _durationTotalFrameCount,
             _delayFrameCount,
@@ -120,7 +120,7 @@ namespace Avalonia.Animation.Keyframes
 
             if (!_gotFirstKFValue)
             {
-                _firstKFValue = (T)_parent.First().Value;
+                _firstKFValue = _parent.First().Value;
                 _gotFirstKFValue = true;
             }
 
@@ -148,11 +148,17 @@ namespace Avalonia.Animation.Keyframes
             {
                 case KeyFramesStates.DO_DELAY:
 
-                    if (_currentIteration == 0
-                     && _fillMode == FillMode.Backward
+                    if (_fillMode == FillMode.Backward
                      || _fillMode == FillMode.Both)
                     {
-                        _targetObserver.OnNext(_firstKFValue);
+                        if (_currentIteration == 0)
+                        {
+                            _targetObserver.OnNext(_firstKFValue);
+                        }
+                        else
+                        {
+                            _targetObserver.OnNext(_lastInterpValue);
+                        }
                     }
 
                     if (_delayFrameCount > _delayTotalFrameCount)
@@ -165,7 +171,7 @@ namespace Avalonia.Animation.Keyframes
                     break;
 
                 case KeyFramesStates.DO_RUN:
-                    
+
                     if (_isReversed)
                         _currentState = KeyFramesStates.RUN_BACKWARDS;
                     else
@@ -187,7 +193,7 @@ namespace Avalonia.Animation.Keyframes
                     goto checkstate;
 
                 case KeyFramesStates.RUN_BACKWARDS:
-                
+
                     if (_durationFrameCount > _durationTotalFrameCount)
                     {
                         _currentState = KeyFramesStates.RUN_COMPLETE;