Don't make me think

Why does user experience matter to you?
随笔 - 13, 评论 - 113, 引用 - 0

导航

关于

This blog is for Entertainment ONLY! Any information in this blog has nothing to do with Microsoft and other companies. Any information is subject to change without notice. 本Blog纯属个人娱乐消遣，所有内容与Microsoft或者其他公司无关，所有内容均非官方并随时可能变化。

每月存档

最新留言

广告
 
WPF/E - 使用 Transforms 和 Opacity Masks 创建 Reflection 反射效果

 

反射效果(又称"Wet table湿桌子"效果,Reflections) 看起来很优雅;  可以用来展示深度效果。例如，反射效果可以将白色平面背景变成平滑而有光泽的白色镜面。这里，我将带你看看如何用 ScaleTransform 和 opacity mask 在 WPF/E 中创建反射效果。

你将在以下图片的基础上创建反射效果。

An image of a gear, all by itself.

完成后的效果如下所示。

It's that same gear again, but now it has an awesome reflection.

  1. 下载这个zip文件并打开它: reflection_examples.zip。 找到 reflection_examples\reflection_example 子目录。它包含4个文件: aghost.js, gear_large.png, reflection.html, and reflection.xaml。（若是不清楚这几个文件的更能，请参考WPF/E SDK帮助文档）

  2. 打开 reflection.xaml， 找到这段.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
    </Canvas>

    在浏览器中打开 reflection.html 来运行这个例子。应该看到如下输出。

    A gear, without a reflection.

  3. 创建一个复制的图片来用作反射效果.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
      <!-- The reflection. -->
      <    Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </    Image>
    </Canvas>

  4. 反转这个反射图，让它上下颠倒，创建 ScaleTransform 并设置 ScaleY 属性为 -1.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
      <!-- The reflection. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
        <Image.RenderTransform>
          <    ScaleTransform ScaleY="-1" />
        </    Image.RenderTransform>
      </Image>
    </Canvas>

    运行这个例子，注意这个反转的图片几乎在Canvas外面了.

    The second gear is almost totally flipped out of the canvas. You need to move it down.

  5. 将这个反转图片移动到原始图片的下方。 最直接的方法是调整第二个图片的 Canvas.Top 属性.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
    <!-- The reflection. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="258">
        <Image.RenderTransform>
          <ScaleTransform ScaleY="-1" />
        </Image.RenderTransform>
      </Image>
    </Canvas>

    现在这段XAML的输出如下.

    A gear with a simple reflection.

  6. 现在做一些处理，用 opacity mask 做出反射图片的淡出效果.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
      <!-- The reflection. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="258">
        <Image.RenderTransform>
          <ScaleTransform ScaleY="-1" />
        </Image.RenderTransform>
        <Image.OpacityMask>
          <    LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
            <    GradientStop Offset="0.0" Color="#00000000" />
            <    GradientStop Offset="1.0" Color="#FF000000" />
          </    LinearGradientBrush>
        </    Image.OpacityMask>
      </Image>
    </Canvas>

    输出如下, 第二个图片现在淡出到背景色.

    The second gear now fades into the background.

  7. 给反射效果加些扭曲变形， 更改 ScaleTransform 中 ScaleY 的值，从 -1 改到 -0.75.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
      <!-- The reflection. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="258">
        <Image.RenderTransform>
          <ScaleTransform ScaleY="-0.75" />
        </Image.RenderTransform>
        <Image.OpacityMask>
          <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
            <GradientStop Offset="0.0" Color="#00000000" />
            <GradientStop Offset="1.0" Color="#FF000000" />
          </LinearGradientBrush>
        </Image.OpacityMask>
      </Image>
    </Canvas>

    现在输出如下，注意反射图像的位置需要调整.

    Now the second gear is distorted, but it's too far away from the first gear.

  8. 移动反射图像的位置.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
      <!-- The reflection. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="228">
        <Image.RenderTransform>
          <ScaleTransform ScaleY="-0.75" />
        </Image.RenderTransform>
        <Image.OpacityMask>
          <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
            <GradientStop Offset="0.0" Color="#00000000" />
            <GradientStop Offset="1.0" Color="#FF000000" />
          </LinearGradientBrush>
        </Image.OpacityMask>
      </Image>
    </Canvas>

    输出如下，反射图像来到正确的位置上.

    The gear, with a suitably distorted reflection.

  9. 最后可以做点修饰，更改 opacity 至 0.75，让它的淡出效果更强烈些.

    XAML (reflection.xaml)

    <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <!-- The object to reflect. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="20">
      </Image>
      <!-- The reflection. -->
      <Image Source="gear_large.png"
    Canvas.Left="75" Canvas.Top="228"
    Opacity="0.75">
        <Image.RenderTransform>
          <ScaleTransform ScaleY="-0.75" />
        </Image.RenderTransform>
        <Image.OpacityMask>
          <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
            <GradientStop Offset="0.0" Color="#00000000" />
            <GradientStop Offset="1.0" Color="#FF000000" />
          </LinearGradientBrush>
        </Image.OpacityMask>
      </Image>
    </Canvas>

    完成.

    The gear, with a reflection.

-m jacobs  

原文见：http://blogs.msdn.com/wpfedevcon/archive/2007/01/0...

打印 | 张贴于 2007-01-07 10:30:00 | Tag:暂无标签

 

留言反馈

#回复: WPF/E - 使用 Transforms 和 Opacity Masks 创建 Reflection 反射效果 编辑
dfdfsh
http://asiatiche-porca.gradis-omt.info
http://divx-filmato-interi-scaricare.mantova-zmx.info
http://tettona-www-giuliacam-com.ivana-omt.info
http://filmati-gratis-sotto-la-gonna.mantova-zmx.info
dsfghdsfh
2007-08-31 09:42:00 | [匿名:dfhdfh]
#回复: WPF/E - 使用 Transforms 和 Opacity Masks 创建 Reflection 反射效果 编辑
@eee
你以为谁都跟你一样看不出这是毫无意义的包装再在重复劳动？这些效果难道flash做不出来吗？
2007-01-09 18:46:00 | [匿名:neoragex2002]
#回复: WPF/E - 使用 Transforms 和 Opacity Masks 创建 Reflection 反射效果 编辑
@neoragex2002:
你以为wpf/e是用来做3D游戏的吗。wpf/e不过是提供一个跨浏览器的富客户端罢了。
Flash可以体积阴影和凹凸贴图吗？
2007-01-08 19:15:00 | [匿名:eee]
#回复: WPF/E - 使用 Transforms 和 Opacity Masks 创建 Reflection 反射效果 编辑
really simple idea. 能拿WPF/E做体积阴影和凹凸贴图么？
2007-01-07 19:00:00 | [匿名:neoragex2002]
对不起，目前本随笔不允许发表新评论.

Powered by: Joycode.MVC引擎 0.5.2.0

Copyright © Don't make me think