Sliverlight之 特效

1，OpacityMask控件的部分渐隐(见Project16)

(1) 控件的OpacityMask有什么作用

说明：
设置所选区域不透明度的画笔,一般结合LinearGradientBrush或RadialGradientBrush使用
般用它来实现实现渐隐效果

将一个图片实现渐隐效果,需要在一个渐变点设置Color="Transparent"

<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="red" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop> 
</LinearGradientBrush>
</Image.OpacityMask>

 

另一种

<Image.OpacityMask>
<RadialGradientBrush Center="0.5,0.5">
<GradientStop Color="Red" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</RadialGradientBrush>
</Image.OpacityMask>

 

(2) OpacityMask是什么类型

说明：
OpacityMask是一个Brush类型

(3) 将一个TextBox实现一个渐隐效果

说明：

像TextBox可以直接用Background设置也能实现类似的渐隐效果，但像Image就没有Background设置了，通过OpacityMask就很方便

<TextBox Background="Gray">
<TextBox.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>

</LinearGradientBrush>

</TextBox.OpacityMask>
</TextBox>

 

 

2,两种效果Effect_模糊和投影（见Project17）

 

(1) Effect有哪两种效果

说明：
BlurEffect 模糊
DropShadowEffect 投影

(2)Effect是什么类型

说明：Effect就是Effect类型

 

(3)在一个TextBox中添加文字，并将其模糊（在中文帮助里查看BlurEffect怎么用）

说明：
通过Radius设置模糊程度

<TextBox.Effect>
<BlurEffect Radius="10"></BlurEffect>
</TextBox.Effect>

 

(4)BlurEffect的一个重要属性是什么，怎么使用

说明：
通过Radius设置模糊程度，一般值的范围是1－－100

(5)将一个Button添加一个投影效果(在中文帮助里查看DropShadowEffect怎么用)

说明：

<Button.Effect>
<DropShadowEffect Color="Red" Direction="225" ShadowDepth="7" BlurRadius="20" Opacity="20"></DropShadowEffect>
</Button.Effect>

 

(6)DropShadowEffect有哪几个重要属性，分别怎么使用

说明：
Color="Red" 设置投影的颜色
Direction="225" 投影的位置
ShadowDepth="7" 投影的距离
BlurRadius="20"　　投影的模糊程度
Opacity="20" 设置边缘的不透明度

 

3,六种变换(见Project18)

 

(1) 有哪六种变换

说明：

RotateTransform 按一定角度旋转
ScaleTransform 等比例缩放
SkewTransform 扭曲歪斜
TranslateTransform 位移
TransformGroup 复合变换
MatrixTransform 矩阵变换 

(2) RenderTransform是什么类型

说明：
RenderTransform是Transform类型
一般用作控件的属性，使控件发生变换

 

(3) 如何让一个按钮呈15度旋转(在中文帮助里查看RotateTransform怎么用)

说明：

<Button.RenderTransform>
<RotateTransform Angle="90" CenterX="60" CenterY="30"></RotateTransform> 
</Button.RenderTransform>

 

(4) RotateTransform有哪几个重要属性，分别怎么使用

说明：
RotateTransform使控件可以按一定角度旋转
Angel: 旋转角度，默认以左上角为旋转中心点.为正值则按顺时针方向旋转，为负值则按逆时针方向旋转
CenterX,CenterY 定义旋转的中心点

 

(5) 将一个TextBox持续不断的顺时针转动（用到定时器）

说明：

DispatcherTimer dt = new DispatcherTimer();
dt.Interval = TimeSpan.FromMilliseconds(200);
dt.Tick += dt_Tick;
dt.Start();

void dt_Tick(object sender, EventArgs e)
{
myRotate.Angle += 5;

}

 

(6) 将一张图片按照中心点位置，进行缩放
说明：
将图片等比例放大为原来的2倍

<Image.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="50" CenterY="50"></ScaleTransform>
</Image.RenderTransform>

 

(6) ScaleTransform，ScaleX和ScaleY的作用是什么，当为负值时有什么效果，它与CenterX,CenterY有什么关系(用示例演示说明)

说明：
ScaleTransform　等比例缩放
ScaleX和ScaleY 为控件在X和Y轴的缩放比例，值为原控件的缩放倍数.当为负值时，会先翻转例置再缩放
CenterX和CenterY为缩放的焦点

 

(7) 将一个视频倒影播放效果

说明：

<MediaElement.RenderTransform>
<ScaleTransform ScaleY="-1" CenterY="50"></ScaleTransform>
</MediaElement.RenderTransform>

 

(8) 如何让一个图片做成倾斜的效果(在中文帮助里查看SkewTransform怎么用)

说明：

<Image.RenderTransform>
<SkewTransform AngleX="0" AngleY="-30" CenterX="50" CenterY="50"></SkewTransform>
</Image.RenderTransform>

 

(9) SkewTransform有哪几个重要属性，分别怎么使用

说明：
SkewTransform使控件扭曲歪斜

AngleX:没X轴逆时针旋转
AngelY:沿Y轴顺时针旋转
CenterX和CenterY

(10) 如何将一个图片实现位移的效果(在中文帮助里查看TranslateTransform怎么用)

说明：

<Image.RenderTransform>
<TranslateTransform X="10" Y="30"></TranslateTransform>
</Image.RenderTransform>

 

(11) TranslateTransform有哪几个重要属性，怎么使用（如果为负值，有什么效果）

说明：
TranslateTransform　沿X和Y轴位移

X: 沿X轴位移，单位像素
Y: 沿Y轴位移，单位像素

注意：X和Y若为负值，则按相反方向位移

 

(12) 什么是复合变换，它用什么标签表示，用一个示例演示一下效果

说明：

复合变换使用标签TransformGroup，表示一个容器，可以将多种Transform效果放进去

<TextBlock.RenderTransform>
<TransformGroup>
<RotateTransform Angle="30"></RotateTransform>
<SkewTransform AngleX="20"></SkewTransform>
</TransformGroup>
</TextBlock.RenderTransform>

 

(13) 什么是3D投射效果，用什么标签表示

说明：

3D投射，可以使控件在三维空间旋转
用标签PlaneProjection实现
属性:RotationX,RotaionY,RotaionZ 分别以X轴,Y轴,Z轴旋转的角度，可以为负值

<Image.Projection>
<PlaneProjection RotationX="30" RotationY="60" RotationZ="60"></PlaneProjection>
</Image.Projection>

 

(14) 将一个图片实现3D翻转的效果(使用定时器修改RotationX)

说明：

前端：

<Image.Projection>
<PlaneProjection RotationX="0" RotationY="0" RotationZ="0" x:Name="myPlan"></PlaneProjection>
</Image.Projection>

 

代码:

DispatcherTimer dt = new DispatcherTimer();
dt.Interval = TimeSpan.FromMilliseconds(200);
dt.Tick += dt_Tick;
dt.Start();

void dt_Tick(object sender, EventArgs e)
{
myPlan.RotationY += 10;
myPlan.RotationX += 10;
myPlan.RotationZ += 10;
}

 

(15) 用MatrixTransform演示一下矩阵变换的效果

说明：
矩阵变换，有点复杂

<Rectangle.RenderTransform>
<MatrixTransform>
<MatrixTransform.Matrix >
<Matrix OffsetX="20" OffsetY="30" M12="0.3" />
</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>