火山PC从零开始学炫彩UI  第九课

火山PC从零开始学炫彩UI  第九课

作者：灰羊羊
一、本文学习内容
    本文我们要做一个缓动效果，一个动画效果
    思路是：我们在素材里面有个这样子的图片。我们要用他创建一个基础元素作为容器使用，把它放在窗口的右边，平时处于隐藏的状态，如果我们需要的话，可以使他在这里。弹出来。弹出来的过程中要有动画。

 
二、界面设计UI流程
我们打开上节课的设计器项目
我们在资源里面可以发现这样的一张图片，他写的是右侧底图。我们看一下这张图它的尺寸为300×550。

我们把上节课放置的那个基础元素，把它的大小改一改，改成300×550。这里出了点问题，高度填错了。

右键打开它的背景管理器。

添加一个离开的状态。

我们这个时候要放置一个图片在空白的地方，铺满。同时选择背景图

好了，之后记得保存修改，关闭编辑器，看一下我们的组件。这样子我们就做好了一个容器。

我们把这个组件隐藏的方法很简单，就让他不显示。我们把它放在窗口外面，这就看不到了。需要的时候就让他弹出来。

此时我们需要再放着一个基础元素，放置的位置如图所示，我们放在右上角。这里主要的是做一个框，我们可以在里面放一些按钮，放一些图片等等。在这里显示头像，或者其他的。

我们在新放置的这个基础元素里面放一个设置按钮，此时注意看，我们放置的这个按钮，它的父组件是我们后放置的基础元素

我们进入按钮的背景编辑器，一键添加里面添加按钮三态。选择图片铺满。我们看到这里有三个关于齿轮的图片，我们就用这三个图片。后面我们看到这个图片的尺寸是30×30的。记得要将这个按钮改为30×30。

有文字，我们要在右边的文字属性里面把这个按钮的文字给去掉。同时修改尺寸


预览一下，感觉还不错，但是这个基础元素它有个边框。我们要把边框给它去掉。

我们给这个基础元素取个名字就叫顶边布局，然后给他的背景透明设置为真就好了，就不会有边框了。

设置按钮取名为  按钮_设置。

做完了这一切，我们已经有了两个基础元素布局，还有一个按钮，下面我们来做一个动态效果。
将这个项目保存，然后打包。下面就是我们用火山代码来写了。火山项目还是用我们原来的，从第四课开始创建的项目
在火山里面新建变量，新建一个按钮以及两个基础元素变量。

通过组件的名称获取在设计器里面的组件句柄。然后给我们的按钮注册一个按钮点击的事件。

在按钮点击事件里面，通过点击设置按钮，要让我们的组件从最右边弹出来。
在组件弹出的情况下，我们如果再点击按钮，就会让组件收回去，实现这两个功能。
我们的顶边布局他的左边是630，顶边0，宽为220，高度50。
我们的右边布局它的左边是851，顶边0，宽为300，高度550。
我们要让右边布局弹出的时候，就需要让顶边布局的左边变为630-300。右边布局的左边要变成851-300。顶边布局保持不变

下面开始写代码，首先要判断右边布局是否弹出。用简单的取位置的方法就能判断出来。如果取出来的要大于850，咱们设计的是851。那就证明他在隐藏，如果小于850，那说明已经弹出了。

在这里我们先写一个计次循环，循环30次。循环内写一个缓动函数，缓动函数可以实现一些动态效果的计算。我们来看一下参数。他有两个参数。一个是位置，一个是标识。
位置的数据类型是小数。接着往下面看，至于刚才的循环，我们等会儿再说。

这里我们的第二个参数是缓动类型，我们可以选择由快到慢或者由慢到快，再或者是由慢到快再到慢，三个类型，我们随便选择一个就可以了。
第一个参数位置类型为小数，这是什么意思呢？在这里我循环30次，我循环第一次的时候。第一个参数应该为0，到循环第15次的时候输入的数为0.5，到循环第30次的时候，我输入的参数要为1.0
这样子，他可以帮助您计算出一个非常合理的动态效果。
下图所示，我写的循环下面第一行代码，取循环索引（）+1，然后再整体除以30。循环的时候，第一个参数是以零为开始的，所以要加1
这样子第一次循环的时候就是1÷30，第二次循环的时候就是2÷30。第30次循环的时候就是30÷30，刚好符合上面的要求。这里要注意一下，我们需要强转数据类型，需要将两个数值都转为小数，然后再除以，不然的话有可能计算的时候出错误。

下图已经写好代码了，然后我们需要注意缓动这个函数，它的返回值是一个小数。这是一个什么意思呢？比如说第一次循环的时候，他可能给你返回一个0.1，第二次循环的时候给你返回一个0.15。第三次循环的时候。可能比你返回一个0.16，做到一个动态的效果，先快再慢或者先慢再快。这里取决于第二个参数。

这里我们分析一下，我们以顶边布局为例分析。顶边布局的左边为630，我们最终要把它给挪到630-300的位置。我们就要在这有限的30个循环中，将它一步一步从630挪到330。
下边这里我写了一个小小的算法，这里就要考验您的数学计算能力了。当一个整数操作一个小数的时候，整个数据类型都会被设置为小数。所以说最后需要整体转化为整数。

这里您看一下，我们使用了一个置位置的函数。他的第一个参数是x，就是左边。第二个参数是外顶边的意思，我们的顶边没有动，一直是保持着0。
第三个他写的是英文，这个意思是是否立刻重绘自己。如果设置为真的话，它会马上刷新自己。至于参数4和5保持默认即可，这里我们没有用到那个高级功能。

我们这里用同样的道理，把右边的布局从851给他移到851-300。因为程序计算的非常快，所以说我们需要让他有一个延时，这里延时5毫秒。很小的延时，能保证程序流畅。

到这里，我们的弹出就写好了。下面我们来写收回。和弹出一样的道理，对于顶边布局来说，我们只需要让他的左边从330变成630，这就回去了。
对于右边布局来说，我们只需要让他的左边从551变到851就可以了。
下面我们来调试，看一下效果。

最终效果

我们也可以换一个缓动函数来试试看。这里同时我把循环给改成50，就是为了让他时间长一点。动态的效果更好一点。这里我们用函数Bounce来试一下。

是不是感觉效果就不一样了

三、本文到此结束