根据业务要求,需要实现一个带有动画效果的显示统计效果图表,动画主要是控制图表控件的长度和宽度。开始的时候,图表控件是空的,没有数据,以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);
}