Animation Spinner【项目】
https://github.com/vjpr/healthkick/blob/master/src/win/healthkick/ucSpinnerCogs.xaml
网上的例子，放在UserControl里
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 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" mc:Ignorable="d" x:Class="healthkick.ucSpinnerCogs" x:Name="UserControl" d:DesignWidth="640" d:DesignHeight="480"> <UserControl.Resources> <Storyboard x:Name="spinner" x:Key="spinner" RepeatBehavior="Forever" > <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bottomCog" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="15"/> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="195"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="344"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="topCog" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-180"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-359"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <UserControl.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource spinner}"/> </EventTrigger> </UserControl.Triggers> <Canvas x:Name="uc_SpinnerCogs" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24"> <Path x:Name="topCog" Data="M6.1820068,13.326002 C6.1820068,9.1240015 9.6010065,5.7050018 13.804008,5.7050018 C18.005007,5.7050018 21.425007,9.1240015 21.425007,13.326002 C21.425007,17.528002 18.005007,20.947002 13.804008,20.947002 C9.6010065,20.947002 6.1820068,17.528002 6.1820068,13.326002 z M26.226999,13.326 C26.226999,10.769 25.448999,8.3900003 24.118999,6.4120002 L27.768,2.7639999 L25.004,0 L21.455,3.549 C19.344999,1.8940001 16.688,0.90200001 13.804,0.90200001 C10.959,0.90200001 8.3380003,1.865 6.2420001,3.4779999 L2.7639999,0 L0,2.7639999 L3.553,6.316 C2.1830001,8.3129997 1.38,10.727 1.38,13.326 C1.38,16.209999 2.3710001,18.865999 4.026,20.978001 L0,25.004 L2.7639999,27.768 L6.8889999,23.642 C8.8669996,24.972 11.246,25.749001 13.804,25.749001 C16.402,25.749001 18.816,24.945999 20.813,23.576 L25.004,27.768 L27.768,25.004 L23.65,20.888 C25.264,18.791 26.226999,16.169001 26.226999,13.326 z" Fill="White" Stretch="Fill" Height="10" Width="10" UseLayoutRounding="False" Canvas.Left="2.5" Canvas.Top="2.5" RenderTransformOrigin="0.5,0.5"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> <Path x:Name="bottomCog" Data="M6.1820068,13.326002 C6.1820068,9.1240015 9.6010065,5.7050018 13.804008,5.7050018 C18.005007,5.7050018 21.425007,9.1240015 21.425007,13.326002 C21.425007,17.528002 18.005007,20.947002 13.804008,20.947002 C9.6010065,20.947002 6.1820068,17.528002 6.1820068,13.326002 z M26.226999,13.326 C26.226999,10.769 25.448999,8.3900003 24.118999,6.4120002 L27.768,2.7639999 L25.004,0 L21.455,3.549 C19.344999,1.8940001 16.688,0.90200001 13.804,0.90200001 C10.959,0.90200001 8.3380003,1.865 6.2420001,3.4779999 L2.7639999,0 L0,2.7639999 L3.553,6.316 C2.1830001,8.3129997 1.38,10.727 1.38,13.326 C1.38,16.209999 2.3710001,18.865999 4.026,20.978001 L0,25.004 L2.7639999,27.768 L6.8889999,23.642 C8.8669996,24.972 11.246,25.749001 13.804,25.749001 C16.402,25.749001 18.816,24.945999 20.813,23.576 L25.004,27.768 L27.768,25.004 L23.65,20.888 C25.264,18.791 26.226999,16.169001 26.226999,13.326 z" Fill="White" Stretch="Fill" Height="10" Width="10" UseLayoutRounding="False" Canvas.Left="11" Canvas.Top="10.25" RenderTransformOrigin="0.5,0.5"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="15"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> </Canvas></UserControl>
Castor project 放在 Windows里 <Window x:Class="Halliburton.Castor.Dialogs.LoadingSpinnerWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="LoadingSpinnerWindow" AllowsTransparency="True" Background="{x:Null}" Opacity="0.695" ResizeMode="NoResize" ShowInTaskbar="False" SizeToContent="WidthAndHeight" Topmost="True" WindowStartupLocation="CenterOwner" WindowStyle="None"> <Window.Resources> <Storyboard x:Key="loading" RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path1" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path2" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path3" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path4" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path5" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path6" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path7" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path8" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path9" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:02.2000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path10" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:02.2000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:02.4000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path11" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:02.4000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path12" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:02.8000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path13" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:02.8000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path14" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:03.2000000" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path15" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:03.2000000" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:03.4000000" Value="1" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource loading}" /> </EventTrigger> </Window.Triggers> <Grid Width="Auto" Height="Auto"> <Border MinWidth="150" MinHeight="56" Background="Black" CornerRadius="10,10,10,10"> <Grid Width="Auto" Height="Auto" Margin="10,10,10,10" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="30" /> </Grid.ColumnDefinitions> <Label Grid.ColumnSpan="1" Width="Auto" Height="Auto" Content="Generating Report..." FontFamily="/Swellsim7;component/Fonts/#Univers 57 Condensed" FontSize="18" FontWeight="Normal" Foreground="White" /> <Viewbox Grid.Column="1" Width="Auto" Height="Auto" HorizontalAlignment="Right" VerticalAlignment="Bottom"> <Canvas Width="117.094" Height="117.094"> <Path x:Name="path" Canvas.Left="87.34" Canvas.Top="55.6716" Width="29.7542" Height="5.75085" Data="F1 M 114.219,55.6716L 90.2154,55.6716C 88.6273,55.6716 87.34,56.959 87.34,58.5471L 87.34,58.5471C 87.34,60.1351 88.6273,61.4225 90.2154,61.4225L 114.219,61.4225C 115.807,61.4225 117.094,60.1351 117.094,58.5471L 117.094,58.5471C 117.094,56.959 115.807,55.6716 114.219,55.6716 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path8" Canvas.Left="0" Canvas.Top="55.6716" Width="29.7541" Height="5.75079" Data="F1 M 26.8787,55.6716L 2.87543,55.6716C 1.28735,55.6716 0,56.959 0,58.547L 0,58.547C 0,60.1351 1.28735,61.4224 2.87543,61.4224L 26.8787,61.4224C 28.4668,61.4224 29.7541,60.1351 29.7541,58.547L 29.7541,58.547C 29.7541,56.959 28.4668,55.6716 26.8787,55.6716 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path12" Canvas.Left="55.6717" Canvas.Top="0" Width="5.75079" Height="29.7542" Data="F1 M 55.6717,2.87537L 55.6717,26.8787C 55.6717,28.4668 56.959,29.7542 58.547,29.7542L 58.547,29.7542C 60.1351,29.7542 61.4225,28.4668 61.4225,26.8787L 61.4225,2.87537C 61.4225,1.28735 60.1351,0 58.547,0L 58.547,0C 56.959,0 55.6717,1.28735 55.6717,2.87537 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path4" Canvas.Left="55.6715" Canvas.Top="87.34" Width="5.75085" Height="29.7542" Data="F1 M 55.6715,90.2154L 55.6715,114.219C 55.6715,115.807 56.9589,117.094 58.547,117.094L 58.547,117.094C 60.135,117.094 61.4224,115.807 61.4224,114.219L 61.4224,90.2154C 61.4224,88.6273 60.135,87.34 58.547,87.34L 58.547,87.34C 56.9589,87.34 55.6715,88.6273 55.6715,90.2154 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path10" Canvas.Left="16.3058" Canvas.Top="16.3058" Width="22.7238" Height="22.7237" Data="F1 M 17.148,21.2144L 34.121,38.1873C 35.2439,39.3102 37.0645,39.3102 38.1874,38.1873L 38.1874,38.1873C 39.3103,37.0643 39.3103,35.2438 38.1874,34.1208L 21.2145,17.1479C 20.0916,16.025 18.271,16.025 17.148,17.1479L 17.148,17.1479C 16.0251,18.2709 16.0251,20.0914 17.148,21.2144 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path2" Canvas.Left="78.0645" Canvas.Top="78.0645" Width="22.7237" Height="22.7237" Data="F1 M 78.9066,82.9731L 95.8795,99.946C 97.0025,101.069 98.823,101.069 99.946,99.946L 99.946,99.946C 101.069,98.8231 101.069,97.0026 99.946,95.8796L 82.9731,78.9067C 81.8501,77.7838 80.0296,77.7838 78.9066,78.9067L 78.9066,78.9067C 77.7837,80.0297 77.7837,81.8502 78.9066,82.9731 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path6" Canvas.Left="16.3057" Canvas.Top="78.0643" Width="22.7237" Height="22.7238" Data="F1 M 21.2143,99.9459L 38.1872,82.9729C 39.3102,81.85 39.3102,80.0294 38.1872,78.9065L 38.1872,78.9065C 37.0643,77.7836 35.2437,77.7836 34.1208,78.9065L 17.1479,95.8794C 16.025,97.0023 16.025,98.8229 17.1479,99.9459L 17.1479,99.9459C 18.2708,101.069 20.0914,101.069 21.2143,99.9459 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path14" Canvas.Left="78.0645" Canvas.Top="16.3058" Width="22.7238" Height="22.7237" Data="F1 M 82.9731,38.1873L 99.946,21.2144C 101.069,20.0914 101.069,18.2709 99.946,17.1479L 99.946,17.1479C 98.8231,16.025 97.0025,16.025 95.8795,17.1479L 78.9066,34.1208C 77.7837,35.2438 77.7837,37.0643 78.9066,38.1873L 78.9066,38.1873C 80.0296,39.3102 81.8502,39.3102 82.9731,38.1873 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path5" Canvas.Left="34.7198" Canvas.Top="85.0109" Width="14.7855" Height="27.9911" Data="F1 M 40.2599,111.208L 49.2931,88.9691C 49.8908,87.4979 49.1825,85.8207 47.7112,85.223L 47.7112,85.223C 46.2399,84.6254 44.5627,85.3336 43.9651,86.8049L 34.9319,109.044C 34.3343,110.515 35.0425,112.192 36.5138,112.79L 36.5138,112.79C 37.9851,113.387 39.6623,112.679 40.2599,111.208 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path13" Canvas.Left="67.5885" Canvas.Top="4.09159" Width="14.7855" Height="27.9911" Data="F1 M 73.1288,30.2886L 82.1619,8.04987C 82.7596,6.57849 82.0513,4.90137 80.58,4.30371L 80.58,4.30371C 79.1087,3.70612 77.4315,4.41437 76.8339,5.88562L 67.8007,28.1244C 67.203,29.5957 67.9113,31.2729 69.3826,31.8705L 69.3826,31.8705C 70.8539,32.4681 72.5311,31.7599 73.1288,30.2886 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path3" Canvas.Left="68.1646" Canvas.Top="84.7702" Width="15.2221" Height="27.8086" Data="F1 M 83.1527,108.568L 73.6829,86.5119C 73.0563,85.0527 71.3655,84.3776 69.9063,85.0042L 69.9063,85.0042C 68.4471,85.6307 67.772,87.3215 68.3985,88.7808L 77.8684,110.837C 78.4949,112.296 80.1857,112.971 81.6449,112.345L 81.6449,112.345C 83.1042,111.718 83.7792,110.027 83.1527,108.568 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path11" Canvas.Left="33.7071" Canvas.Top="4.5146" Width="15.2221" Height="27.8086" Data="F1 M 48.6952,28.3126L 39.2254,6.25635C 38.5989,4.79712 36.9081,4.12207 35.4488,4.74854L 35.4488,4.74854C 33.9895,5.37506 33.3145,7.06592 33.9411,8.52515L 43.4109,30.5815C 44.0374,32.0407 45.7282,32.7158 47.1875,32.0892L 47.1875,32.0892C 48.6467,31.4627 49.3217,29.7719 48.6952,28.3126 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path1" Canvas.Left="84.9504" Canvas.Top="67.7362" Width="27.9452" Height="14.8975" Data="F1 M 111.115,77.099L 88.9221,67.9538C 87.4538,67.3488 85.7731,68.0485 85.168,69.5168L 85.168,69.5168C 84.563,70.9851 85.2627,72.6658 86.731,73.2709L 108.924,82.4161C 110.392,83.0211 112.073,82.3214 112.678,80.8531L 112.678,80.8531C 113.283,79.3848 112.583,77.7041 111.115,77.099 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path9" Canvas.Left="4.19792" Canvas.Top="34.4596" Width="27.9452" Height="14.8976" Data="F1 M 30.3625,43.8225L 8.16962,34.6772C 6.70135,34.0723 5.0206,34.772 4.41553,36.2403L 4.41553,36.2403C 3.81052,37.7086 4.51031,39.3893 5.97858,39.9943L 28.1714,49.1396C 29.6397,49.7446 31.3205,49.0449 31.9255,47.5765L 31.9255,47.5765C 32.5305,46.1083 31.8308,44.4276 30.3625,43.8225 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path15" Canvas.Left="85.0085" Canvas.Top="34.7093" Width="27.9893" Height="14.7899" Data="F1 M 109.039,34.9216L 86.802,43.9592C 85.3308,44.5572 84.6229,46.2345 85.2209,47.7057L 85.2209,47.7057C 85.8188,49.1769 87.4961,49.8848 88.9673,49.2869L 111.204,40.2493C 112.675,39.6514 113.383,37.974 112.785,36.5028L 112.785,36.5028C 112.187,35.0316 110.51,34.3237 109.039,34.9216 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> <Path x:Name="path7" Canvas.Left="4.09567" Canvas.Top="67.594" Width="27.9893" Height="14.79" Data="F1 M 28.1261,67.8064L 5.88922,76.8441C 4.41803,77.442 3.71008,79.1193 4.30804,80.5905L 4.30804,80.5905C 4.90594,82.0616 6.58325,82.7696 8.05444,82.1716L 30.2914,73.134C 31.7626,72.5361 32.4705,70.8588 31.8726,69.3876L 31.8726,69.3876C 31.2747,67.9164 29.5973,67.2085 28.1261,67.8064 Z " Fill="#FF07FF00" Opacity="0.015" Stretch="Fill" /> </Canvas> </Viewbox> </Grid> </Border> </Grid> </Window>
