如何编写Silverlight动画效果控件
作为开发人员我一直存在2个问题,相信很多人也有这样的问题:
1、 懒惰,为了实现一些Silverlight特殊效果要写烦乱的XAML语句,这太可怕了;
2、 因为不是设计人员,很难做出一些非常美观的界面
于是,我就写了EffectControls控件集,目的是用最短的时间和最短的代码实现很酷的控件效果。开放源码,欢迎您的使用和改进,如果有好玩的特效,请一定要通知我。
在线演示地址
源代码下载:
写一下我的设计思路吧,希望您能有更好的改进版本,请也给我一份哦
我的联系方式:
Name: 王昕
Mail: or
Mobile: 13710637136
首先:编写EffectControlHelper帮助类,这个类帮助我们创建各种效果:
View Code public class EffectControlHelper{ 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 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>
效果:
正常状态:
鼠标经过:
其他效果也是类似的,请看帮助文档。
源代码下载: