WPF实现的加载动画

2020-09-03 09:43:30

xaml代码

     <Grid x:Name="LayoutRoot" Background="Transparent"
        ToolTip="Searching...."
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
            <Canvas RenderTransformOrigin="0.5,0.5"
            HorizontalAlignment="Center"
            VerticalAlignment="Center" Width="120"
            Height="120" Loaded="HandleLoaded"
            Unloaded="HandleUnloaded"  >
                <Ellipse x:Name="C0" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="1.0"/>
                <Ellipse x:Name="C1" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.9"/>
                <Ellipse x:Name="C2" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.8"/>
                <Ellipse x:Name="C3" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.7"/>
                <Ellipse x:Name="C4" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.6"/>
                <Ellipse x:Name="C5" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.5"/>
                <Ellipse x:Name="C6" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.4"/>
                <Ellipse x:Name="C7" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.3"/>
                <Ellipse x:Name="C8" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.2"/>
                <Canvas.RenderTransform>
                    <RotateTransform x:Name="SpinnerRotate"
                    Angle="0" />
                </Canvas.RenderTransform>
            </Canvas>
        </Grid>

　　后台代码

 public partial class UserControlLoad : UserControl
    {
        public UserControlLoad()
        {
            InitializeComponent();
            animationTimer = new DispatcherTimer(
DispatcherPriority.ContextIdle, Dispatcher);
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 75);
            Start();
        }
        private readonly DispatcherTimer animationTimer;
        #region Private Methods
        public void Start()
        {
            Mouse.OverrideCursor = Cursors.Wait;
            animationTimer.Tick += HandleAnimationTick;
            animationTimer.Start();
        }

        private void Stop()
        {
            animationTimer.Stop();
            Mouse.OverrideCursor = Cursors.Arrow;
            animationTimer.Tick -= HandleAnimationTick;
        }

        private void HandleAnimationTick(object sender, EventArgs e)
        {
            SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
        }

        private void HandleLoaded(object sender, RoutedEventArgs e)
        {
            const double offset = Math.PI;
            const double step = Math.PI * 2 / 10.0;

            SetPosition(C0, offset, 0.0, step);
            SetPosition(C1, offset, 1.0, step);
            SetPosition(C2, offset, 2.0, step);
            SetPosition(C3, offset, 3.0, step);
            SetPosition(C4, offset, 4.0, step);
            SetPosition(C5, offset, 5.0, step);
            SetPosition(C6, offset, 6.0, step);
            SetPosition(C7, offset, 7.0, step);
            SetPosition(C8, offset, 8.0, step);
        }

        private void SetPosition(Ellipse ellipse, double offset,
            double posOffSet, double step)
        {
            ellipse.SetValue(Canvas.LeftProperty, 50.0
                + Math.Sin(offset + posOffSet * step) * 50.0);

            ellipse.SetValue(Canvas.TopProperty, 50
                + Math.Cos(offset + posOffSet * step) * 50.0);
        }

        private void HandleUnloaded(object sender, RoutedEventArgs e)
        {
            Stop();
        }

        private void HandleVisibleChanged(object sender,
            DependencyPropertyChangedEventArgs e)
        {
            bool isVisible = (bool)e.NewValue;

            if (isVisible)
                Start();
            else
                Stop();
        }
        #endregion
    }