Sliverlight之　特效

时间：2023-01-22 10:28:28

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

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

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

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

<Image.OpacityMask>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="red" Offset=""></GradientStop>

<GradientStop Color="Transparent" Offset=""></GradientStop>

</LinearGradientBrush>

</Image.OpacityMask>

另一种

<Image.OpacityMask>

<RadialGradientBrush Center="0.5,0.5">

<GradientStop Color="Red" Offset=""></GradientStop>

<GradientStop Color="Transparent" Offset=""></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=""></GradientStop>

<GradientStop Color="Transparent" Offset=""></GradientStop>

</LinearGradientBrush>

</TextBox.OpacityMask>

</TextBox>

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

(1) Effect有哪两种效果

说明：
BlurEffect 模糊
DropShadowEffect 投影

(2)Effect是什么类型

说明：Effect就是Effect类型

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

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

<TextBox.Effect>

<BlurEffect Radius=""></BlurEffect>

</TextBox.Effect>

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

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

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

说明：

<Button.Effect>

<DropShadowEffect Color="Red" Direction="" ShadowDepth="" BlurRadius="" Opacity=""></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="" CenterX="" CenterY=""></RotateTransform>

</Button.RenderTransform>

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

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

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

说明：

DispatcherTimer dt = new DispatcherTimer();

dt.Interval = TimeSpan.FromMilliseconds();

dt.Tick += dt_Tick;

dt.Start();

void dt_Tick(object sender, EventArgs e)

{

myRotate.Angle += ;

}

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

<Image.RenderTransform>

<ScaleTransform ScaleX="" ScaleY="" CenterX="" CenterY=""></ScaleTransform>

</Image.RenderTransform>

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

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

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

说明：

<MediaElement.RenderTransform>

<ScaleTransform ScaleY="-1" CenterY=""></ScaleTransform>

</MediaElement.RenderTransform>

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

说明：

<Image.RenderTransform>

<SkewTransform AngleX="" AngleY="-30" CenterX="" CenterY=""></SkewTransform>

</Image.RenderTransform>

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

说明：
SkewTransform使控件扭曲歪斜

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

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

说明：

<Image.RenderTransform>

<TranslateTransform X="" Y=""></TranslateTransform>

</Image.RenderTransform>

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

说明：
TranslateTransform　沿X和Y轴位移

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

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

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

说明：

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

<TextBlock.RenderTransform>

<TransformGroup>

<RotateTransform Angle=""></RotateTransform>

<SkewTransform AngleX=""></SkewTransform>

</TransformGroup>

</TextBlock.RenderTransform>

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

说明：

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

<Image.Projection>

<PlaneProjection RotationX="" RotationY="" RotationZ=""></PlaneProjection>

</Image.Projection>

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

说明：

前端：

<Image.Projection>

<PlaneProjection RotationX="" RotationY="" RotationZ="" x:Name="myPlan"></PlaneProjection>

</Image.Projection>

代码:

DispatcherTimer dt = new DispatcherTimer();

dt.Interval = TimeSpan.FromMilliseconds();

dt.Tick += dt_Tick;

dt.Start();

void dt_Tick(object sender, EventArgs e)

{

myPlan.RotationY += ;

myPlan.RotationX += ;

myPlan.RotationZ += ;

}

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

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

<Rectangle.RenderTransform>

<MatrixTransform>

<MatrixTransform.Matrix >

<Matrix OffsetX="" OffsetY="" M12="0.3" />

</MatrixTransform.Matrix>

</MatrixTransform>

</Rectangle.RenderTransform>

相关文章