WEB开发网
开发学院图形图像Flash Fun with Silverlight系列之一 -- 倒影效果 阅读

Fun with Silverlight系列之一 -- 倒影效果

 2008-10-11 11:42:00 来源:WEB开发网   
核心提示: 不过这种直截了当的倒影似乎并不符合我们的审美观,让我们再添加一些渐变效果让控件仿佛倒影在水中一般1<InkPresenter Canvas.Left="70" Canvas.Top="180" Name="inkMirror"

不过这种直截了当的倒影似乎并不符合我们的审美观,让我们再添加一些渐变效果让控件仿佛倒影在水中一般

1 <InkPresenter Canvas.Left="70" Canvas.Top="180" Name="inkMirror" Width="400" Height="100"
2
3RenderTransformOrigin="0.5,0.5">
4  <InkPresenter.RenderTransform>
5   <TransformGroup>
6    <ScaleTransform ScaleX="1" ScaleY="-1" />
7    <TranslateTransform Y="1" />
8   </TransformGroup>
9  </InkPresenter.RenderTransform>
10  <Rectangle Width="400" Height="100">
11   <Rectangle.OpacityMask>
12    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
13     <LinearGradientBrush.GradientStops>
14      <GradientStop Offset="1.0" Color="#66000000" />
15      <GradientStop Offset="0.0" Color="#00000000" />
16     </LinearGradientBrush.GradientStops>
17    </LinearGradientBrush>
18   </Rectangle.OpacityMask>
19   <Rectangle.Fill>
20    <ImageBrush ImageSource="inkbackground.jpg"/>
21   </Rectangle.Fill>
22  </Rectangle>
23  <TextBlock Name="writeHereMirror" Text="Write Here" FontSize="72" FontFamily="Comic Sans MS"
24
25Foreground="#80808080">
26   <TextBlock.OpacityMask>
27    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
28     <LinearGradientBrush.GradientStops>
29      <GradientStop Offset="1.0" Color="#FF000000" />
30      <GradientStop Offset="0.0" Color="#00000000" />
31     </LinearGradientBrush.GradientStops>
32    </LinearGradientBrush>
33   </TextBlock.OpacityMask>
34  </TextBlock>
35 </InkPresenter>

最终效果如下:

Fun with Silverlight系列之一 -- 倒影效果

最后控制两个图案同步的是在javascript里面,这里就不详说了,参考附件里的代码,

其实在silverlight里还可以做出更多令人惊叹的效果,应该不会逊于Flash和Flex里面的效果的,

希望大家能够一起挖掘silverlight里面的无限潜能哦

上一页  1 2 3 4 5 

Tags:Fun with Silverlight

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接