零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果

有网友问我如何在Blend内制作出倒影效果

我提供了一个很简单的作法,解决了他的问题,在这里也跟大家分享 : )


我们运用StackPanel配合OpacityMask做出倒影效果

?

有网友问我如何在Blend内制作出倒影效果

我提供了一个很简单的作法,解决了他的问题,在这里也跟大家分享 : )

?

我们运用StackPanel配合OpacityMask做出倒影效果

先来看看最後结果:

?

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

Step1. 先置入一张图片

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

Step2. 把图片包进StackPanel里,在图片上单击右键Group Into-> StackPanel

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

Step3. 把StackPanel的高度设定为图片高度的两倍

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

Step4. 再置入一个一模一样的图片後,运用Transform->Flip Y axis 翻转图片

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

如下图

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

Step5. 接着要做出渐层效果,Brush->Gradient brush

????????? Gradient Stop:0%、Alpha:0%

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

Step6. 把滑鼠移到图片边缘,等待一下下,就会出现如下图的图案

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

接着按住滑鼠,把图片的下缘往左上拉

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

完成!

零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果...

?

?

很简单吧~

?

希望能提供给需要帮助的人。

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您