From fb24332d2a61da1ec76ee6eb94f47d8b21c67ee0 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Fri, 25 May 2018 01:51:30 +0800
Subject: [PATCH] Port RenderTest animations to the new syntax

---
 samples/RenderTest/Pages/AnimationsPage.xaml | 71 +++++++++++++++-----
 samples/RenderTest/Pages/ClippingPage.xaml   | 13 ++--
 2 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/samples/RenderTest/Pages/AnimationsPage.xaml b/samples/RenderTest/Pages/AnimationsPage.xaml
index 9da371f007..d5f13c6d8e 100644
--- a/samples/RenderTest/Pages/AnimationsPage.xaml
+++ b/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"
-                     PlaybackDirection="AlternateReverse"
+                     RepeatCount="4" 
+                     FillMode="None"
+                     PlaybackDirection="AlternateReverse" 
                      Easing="SineEaseInOut">
-            <KeyFrame Cue="0%">
-              <DoubleSetter Property="Opacity" Value="0"/>
-            </KeyFrame> 
-            <KeyFrame Cue="0%">
-              <TransformSetter Property="RotateTransform.Angle" Value="360"/>
-              <TransformSetter Property="ScaleTransform.ScaleX" Value="2"/>
-              <TransformSetter Property="ScaleTransform.ScaleY" Value="2"/>
-            </KeyFrame> 
-            <KeyFrame Cue="100%">
-              <DoubleSetter Property="Opacity" Value="1"/>
-            </KeyFrame> 
+            <KeyFrame Cue="20%">
+              <TransformSetter Property="RotateTransform.Angle" Value="45"/>
+             </KeyFrame>
+            <KeyFrame Cue="50%">
+              <TransformSetter Property="ScaleTransform.ScaleX" Value="1.5"/>
+             </KeyFrame>
+            <KeyFrame Cue="80%">
+              <TransformSetter Property="RotateTransform.Angle" Value="120"/>
+            </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>
diff --git a/samples/RenderTest/Pages/ClippingPage.xaml b/samples/RenderTest/Pages/ClippingPage.xaml
index a47d3e1bd2..2fd289154f 100644
--- a/samples/RenderTest/Pages/ClippingPage.xaml
+++ b/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="0%" Value="0"/>
-                <KeyFrame Cue="100%" Value="360"/>
-              </TransformKeyFrames>
+              <KeyFrame Cue="100%">
+                <TransformSetter Property="RotateTransform.Angle" Value="360"/>
+              </KeyFrame>
             </Animation>
-          </Style.Animations> -->
+          </Style.Animations>
         </Style>
       </Styles>
     </Grid.Styles>