Port RenderTest animations to the new syntax

samples/RenderTest/Pages/AnimationsPage.xaml

@@ -40,27 +40,68 @@
         <Setter Property="Height" Value="100"/>
         <Setter Property="Child" Value="{StaticResource Acorn}"/>
       </Style>
-      <Style Selector="Border.Rect1">
+      <Style Selector="Border.Rect1:pointerover">
         <Style.Animations>
           <Animation Duration="0:0:2.5" 
                      RepeatBehavior="Repeat"
-                     RepeatCount="4" FillMode="None"
+                     RepeatCount="4" 
-                     PlaybackDirection="AlternateReverse"
+                     FillMode="None"
+                     PlaybackDirection="AlternateReverse" 
                      Easing="SineEaseInOut">
-            <KeyFrame Cue="0%">
+            <KeyFrame Cue="20%">
-              <DoubleSetter Property="Opacity" Value="0"/>
+              <TransformSetter Property="RotateTransform.Angle" Value="45"/>
-            </KeyFrame> 
+             </KeyFrame>
-            <KeyFrame Cue="0%">
+            <KeyFrame Cue="50%">
-              <TransformSetter Property="RotateTransform.Angle" Value="360"/>
+              <TransformSetter Property="ScaleTransform.ScaleX" Value="1.5"/>
-              <TransformSetter Property="ScaleTransform.ScaleX" Value="2"/>
+             </KeyFrame>
-              <TransformSetter Property="ScaleTransform.ScaleY" Value="2"/>
+            <KeyFrame Cue="80%">
-            </KeyFrame> 
+              <TransformSetter Property="RotateTransform.Angle" Value="120"/>
-            <KeyFrame Cue="100%">
+            </KeyFrame>
-              <DoubleSetter Property="Opacity" Value="1"/>
-            </KeyFrame> 
           </Animation>
         </Style.Animations>
-      </Style> 
+      </Style>
+      <Style Selector="Border.Rect2:pointerover">
+        <Style.Animations>
+          <Animation Duration="0:0:0.5" Easing="SineEaseInOut">
+            <KeyFrame Cue="50%">
+              <TransformSetter Property="ScaleTransform.ScaleX" Value="0.8"/>
+              <TransformSetter Property="ScaleTransform.ScaleY" Value="0.8"/>
+            </KeyFrame>
+          </Animation>
+        </Style.Animations>
+      </Style>
+      <Style Selector="Border.Rect3">
+        <Setter Property="Child" Value="{StaticResource Heart}"/>
+        <Style.Animations>
+          <Animation Duration="0:0:0.5" Easing="QuadraticEaseInOut" RepeatBehavior="Loop">
+            <KeyFrame Cue="50%">
+              <TransformSetter Property="ScaleTransform.ScaleX" Value="0.8"/>
+              <TransformSetter Property="ScaleTransform.ScaleY" Value="0.8"/>
+            </KeyFrame>
+           </Animation>
+        </Style.Animations>
+      </Style>
+      <Style Selector="Border.Rect4:pointerover">
+        <Style.Animations>
+          <Animation Duration="0:0:3" Easing="BounceEaseInOut"> 
+            <KeyFrame Cue="48%">
+              <TransformSetter Property="TranslateTransform.Y" Value="-100"/>
+            </KeyFrame>
+          </Animation>
+        </Style.Animations>
+      </Style>
+      <Style Selector="Border.Rect5:pointerover">
+        <Style.Animations>
+          <Animation Duration="0:0:3" Easing="CircularEaseInOut">
+            <KeyFrame Cue="25%">
+              <TransformSetter Property="SkewTransform.AngleX" Value="-20"/>
+            </KeyFrame>
+            <KeyFrame Cue="75%">
+              <TransformSetter Property="SkewTransform.AngleX" Value="20"/>
+            </KeyFrame>
+          </Animation>
+        </Style.Animations>
+      </Style>
     </Styles>
   </UserControl.Styles>
   <Grid>

samples/RenderTest/Pages/ClippingPage.xaml

@@ -4,17 +4,16 @@
     <Grid.Styles>
       <Styles>
         <Style Selector="Border#clipped :pointerover">
-          <Setter Property="Border.Background" Value="Crimson"/>   
+          <Setter Property="Border.Background" Value="Crimson"/>
         </Style>
         <Style Selector="Border#clipChild">
-          <!-- <Style.Animations>
+          <Style.Animations>
             <Animation Duration="0:0:2" RepeatBehavior="Loop">
-              <TransformKeyFrames Property="RotateTransform.Angle">
+              <KeyFrame Cue="100%">
-                <KeyFrame Cue="0%" Value="0"/>
+                <TransformSetter Property="RotateTransform.Angle" Value="360"/>
-                <KeyFrame Cue="100%" Value="360"/>
+              </KeyFrame>
-              </TransformKeyFrames>
             </Animation>
-          </Style.Animations> -->
+          </Style.Animations>
         </Style>
       </Styles>
     </Grid.Styles>