如何编写Silverlight动画效果控件
如何编写Silverlight动画效果控件
作为开发人员我一直存在2个问题，相信很多人也有这样的问题：
1、 懒惰，为了实现一些Silverlight特殊效果要写烦乱的XAML语句，这太可怕了；
2、 因为不是设计人员，很难做出一些非常美观的界面
于是，我就写了EffectControls控件集，目的是用最短的时间和最短的代码实现很酷的控件效果。开放源码，欢迎您的使用和改进，如果有好玩的特效，请一定要通知我。
在线演示地址
http://crmwin.com/EffectControlsTestPage.html
源代码下载：
Studio Address:
Blog address:
写一下我的设计思路吧，希望您能有更好的改进版本，请也给我一份哦
我的联系方式：
Name: 王昕
Mail: [email protected] or [email protected]
Mobile: 13710637136
首先：编写EffectControlHelper帮助类，这个类帮助我们创建各种效果：
View Code
{
public static void DropShadowEffect( object control, string EffectType, Color EffectColor,
double EffectRadius, double EffectDirection, double EffectOpacity, double EffectShadowDepth)
{
DropShadowEffect Effect = new DropShadowEffect();
Random r = new Random();
List < Color > colors = new List < Color > ();
colors.Add(Colors.Black);
colors.Add(Colors.Blue);
colors.Add(Colors.Brown);
colors.Add(Colors.Cyan);
colors.Add(Colors.DarkGray);
colors.Add(Colors.Gray);
colors.Add(Colors.Green);
colors.Add(Colors.LightGray);
colors.Add(Colors.Magenta);
colors.Add(Colors.Orange);
colors.Add(Colors.Purple);
colors.Add(Colors.Red);
colors.Add(Colors.White);
colors.Add(Colors.Yellow);
colors.Add(Colors.Blue);
colors.Add(Colors.Green);
colors.Add(Colors.Red);
colors.Add(Colors.Yellow);
Color RandomColor = colors[r.Next( 18 )];
if (EffectType == " DropShadowMovedEffect " )
{
Effect.Direction = r.Next( 180 );
Effect.Color = EffectColor;
}
else
{
Effect.Color = EffectColor;
}
if (EffectType == " RandomColor " )
{
Effect.Color = RandomColor;
}
Effect.Direction = EffectDirection;
Effect.BlurRadius = EffectRadius;
Effect.Opacity = EffectOpacity;
Effect.ShadowDepth = EffectShadowDepth;
(control as FrameworkElement).Effect = Effect;
}
public static void EffectMouseEnter( object control, string EffectType, double EffectRadius)
{
if (EffectType == " FadeEffect " )
{
Storyboard stb = StoryboardHelper.FadeOutFrameworkElement(control as FrameworkElement, . 5 , 0 );
if (stb != null )
{
stb.Begin();
}
}
if (EffectType == " BlurEffect " )
{
(control as FrameworkElement).Effect = new BlurEffect() { Radius = EffectRadius };
}
if (EffectType == " DropShadowEffect " )
{
(control as FrameworkElement).Effect = null ;
}
}
public static void EffectMouseLeave( object control, string EffectType)
{
if (EffectType == " FadeEffect " )
{
Storyboard fadeInRect = StoryboardHelper.FadeInFrameworkElement(control as FrameworkElement, . 2 , 0 );
if (fadeInRect != null )
{
fadeInRect.Begin();
}
}
if (EffectType == " JumpEffect " )
{
Storyboard stb1 = StoryboardHelper.JumpUpFrameworkElement(control as FrameworkElement, . 5 , 0 , (control as FrameworkElement).Height);
if (stb1 != null )
{
stb1.Begin();
}
}
if (EffectType == " JumpLeftEffect " )
{
Storyboard stb1 = StoryboardHelper.JumpLeftFrameworkElement(control as FrameworkElement, . 5 , 0 , (control as FrameworkElement).Height);
if (stb1 != null )
{
stb1.Begin();
}
}
(control as FrameworkElement).Effect = null ;
}
public static void LoadedEffect( object control, string EffectType)
{
if (EffectType == " UnderLineEffect " )
{
(control as Control).BorderThickness = new Thickness( 0 , 0 , 0 , 2 );
(control as Control).Effect = null ;
}
if (EffectType == " NoBorderLineEffect " )
{
(control as Control).BorderThickness = new Thickness( 0 , 0 , 0 , 0 );
(control as Control).BorderBrush = null ;
(control as Control).Effect = null ;
}
if (EffectType == " RotationX1Effect " )
{
PlaneProjection ppj = new PlaneProjection();
ppj.RotationX = - 45 ;
ppj.CenterOfRotationY = 0.1 ;
(control as Control).Projection = ppj;
}
if (EffectType == " RotationX2Effect " )
{
PlaneProjection ppj = new PlaneProjection();
ppj.RotationX = 45 ;
ppj.CenterOfRotationY = 0.1 ;
(control as Control).Projection = ppj;
}
if (EffectType == " RotationY1Effect " )
{
PlaneProjection ppj = new PlaneProjection();
ppj.RotationY = - 45 ;
ppj.CenterOfRotationX = 0.1 ;
(control as Control).Projection = ppj;
}
if (EffectType == " RotationY2Effect " )
{
PlaneProjection ppj = new PlaneProjection();
ppj.RotationY = 45 ;
ppj.CenterOfRotationX = 0.1 ;
(control as Control).Projection = ppj;
}
if (EffectType == " RotationZ1Effect " )
{
PlaneProjection ppj = new PlaneProjection();
ppj.RotationZ = - 5 ;
(control as Control).Projection = ppj;
}
if (EffectType == " RotationZ2Effect " )
{
PlaneProjection ppj = new PlaneProjection();
ppj.RotationZ = 5 ;
(control as Control).Projection = ppj;
}
}
}
其中有StoryboardHelper帮助类，是辅助动画生成的类
代码如下：
public class StoryboardHelper
{
public static Storyboard ProjectiontAction(Control Control, 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 = 30;
AnimationUp.To = 0;
// 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, Control);
// Set the property the animation is to affect
Storyboard.SetTargetProperty(AnimationUp, new PropertyPath(Control.ProjectionProperty));
// 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;
}
View Code
{
// 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>
效果：
正常状态：
鼠标经过：
其他效果也是类似的，请看帮助文档。
源代码下载：
Studio Address: