Silverlight开发历程—3DEffects实现3D特效

概述 3DEffects也称Perspective Transforms(透明变形)，实现UIElement 的三维效果主要对象是Projection 类，位于System.Window.Media.Projection命名空间下。 下面是一个利用3D特效制作一个三维效果的用户登录界面： XAML： <Grid x:Name="LayoutRoot" Background="White" >

 3DEffects也称Perspective transforms(透明变形)，实现UIElement 的三维效果主要对象是Projection 类，位于System.Window.Media.Projection命名空间下。

下面是一个利用3D特效制作一个三维效果的用户登录界面：

XAML：

 <GrID x:name="LayoutRoot" Background="White" >        <StackPanel WIDth="400"  Height="280" margin="150,50,150,116">            <!--投影特效-->            <StackPanel.Effect>                <DropShadowEffect BlurRadius="10" Direction="220" color="Black" Opacity="0.5" ShadowDepth="25">                </DropShadowEffect>            </StackPanel.Effect>            <!--3D 特效-->            <StackPanel.Projection>                <PlaneProjection  RotationZ="-10"  RotationX="-30" RotationY="-40" />            </StackPanel.Projection>            <!--渐变-->            <StackPanel.Background>                <linearGradIEntBrush>                    <GradIEntStop Offset="0" color="White" />                    <GradIEntStop Offset="1" color="Black" />                </linearGradIEntBrush>            </StackPanel.Background>            <!--内容-->            <TextBlock Text="Silverlight 3D Effects" FontSize="20" />            <TextBlock Text="Username:"  margin="10" />            <TextBox margin="10" WIDth="200" />            <TextBlock Text="PassWord:"  margin="10" />            <TextBox margin="10" WIDth="200" />            <button WIDth="100" Height="30" Content="Login"/>        </StackPanel>    </GrID>

运行结果：

 

Projectino 包括三个重要的属性，分别是 RotationX、RotationY、TotationZ，分别代表三维空间的X轴、Y轴、Z轴.

RotationX 属性指定围绕对象的水平轴旋转
RotationY 属性围绕旋转中心的 y 轴旋转。
RotationZ 属性围绕旋转中心的 z 轴（直接穿过对象平面的直线）旋转

下面分别从Projection的X轴、Y轴、Z轴不同视角来查看旋转视角的效果:

X 轴旋转：

GrID x:name="LayoutRoot" Background="White">        <Image Stretch="None"  Source="../images/jiqiren2.jpg">            <!--添加模糊效果-->            <Image.Effect>                <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" color="Black" />            </Image.Effect>            <Image.Projection>                <PlaneProjection RotationX="-60"  />            </Image.Projection>        </Image>    </GrID>

效果：

Y轴视角：

<GrID x:name="LayoutRoot" Background="White">        <Image Stretch="None"  Source="../images/jiqiren2.jpg">            <!--添加模糊效果-->            <Image.Effect>                <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" color="Black" />            </Image.Effect>            <Image.Projection>                <PlaneProjection RotationY="-60"  />            </Image.Projection>        </Image>    </GrID>

效果：

 

Z轴视角：

<GrID x:name="LayoutRoot" Background="White">        <Image Stretch="None"  Source="../images/jiqiren2.jpg">            <!--添加模糊效果-->            <Image.Effect>                <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" color="Black" />            </Image.Effect>            <Image.Projection>                <PlaneProjection RotationZ="45"  />            </Image.Projection>        </Image>    </GrID>

效果：

下面我们看一下 X轴、Y轴、Z轴的旋转轨迹：

@H_404_76@

Projection除了对X、Y、Z轴的值旋转之外，还允许调整Projection对Silverlight目标对象进行基于三维空间的定位。

LocalOffsetX 沿旋转对象X轴平定位一个对象。
LocalOffsetY 沿旋转对象 Y 轴平定位一个对象。
LocalOffsetZ 沿旋转对象Z 轴平定位一个对象。

GlobalOffsetX 沿屏幕对齐的 x 轴定位一个对象。
GlobalOffsetY 沿屏幕对齐的 y 轴定位一个对象。
GlobalOffsetZ 沿屏幕对齐的 z 轴定位一个对象。

下面为了更好的体会对象的X轴，Y轴，Z轴的旋转效果，我们做一个例子可以通过拖动进度条来更改X轴，Y轴，Z轴的值：

XAML:

     <GrID x:name="LayoutRoot">        <GrID.RowDeFinitions>            <RowDeFinition Height="*" />            <RowDeFinition Height="auto"/>            <RowDeFinition Height="auto"/>            <RowDeFinition Height="auto"/>        </GrID.RowDeFinitions>        <GrID.ColumnDeFinitions>            <ColumnDeFinition WIDth="*" />            <ColumnDeFinition WIDth="auto" />        </GrID.ColumnDeFinitions>        <GrID.Background>            <ImageBrush ImageSource="../images/wIDows7.jpg" />        </GrID.Background>        <!--3D 元素-->        <GrID WIDth="200" Height="160" Background="Green" >            <TextBlock Foreground="White" Text="windows Phone 7" GrID.Column="0" FontFamily="Arial" FontSize="22" margin="6,58,6,20">            </TextBlock>            <GrID.Effect>                <DropShadowEffect Direction="50" BlurRadius="60" color="Green" Opacity="0.8" />            </GrID.Effect>            <GrID.Projection>                <PlaneProjection  x:name="prots" />            </GrID.Projection>        </GrID>        <!--Silder 控件和元素之间的TwoWay 数据绑定用来设置Projection属性-->        <SlIDer Height="23" GrID.Column="0" GrID.Row="1" Maximum="180" Minimum="-180" Value="{Binding RotationX,Mode=TwoWay,Elementname=prots}" />        <SlIDer Height="23" GrID.Column="0" GrID.Row="2" Maximum="180" Minimum="-180" Value="{Binding RotationY,Elementname=prots}"/>        <SlIDer Height="23" GrID.Column="0" GrID.Row="3" Maximum="180" Minimum="-180" Value="{Binding RotationZ,Elementname=prots}"/>        <!--用TextBox显示 坐标-->        <TextBox  Height="23" WIDth="150" GrID.Column="1"  GrID.Row="1" margin="10" IsReadonly="True" Text="{Binding RotationX,Elementname=prots}"/>        <TextBox  Height="23" WIDth="150" GrID.Column="1"  GrID.Row="2" margin="10" IsReadonly="True" Text="{Binding RotationY,Elementname=prots}"/>        <TextBox  Height="23" WIDth="150" GrID.Column="1"  GrID.Row="3" margin="10" IsReadonly="True" Text="{Binding RotationZ,Elementname=prots}"/>    </GrID>

效果：

总结

以上是内存溢出为你收集整理的Silverlight开发历程—3DEffects实现3D特效全部内容，希望文章能够帮你解决Silverlight开发历程—3DEffects实现3D特效所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。