原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧

本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作的图来进行,教你如何将图做X、Y、Z空间的延伸。

?

本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作的图来进行,教你如何将图做X、Y、Z空间的延伸。

?

就是要让不会的新手都看的懂!

?

01 沿用上一章的青蛙图

我们沿用上一章的青蛙图,请把青蛙放在最左上角,好为我们等等的步骤做准备,让我们看出动作的差异性。

?

02 开始图的XYZ空间延伸

请在选取青蛙後我们点选右边Properties->Transform,我们可以看到Transform下有两个部分,分别是:

一、RenderTrasform

含有六项功能:

(1)Translate

(2)Rotate

(3)Scale

(4)Skew

(5)Center Point

(6)Flip

?

二、Projection

含有四项功能:

(1)Rotation

(2)Center of Rotation

(3)Global offset

(4)Local offset

列出了所有的项目以後,我们来一项一项解析它们的功能。

?

03 RenderTrasform

(1)Translate

点选Translate後,我们可以看到有X跟Y的两个数值可以调整。

试着把滑鼠移到修改数值的框框上,会出现一个四边都有箭头的小十字符号,出现小十字符号後你可以左右拖动改变数值;你想要更准确的数值,可以用键盘输入你要的数字。

好了,我们来试试看。

你会发现,X轴的数值如果是负的,图片会往左边移动,数值若是正的则会往右边移动。

这时你一定会想,Y轴的数值如果是负的,一定是往下移动,数值是正的则会往上移动,那可就错噜!

我们要以电脑的逻辑去思考,不能以数学的座标去推想,对电脑来说,最左上角为( 0 , 0 );所以往上对电脑来说Y是负的数值。

范例图片我设定的数值为( X , Y )=( 100 , -100 )

看,对电脑来说的Y : -100是不是就超出了白色的画布区域。

让我们回到最原来的位置,继续玩下一个功能!

?

(2)Rotate

点选Rotate後,我们可以看到一个球型以及Angle的数值设定。

你可以点击球型,旋转图形到你想要的位置。

或是使用正负值的数值设定,让我们以顺、逆时针观念去想,所以我们对Angle下60的值,你会看到下图:

负值,则反之。

回到最原来的位置,继续下一个功能。

?

(3)Scale

点击Scale後,会看到有X、Y值,都同样为1,此为比例的基本值。

若你把X值改为零,则会变为一条细长的直线,因为X的比例变为0,但Y的比例值是1。

我们试试把X变为1.5,会发现图形变宽了,反之,会变窄;更改Y的数值则会变长或变短。

回到最原来的位置,继续下一个功能。

?

(4)Skew

点击Skew,会看到有X、Y值,都同样为0。

我们改变X、Y值来设定我们的斜度,请试着玩玩看。

范例图片我设定的值为X、Y值,都同样为10。

回到最原来的位置,继续下一个功能。

?

(5)Center Point

点击Skew,会看到有X、Y值可设定。

Blend 4 内建9个Center Point(中心点),我们可以回到Translate设定。

由左上到右下的点,值分别是:

( 0 , 0 ) ( 0.5 , 0 ) ( 1 , 0 )

( 0 , 0.5 ) ( 0.5 , 0.5 ) ( 1 , 0.5 )

( 0 , 1 ) ( 0.5 , 1 ) ( 1 , 1 )

?

你可以直接改X、Y的数值,也可以直接到图片上面,找到像下图一样的小点,选择它拖动到你想要的中心点位置。

?

设定好中心点以後,我们试着旋转图片,你会发现,不同的中心点位置,旋转的效果会不一样。

范例图片我设定中心点为( 1 , 1 ),旋转图片以後,中心点( 1 , 1 )的点是锁住的,图型绕着它旋转。

回到最原来的位置,继续下一个功能。

?

(6)Flip

点击Flip後,有三个功能,分别是Flip X axis、Flip Y axis、Flip Z axis。

为了明显看出不同,请把青蛙的右眼球变色。

?

接着我们点选Flip X axis,你会发现眼球左右位子调换了,其实是整张图片左右的翻动了;Flip Y axis则是上下翻动。

Flip Z axis是针对3D物件做调整,我们的范例非3D物件,所以这个功能会被锁定,无法使用。

?

回到最原来的位置,继续下一个功能。

?

?

04 Projection

Projection主要是设定3D物件的数值,大家可以依照上面的方法,玩玩看。

?

05 对於Transform的介绍算是告一段落

到这边大家可能会觉得Transform里的功能实在是太简单了,我却要用这麽一篇教学去讲解里面的操作跟功能?

?

原因是,我必须要强调Transform这项功能的重要性,因为这项功能与我之後所要介绍的动画效果有着密不可分的关系。

Transform基本上是我们对物件做视觉上的改变,原来的图片数值其实是都没变的;若你是拖拉图片,是只更改到Layout部分,除非你转动图片,否则是不会去影响Transform数值的。

这部分可以从程式码的地方找到证明,在这边就不赘述了。

但如果你是使用Flash的方式来制作动画,你则是需要改变整张图的长相,做到动画的效果。

简单来说:『Transform只是对图片做特效套用』;而之後的所要教的动画效果,利用Transform就可以简单做到,是制作动画的其中一种功能。

?

本篇的教学就到此。

?

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

一步一步迈向HIE之路

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

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

 

零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步

    原文:零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步 如果需要经常的使用某一项工具,总会希望能够更快速的使用各项设定达到效果 今天要介绍 ...

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

    原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...

  3. 零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)

    原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下) 抱歉久等了!!!! 终於到了动画MenuBar ...

  4. 零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗?

    原文:零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗? ListBox里的排列不是垂直就是水平,觉得这样的排列很枯燥乏味吗? 想要它变聪明吗? ...

  5. 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画

    原文:零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形 ...

  6. 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)

    原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...

  7. 零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)

    原文:零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 一直以来都有人拿Flash的动画问我Blend ...

  8. 零元学Expression Blend 4 - Chapter 39 虾米?!同款?不同师傅!告诉你Visible、Hidden与Collapsed的差异!

    原文:零元学Expression Blend 4 - Chapter 39 虾米?!同款?不同师傅!告诉你Visible.Hidden与Collapsed的差异! 由此可知 Hidden为隐藏项目,但 ...

  9. 零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)

    原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字 ...

随机推荐

  1. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

  2. android应用开发 button显示两行文本

    自己写了个电话拨号器的程序给男朋友玩,用来专门打我的手机号,为了把界面做的好看一点,须要用到显示两行文本的button.在网上搜罗了两种方法,记录在以下.跟大家一起分享一下,希望能帮到须要的人. 方法 ...

  3. [Ramda] Sort, SortBy, SortWith in Ramda

    The difference between sort, sortBy, sortWith is that: 1. sort: take function as args. 2. sortBy: ta ...

  4. 微信上传素材 {"errcode":41005,"errmsg":"media data missing"} 解决方法和思路

    哎lol 连跪两把  就来写写博客    今天遇到一个问题 ,微信公众号开发上传素材是提示报错   41005    errcode":41005,"errmsg":&q ...

  5. Spring boot quartz的相关资源

    https://github.com/82253452/banner https://github.com/lvhao/schedule-job/tree/master/src/main/java/c ...

  6. Spring+SpringMVC+MyBatis+easyUI

    Spring+SpringMVC+MyBatis+easyUI 日常啰嗦 还好在第一篇文章里就列好了接下来的主线及要写的知识点,不然都不知道要写什么东西了,开篇里已经列了基础篇要讲svn和git的知识 ...

  7. 深度神经网络(DNN)

    深度神经网络(DNN) 深度神经网络(Deep Neural Networks, 以下简称DNN)是深度学习的基础,而要理解DNN,首先我们要理解DNN模型,下面我们就对DNN的模型与前向传播算法做一 ...

  8. 查看系统中安装了那些dotnet core 的SDK和运行时的命令

    原文:查看系统中安装了那些dotnet core 的SDK和运行时的命令 1.查看SDK dotnet --list-sdks 2.查看运行时 dotnet --list-runtimes 效果如下图 ...

  9. Method for browsing internet of things and apparatus using the same

    A method for browsing Internet of things (IoT) and an apparatus using the same are provided. In the ...

  10. PHP 挖掘 XML 和 HTML 数据

    数据挖掘及其重要性 常用缩略词 API: 应用程序编程接口 CDATA: 字符数据 DOM: 文档对象模式 FTP: 文件传输协议 HTML: 超文本标记语言 HTTP: 超文本传输协议 REST: ...