如何编写Silverlight动画效果控件

如何编写Silverlight动画效果控件

作为开发人员我一直存在2个问题，相信很多人也有这样的问题：

1、 懒惰，为了实现一些Silverlight特殊效果要写烦乱的XAML语句，这太可怕了；

2、 因为不是设计人员，很难做出一些非常美观的界面

于是，我就写了EffectControls控件集，目的是用最短的时间和最短的代码实现很酷的控件效果。开放源码，欢迎您的使用和改进，如果有好玩的特效，请一定要通知我。

View Code public static Storyboard JumpUpFrameworkElement(FrameworkElement frameworkElement, Double duration, Double delay, double height)

{

// Create the animation

DoubleAnimation AnimationUp = new DoubleAnimation();

// Set the values that the animation starts and ends with

AnimationUp.From = 0;

AnimationUp.To = height;

if (height < 23)

{

AnimationUp.To = 23;

}

// Set the time the animation is to begin

AnimationUp.BeginTime = TimeSpan.FromSeconds(delay);

// Set the duration of the animation

AnimationUp.Duration = new Duration(TimeSpan.FromSeconds(duration));

// Set the target of the animation

Storyboard.SetTarget(AnimationUp, frameworkElement);

// Set the property the animation is to affect

Storyboard.SetTargetProperty(AnimationUp, new PropertyPath(FrameworkElement.HeightProperty));

// Create a new storyboard

Storyboard stb = new Storyboard();

// Add the animation to the storyboard

stb.Children.Add(AnimationUp);

// Set return variable to the new storyboard

return stb;

}

public static Storyboard JumpLeftFrameworkElement(FrameworkElement frameworkElement, Double duration, Double delay, double width)

{

// Create the animation

DoubleAnimation AnimationUp = new DoubleAnimation();

// Set the values that the animation starts and ends with

AnimationUp.From = 0;

AnimationUp.To = width;

if (width < 150)

{

AnimationUp.To = 150;

}

// Set the time the animation is to begin

AnimationUp.BeginTime = TimeSpan.FromSeconds(delay);

// Set the duration of the animation

AnimationUp.Duration = new Duration(TimeSpan.FromSeconds(duration));

// Set the target of the animation

Storyboard.SetTarget(AnimationUp, frameworkElement);

// Set the property the animation is to affect

Storyboard.SetTargetProperty(AnimationUp, new PropertyPath(FrameworkElement.WidthProperty));

// Create a new storyboard

Storyboard stb = new Storyboard();

// Add the animation to the storyboard

stb.Children.Add(AnimationUp);

// Set return variable to the new storyboard

return stb;

}

public static Storyboard ColorChange(Control control, Double duration, Double delay, Color from, Color to,string property)

{

System.Windows.Media.Animation.ColorAnimation Animation = new System.Windows.Media.Animation.ColorAnimation();

Animation.From = from;

Animation.To = to;

SolidColorBrush myAnimatedBrush = new SolidColorBrush();

myAnimatedBrush.Color = from;

if (property == "Background")

{

(control as Button).Background = myAnimatedBrush;

}

if (property == "Foreground")

{

(control as Button).Foreground = myAnimatedBrush;

}

//page.RegisterName("MyAnimatedBrush", myAnimatedBrush);

Storyboard.SetTargetName(Animation, "MyAnimatedBrush");

// Set the property the animation is to affect

Storyboard.SetTargetProperty(

Animation, new PropertyPath(SolidColorBrush.ColorProperty));

// Set the time the animation is to begin

Animation.BeginTime = TimeSpan.FromSeconds(delay);

// Set the duration of the animation

Animation.Duration = new Duration(TimeSpan.FromSeconds(duration));

// Set the target of the animation

Storyboard.SetTarget(Animation, control);

// Create a new storyboard

Storyboard stb = new Storyboard();

// Add the animation to the storyboard

stb.Children.Add(Animation);

// Set return variable to the new storyboard

return stb;

}

public static Storyboard FadeInFrameworkElement(FrameworkElement frameworkElement, Double duration, Double delay)

{

// Create the animation

DoubleAnimation Animation = new DoubleAnimation();

// Set the values that the animation starts and ends with

Animation.From = 0.3;

Animation.To = 1;

// Set the time the animation is to begin

Animation.BeginTime = TimeSpan.FromSeconds(delay);

// Set the duration of the animation

Animation.Duration = new Duration(TimeSpan.FromSeconds(duration));

// Set the target of the animation

Storyboard.SetTarget(Animation, frameworkElement);

// Set the property the animation is to affect

Storyboard.SetTargetProperty(Animation, new PropertyPath(FrameworkElement.OpacityProperty));

// Create a new storyboard

Storyboard stb = new Storyboard();

// Add the animation to the storyboard

stb.Children.Add(Animation);

// Set return variable to the new storyboard

return stb;

}

public static Storyboard FadeOutFrameworkElement(FrameworkElement frameworkElement, Double duration, Double delay)

{

// Create the animation

DoubleAnimation FadeOutAnimation = new DoubleAnimation();

// Set the values that the animation starts and ends with

FadeOutAnimation.From = 1;

FadeOutAnimation.To = 0.3;

// Set the time the animation is to begin

FadeOutAnimation.BeginTime = TimeSpan.FromSeconds(delay);

// Set the duration of the animation

FadeOutAnimation.Duration = new Duration(TimeSpan.FromSeconds(duration));

// Set the target of the animation

Storyboard.SetTarget(FadeOutAnimation, frameworkElement);

// Set the property the animation is to affect

Storyboard.SetTargetProperty(FadeOutAnimation, new PropertyPath(FrameworkElement.OpacityProperty));

// Create a new storyboard

Storyboard FadeInTBSB = new Storyboard();

// Add the animation to the storyboard

FadeInTBSB.Children.Add(FadeOutAnimation);

// Set return variable to the new storyboard

return FadeInTBSB;

} }

然后，定义扩展的控件，比如EffectButton，是从Button继承的

比如要在鼠标进入时增加效果。

我们可以这样写：

void Effect_MouseEnter(object sender, MouseEventArgs e)

{

EffectControlHelper.EffectMouseEnter(sender, EffectType, EffectRadius);

}

使用帮助

首先要在页面中加入引用：

例如：

xmlns:efcs="clr-namespace:EffectControls;assembly=EffectControlsLibrary"

DropShadowEffect

用于控件阴影的显示

使用方法：

例1：

<efcs:EffectButton EffectType="DropShadowEffect"

Content="DropShadowEffect" >

</efcs:EffectButton>

例2：

<efcs:EffectTextBox EffectType="DropShadowEffect" EffectColor="Red" EffectRadius="10" EffectDirection="30" EffectOpacity="0.6" EffectShadowDepth="5"

Text="CustomDropShadow" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="125" >

</efcs:EffectTextBox>

效果

正常状态：

BlurEffect

使用方法：

例1：

<efcs:EffectCheckBox EffectType="BlurEffect" EffectRadius="2"

Content="BlurEffect" >

</efcs:EffectCheckBox>

例2：

<efcs:EffectLabel EffectType="BlurEffect" EffectRadius="2"

Content="BlurEffect" >

</efcs:EffectLabel>

效果：

正常状态：



鼠标经过：



其他效果也是类似的，请看帮助文档。

源代码下载：

Open Source Web Address: http://EffectControls.codeplex.com/
Studio Address: http://www.CrmWin.com