博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何编写Silverlight动画效果控件
阅读量:4135 次
发布时间:2019-05-25

本文共 11467 字,大约阅读时间需要 38 分钟。

如何编写Silverlight动画效果控件

 

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

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

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

 

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

 

 

在线演示地址

 

源代码下载:

Open Source Web Address:
Studio Address:
Blog address:

 

写一下我的设计思路吧,希望您能有更好的改进版本,请也给我一份哦

我的联系方式:

Name:   王昕

Mail:  or

Mobile:  13710637136

 

首先:编写EffectControlHelper帮助类,这个类帮助我们创建各种效果:

 

ExpandedBlockStart.gif
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;

        }

ExpandedBlockStart.gif
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>

               

                   

 

 

 

效果

正常状态:

http://images.cnblogs.com/cnblogs_com/FreeForm/305772/r_image002.jpg

 

BlurEffect

使用方法:

1

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

                         Content="BlurEffect" >

                </efcs:EffectCheckBox>

 

 

2

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

                         Content="BlurEffect" >

                </efcs:EffectLabel>

 

效果:

正常状态:

http://images.cnblogs.com/cnblogs_com/FreeForm/305772/r_image003.jpg

鼠标经过:

 

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

 

源代码下载:

Open Source Web Address:
Studio Address:

转载地址:http://mtpvi.baihongyu.com/

你可能感兴趣的文章
20种在学习编程的同时也可以在线赚钱的方法
查看>>
隐藏搜索框:CSS 动画正反向序列
查看>>
12 个JavaScript 特性技巧你可能从未使用过
查看>>
127个超级实用的JavaScript 代码片段,你千万要收藏好(上)
查看>>
【视频教程】Javascript ES6 教程27—ES6 构建一个Promise
查看>>
【5分钟代码练习】01—导航栏鼠标悬停效果的实现
查看>>
127个超级实用的JavaScript 代码片段,你千万要收藏好(中)
查看>>
8种ES6中扩展运算符的用法
查看>>
【视频教程】Javascript ES6 教程28—ES6 Promise 实例应用
查看>>
127个超级实用的JavaScript 代码片段,你千万要收藏好(下)
查看>>
【web素材】03-24款后台管理系统网站模板
查看>>
Flex 布局教程:语法篇
查看>>
年薪50万+的90后程序员都经历了什么?
查看>>
2019年哪些外快收入可达到2万以上?
查看>>
【JavaScript 教程】标准库—Date 对象
查看>>
前阿里手淘前端负责人@winter:前端人如何保持竞争力?
查看>>
【JavaScript 教程】面向对象编程——实例对象与 new 命令
查看>>
我在网易做了6年前端,想给求职者4条建议
查看>>
SQL1015N The database is in an inconsistent state. SQLSTATE=55025
查看>>
RQP-DEF-0177
查看>>