examples/animation-recorder/test.html

   1 <html>
   2 <head>
   3     <style type="text/css">
   4     body {
   5       margin-left: 0;
   6       margin-top: 0;
   7       padding: 0;
   8     };
   9
  10     embed {
  11       margin-left: 0;
  12       margin-top: 0;
  13       margin-right: 0;
  14       margin-bottom: 0;
  15     };
  16     </style>
  17 </head>
  18 <body>
  19 <embed type="application/x-silverlight" data="data:," id="slControl" width="400" height="400" source="#xamlContent">
  20 </embed>
  21 <script type="text/xaml" id="xamlContent">
  22 <?xml version="1.0"?>
  23 <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  24         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="OnLoaded" x:Name="MasterCanvas">
  25
  26     <Ellipse Width="400" Height="400" Canvas.Left="0" Canvas.Top="0">
  27     <Ellipse.Fill>
  28         <RadialGradientBrush>
  29                         <RadialGradientBrush.GradientStops>
  30                                 <GradientStop x:Name="color1" Offset="0" Color="Red" />
  31                                 <GradientStop x:Name="color2" Offset="1" Color="Green" />
  32                         </RadialGradientBrush.GradientStops>
  33                 </RadialGradientBrush>
  34         </Ellipse.Fill>
  35     <Ellipse.Triggers>
  36         <EventTrigger RoutedEvent="Ellipse.Loaded">
  37            <BeginStoryboard>
  38                     <Storyboard>
  39                                 <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="color1" Storyboard.TargetProperty="Color" To="RoyalBlue" Duration="0:0:5" />
  40                             <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="color2" Storyboard.TargetProperty="Color" To="Yellow" Duration="0:0:5" />
  41                 </Storyboard>
  42            </BeginStoryboard>
  43         </EventTrigger>
  44     </Ellipse.Triggers>
  45     </Ellipse>
  46
  47     <Ellipse Width="50" Height="50" Canvas.Left="175" Canvas.Top="40" Fill="Orange" Stroke="White" StrokeThickness="5" RenderTransformOrigin="0.5, 3">
  48                                         <Ellipse.RenderTransform>
  49                                                 <TransformGroup>
  50                                                         <ScaleTransform ScaleX="1" ScaleY="1"/>
  51                                                         <SkewTransform AngleX="0" AngleY="0"/>
  52                                                         <RotateTransform x:Name="angle1" Angle="0"/>
  53                                                         <TranslateTransform X="0" Y="0"/>
  54                                                 </TransformGroup>
  55                                         </Ellipse.RenderTransform>
  56     <Ellipse.Triggers>
  57         <EventTrigger RoutedEvent="Ellipse.Loaded">
  58         <BeginStoryboard>
  59                 <Storyboard SpeedRatio="1.0">
  60                             <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="angle1" Storyboard.TargetProperty="Angle" To="360.0" Duration="0:0:5" />
  61       </Storyboard>
  62         </BeginStoryboard>
  63         </EventTrigger>
  64     </Ellipse.Triggers>
  65         </Ellipse>
  66
  67     <Ellipse Width="50" Height="50" Canvas.Left="175" Canvas.Top="40" Fill="LightGray" Stroke="White" StrokeThickness="5" RenderTransformOrigin="0.5, 3">
  68                                         <Ellipse.RenderTransform>
  69                                                 <TransformGroup>
  70                                                         <ScaleTransform ScaleX="1" ScaleY="1"/>
  71                                                         <SkewTransform AngleX="0" AngleY="0"/>
  72                                                         <RotateTransform Angle="180"/>
  73                                                         <RotateTransform x:Name="angle2" Angle="0"/>
  74                                                         <TranslateTransform X="0" Y="0"/>
  75                                                 </TransformGroup>
  76                                         </Ellipse.RenderTransform>
  77     <Ellipse.Triggers>
  78         <EventTrigger RoutedEvent="Ellipse.Loaded">
  79         <BeginStoryboard>
  80                 <Storyboard SpeedRatio="1.0">
  81                             <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="angle2" Storyboard.TargetProperty="Angle" To="360.0" Duration="0:0:5" />
  82       </Storyboard>
  83         </BeginStoryboard>
  84         </EventTrigger>
  85     </Ellipse.Triggers>
  86         </Ellipse>
  87 </Canvas>
  88 </script>
  89 </body>
  90 </html>
  91
  92