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;" 

您可能感兴趣的

Media playback controls and strange behaviour of t... Windows 10 WinRT API introduced ability to query whether a certain class, method, property etc were supported during run-time or not. This would allow...
How does ECSlidingViewController without storyboar... I want to use ECSlidingViewController in my iOS 4.3 applications. And I wonder how to apply this library without storyboard? PLZ, how to? this is my...
Built-in Oracle internal and external valid combin... Internal and external storage Android I have an app that accesses music and I had at least one user complain that some of his so...
【WPF】用三角形网格构建三维图形 虽然WPF只能支持部分三维模型,不过从应用功能开发的角度看,也已经够用了(非游戏开发)。WPF 的三维图形,说得简单一点,也就两种而已。 1、把二维对象放到三维空间中,这个应该较为好办,像 Image 控件,Shape 类型等,或者我们常用的一些控件,都可以放进三维空间中,用这种方式构建模...
Lifecycle of WPF application Application class is the most important class responsible for managing the application level functionality.The life cycle of WPF application is manage...
博客园精华区责编内容来自:博客园精华区 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » WPF 简易的喷泉效果



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

使用声明 | 英豪名录