WPF 简易的喷泉效果

这两天领导让我做个喷泉的效果,要把一个个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, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));

对比过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
{
    /// 
    /// 喷泉效果
    /// 
    /// 画布
    /// 展示集合
    /// 喷出点左
    /// 喷出点上
    /// 放大倍数
    /// 放大时间点
    /// 还原时间点
    public void FountainAnimation(List 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();="" double="" init="0;" org="1;" first_value="0;" for="" (int="" i="0;" 
博客园精华区稿源:博客园精华区 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » WPF 简易的喷泉效果

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录