根据业务要求,需要实现一个带有动画效果的显示统计效果图表,动画主要是控制图表控件的长度和宽度。开始的时候,图表控件是空的,没有数据,以70*70像素在左下角,当点击显示图表按钮控件的时候,图表控件基于左下的坐标进行放大,先是长度在1.5秒之内增涨到400px,然后是高度在1秒之内增涨到250px。

在实现动画效果的过程中发现,如果图表控件的数据在动画开始之前就加载完成的话,那么当动画完成后,图表控件仍然显示的比例不正常,而放在动画完成之后再初始化控件,就看不出图表控件的缩放效果。所以在实现的时候,先是初始化了一个图表控件,而没有加载数据,那么这个图表控件无论被缩小还是放大,都不会产生比例不一致的情况,又能看到没有数据的图表控件的动画效果。

代码实现如下:

private void imageTarget1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {

            if (!isShow)//是否已经放大
            {
                Storyboard Storyboard1 = new Storyboard();

                DoubleAnimation da = new DoubleAnimation();
                da.Duration = new Duration(TimeSpan.FromSeconds(1.5));
                DoubleAnimation da1 = new DoubleAnimation();
                da1.Duration = new Duration(TimeSpan.FromSeconds(0.5));
                Storyboard1.Children.Add(da);
                Storyboard1.Children.Add(da1);
                Storyboard.SetTarget(da, nt);
                Storyboard.SetTarget(da1, nt);
                Storyboard.SetTargetProperty(da, new PropertyPath("(width)"));//修改图表控件的宽度
                Storyboard.SetTargetProperty(da1, new PropertyPath("(height)"));//修改图表控件的高度
                da.To = 500;
                da1.To = 300;
                Storyboard1.Begin();//动画开始
                Storyboard1.Completed += new EventHandler(Storyboard1_Completed);//动画结束事件

                isShow = true;
            }
            else
            {
                this.showNetbarStat.Children.ElementAt(0).Visibility = Visibility.Visible;
                Storyboard Storyboard1 = new Storyboard();

                DoubleAnimation da = new DoubleAnimation();
                da.Duration = new Duration(TimeSpan.FromSeconds(1.5));
                DoubleAnimation da1 = new DoubleAnimation();
                da1.Duration = new Duration(TimeSpan.FromSeconds(0.5));
                Storyboard1.Children.Add(da);
                Storyboard1.Children.Add(da1);
                Storyboard.SetTarget(da, nt);
                Storyboard.SetTarget(da1, nt);
                Storyboard.SetTargetProperty(da, new PropertyPath("(width)"));
                Storyboard.SetTargetProperty(da1, new PropertyPath("(height)"));
                da.To = 50;
                da1.To = 30;
                this.showNetbarStat.Children.RemoveAt(1);
                Storyboard1.Begin();
                isShow = false;
            }
        }
        /// <summary>
        /// 动画运行完成后重新显示图表控件并加载数据
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void Storyboard1_Completed(object sender, EventArgs e)
        {
            NetbarStat ns = new NetbarStat();
            ns.chart_Loaded();
            this.showNetbarStat.Children.ElementAt(0).Visibility = Visibility.Collapsed;
            this.showNetbarStat.Children.Add(ns);
        }