• 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>
  • 相关阅读:
    2.操作系统基础
    6.Linux基础3
    DRAM 内存介绍(一)
    131127新的一天
    Java中的super关键字何时使用
    JAVA的引用类型变量(C/C++中叫指针)
    System.out.println()的含义
    Java面试题
    HTML基础知识
    子域名查找
  • 原文地址:https://www.cnblogs.com/huaci/p/4402330.html
Copyright © 2020-2023  润新知