wpf 前端特效（1），地震波环形

文章引用来自博客园，仅供个人学习不对外开放

1. 动态环形效果RingControl封装代码

    public partial class RingControl : UserControl
    {
        /// <summary>
        /// 圆的颜色
        /// </summary>
        public Brush EllipseStroke { get; set; }
        /// <summary>
        /// 圆环的宽度
        /// </summary>
        public double EllipseStrokeThickness { get; set; }
        /// <summary>
        /// 圆的最小尺寸
        /// </summary>
        public double MinSize { get; set; }
        /// <summary>
        /// 圆的最大尺寸
        /// </summary>
        public double MaxSize { get; set; }
        /// <summary>
        /// 总圆环数量
        /// </summary>
        public int EllipseNum { get; set; }
        /// <summary>
        /// 不同圆之间的时间间隔
        /// </summary>
        public double EllipseInterval { get; set; }
        /// <summary>
        /// 动画启动等待时间
        /// </summary>
        private double StoryBeginTime { get; set; }
        /// <summary>
        /// 动画持续时间
        /// </summary>
        public double AnimationDuration { get; set; }
 
        public RingControl()
        {
            InitializeComponent();
        }
 
        private void MyUserControl_Loaded(object sender, RoutedEventArgs e)
        {
            Ellipse centerE = new Ellipse()
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                Width = MinSize,
                Height = MinSize,
                Stroke = EllipseStroke,
                StrokeThickness = EllipseStrokeThickness,
            };
            this.mainGrid.Children.Add(centerE);
            InitAnimation();
        }
 
        private void InitAnimation()
        {
            for (int i = 1; i <= EllipseNum; i++)
            {
                Storyboard story = new Storyboard()
                {
                    //是否循环
                    RepeatBehavior = RepeatBehavior.Forever,
                    //动画刷新速度
                    SpeedRatio = 2
                };
                //透明度调整动作
                DoubleAnimation myOpacityAnimation = new DoubleAnimation
                {
                    From = 1,
                    To = 0,
                    Duration = new Duration(TimeSpan.FromSeconds(AnimationDuration))
                };
                story.Children.Add(myOpacityAnimation);
                //宽度调整动作
                DoubleAnimation myWidthSizeChangeAnimation = new DoubleAnimation
                {
                    From = MinSize,
                    To = MaxSize,
                    Duration = new Duration(TimeSpan.FromSeconds(AnimationDuration))
                };
                story.Children.Add(myWidthSizeChangeAnimation);
                //高度调整动作
                DoubleAnimation myHeightSizeChangeAnimation = new DoubleAnimation
                {
                    From = MinSize,
                    To = MaxSize,
                    Duration = new Duration(TimeSpan.FromSeconds(AnimationDuration))
                };
                story.Children.Add(myHeightSizeChangeAnimation);
                //生成形状
                Ellipse tempE = new Ellipse()
                {
                    HorizontalAlignment = HorizontalAlignment.Center,
                    VerticalAlignment = VerticalAlignment.Center,
                    Width = MinSize,
                    Height = MinSize,
                    Stroke = EllipseStroke,
                    StrokeThickness = EllipseStrokeThickness,
                };
                //动画赋值
                Storyboard.SetTarget(myOpacityAnimation, tempE);
                Storyboard.SetTargetProperty(myOpacityAnimation, new PropertyPath(Ellipse.OpacityProperty));
                Storyboard.SetTarget(myWidthSizeChangeAnimation, tempE);
                Storyboard.SetTarget(myHeightSizeChangeAnimation, tempE);
                Storyboard.SetTargetProperty(myWidthSizeChangeAnimation, new PropertyPath(Ellipse.WidthProperty));
                Storyboard.SetTargetProperty(myHeightSizeChangeAnimation, new PropertyPath(Ellipse.HeightProperty));
 
                mainGrid.Children.Add(tempE);
                //时间间隔
                StoryBeginTime += EllipseInterval;
                story.BeginTime = TimeSpan.FromMilliseconds(StoryBeginTime);
                story.Begin();
            }
        }
    }

2. 主界面调用

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            RingControl redRing = new RingControl
            {
                MinSize = 25,
                MaxSize = 100,
                EllipseNum = 4,
                EllipseInterval = 800,
                AnimationDuration = 5,
                EllipseStroke = new SolidColorBrush(Colors.Red),
                EllipseStrokeThickness = 25,
                Margin = new Thickness(-150,-300,0,0),
            };
            this.mainGrid.Children.Add(redRing);
 
            RingControl blueRing = new RingControl
            {
                MinSize = 25,
                MaxSize = 100,
                EllipseNum = 4,
                EllipseInterval = 800,
                AnimationDuration = 5,
                EllipseStroke = new SolidColorBrush(Colors.Blue),
                EllipseStrokeThickness = 25,
                Margin = new Thickness(-200, 300, 0, 0),
            };
            this.mainGrid.Children.Add(blueRing);
 
            RingControl greenRing = new RingControl
            {
                MinSize = 25,
                MaxSize = 100,
                EllipseNum = 4,
                EllipseInterval = 800,
                AnimationDuration = 5,
                EllipseStroke = new SolidColorBrush(Colors.Green),
                EllipseStrokeThickness = 25,
                Margin = new Thickness(200, 20, 0, 0),
            };
            this.mainGrid.Children.Add(greenRing);
        }
    }