WPF 简易的喷泉效果 - 衆尋_H5之家 - 中国HTML5教程资源分享第一站

这两天领导让我做个喷泉的效果，要把一个个UserControl从一个位置喷出，然后，最后落在最终需要在的位置。

喷泉效果说白了，就是两个步骤：1、放大，从0放大到需要的倍数；2、缩小，平移，从放大的倍数还原到UserControl的原始大小，并且定位到最终的位置。

虽然，只有两步，但是，作为写动画的新手，还是有点费事的，所以，采用了先用Blend设计，然后再转换为C#代码的过程。

一、Blend设计单个UserControl的放大和移动效果

1、在Blend里，新建个项目，然后，在Grid下，放个Canvas，在Canvas下放个Image（先拿Image来设计）

2、在Blend左侧的时间线，选中image控件，然后点击上面的+号，会弹出新增动画资源的弹窗，点击确定。

3、根据需要，拖拽左侧的时间线（黄线）到对应位置，然后，对红框中的Image控件，进行放大、缩小、位置调整等操作。

4、XAML部分，产生了相应的代码

二、把XAML代码转换为C#

有了XAML代码，转换成C#代码，就方便多了，只要把对应的部分相关转换，然后启动动画，就OK了

TransformGroup部分转换为如下的方式

if (uc.RenderTransform as TransformGroup == null) { TransformGroup tg = new TransformGroup(); uc.RenderTransform = tg; tg.Children.Add(new ScaleTransform()); tg.Children.Add(new TranslateTransform()); }

由于，实际上只用到了ScaleTransform和TranslateTransform，所以，就只写了两个

DoubleAnimationUsingKeyFrames部分转换为如下的方式

EasingDoubleKeyFrame edf1 = new EasingDoubleKeyFrame(Init, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i + first_value))); EasingDoubleKeyFrame edf2 = new EasingDoubleKeyFrame(Mul, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i + middle_value))); EasingDoubleKeyFrame edf3 = new EasingDoubleKeyFrame(Org, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i + end_value))); DoubleAnimationUsingKeyFrames daukf1 = new DoubleAnimationUsingKeyFrames(); daukf1.KeyFrames.Add(edf1); daukf1.KeyFrames.Add(edf2); daukf1.KeyFrames.Add(edf3); storyboard.Children.Add(daukf1); Storyboard.SetTarget(daukf1, uc); Storyboard.SetTargetProperty(daukf1, ));

对比过XAML代码和C#代码以后，就发现，其实XAML转C#，还是没有那么困难的，就是把相应的位置进行相关的添加值，可以直接从XAML里复制过来，如(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)，谁能记得住呢，反正我记不住，太笨了。

写好了一个UserControl的效果以后，多个的实现起来，就容易了，无外乎就是for循环，设置参数而已。

定义一个UCShow的类，里面包含了UC和最后要定位的位置，如下，将需要展示的集合，都添加到一个List里就ok了。

public class UcShow { private UIElement uc; private double top; private double left; public UIElement Uc { get { return uc; } set { uc = value; } } public double Top { get { return top; } set { top = value; } } public double Left { get { return left; } set { left = value; } } }

效果如下：

喷泉效果的代码如下：

class Fountain { 喷泉效果 FountainAnimation(Canvas cav,List<UcShow> uclist, double pL = 0, double pT = 0, double Mul = 10, double middle_value = 0.5, double end_value = 1) { if (uclist.Count <= 0) { return; } Storyboard storyboard = new Storyboard(); double Init = 0; double Org = 1; double first_value = 0; for (int i = 0; i < uclist.Count; i++) { UIElement uc = uclist[i].Uc; double Top = uclist[i].Top; double Left = uclist[i].Left; Canvas.SetLeft(uc, pL); Canvas.SetTop(uc, pT); if (uc.RenderTransform as TransformGroup == null) { uc.RenderTransformOrigin = new Point(0.5, 0.5); TransformGroup tg = new TransformGroup(); uc.RenderTransform = tg; tg.Children.Add(new ScaleTransform()); tg.Children.Add(new TranslateTransform()); } double first = i * 0.05 + first_value; double middle = i * 0.05 + middle_value; double end = i * 0.05 + end_value; EasingDoubleKeyFrame edf0 = new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)));//所有元素起点都是0 EasingDoubleKeyFrame edf1 = new EasingDoubleKeyFrame(Init, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(first))); EasingDoubleKeyFrame edf2 = new EasingDoubleKeyFrame(Mul, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(middle))); EasingDoubleKeyFrame edf3 = new EasingDoubleKeyFrame(Org, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(end))); DoubleAnimationUsingKeyFrames daukf1 = new DoubleAnimationUsingKeyFrames(); daukf1.KeyFrames.Add(edf0); daukf1.KeyFrames.Add(edf1); daukf1.KeyFrames.Add(edf2); daukf1.KeyFrames.Add(edf3); storyboard.Children.Add(daukf1); Storyboard.SetTarget(daukf1, uc); Storyboard.SetTargetProperty(daukf1, )); DoubleAnimationUsingKeyFrames daukf2 = new DoubleAnimationUsingKeyFrames(); daukf2.KeyFrames.Add(edf0); daukf2.KeyFrames.Add(edf1); daukf2.KeyFrames.Add(edf2); daukf2.KeyFrames.Add(edf3); storyboard.Children.Add(daukf2); Storyboard.SetTarget(daukf2, uc); Storyboard.SetTargetProperty(daukf2, )); DoubleAnimationUsingKeyFrames daukf3 = new DoubleAnimationUsingKeyFrames(); EasingDoubleKeyFrame edf31 = new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(middle))); EasingDoubleKeyFrame edf32 = new EasingDoubleKeyFrame(Top, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(end))); daukf3.KeyFrames.Add(edf31); daukf3.KeyFrames.Add(edf32); storyboard.Children.Add(daukf3); Storyboard.SetTarget(daukf3, uc); Storyboard.SetTargetProperty(daukf3, )); DoubleAnimationUsingKeyFrames daukf4 = new DoubleAnimationUsingKeyFrames(); EasingDoubleKeyFrame edf41 = new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(middle))); EasingDoubleKeyFrame edf42 = new EasingDoubleKeyFrame(Left, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(end))); daukf4.KeyFrames.Add(edf41); daukf4.KeyFrames.Add(edf42); storyboard.Children.Add(daukf4); Storyboard.SetTarget(daukf4, uc); Storyboard.SetTargetProperty(daukf4, } storyboard.FillBehavior = FillBehavior.HoldEnd; storyboard.Begin(); } }