逻辑判断

mugeda

在我们平台的初期，动画的复杂交互功能是通过加代码来实现的，这样可以保证动画的灵活性。但是对大部分设计师来说，添加代码是一件比较头大的事情，为了让不懂编程的设计师也可以自己实现动画的复杂交互功能，Mugeda增加了逻辑判断功能，因为编程中一个比较重要的部分就是逻辑判断。如果设计师熟练掌握了我们新添加的这一功能就可以不用写代码实现很多交互功能。

下面我们用一个演示动画来讲解逻辑判断的使用，如果你有过些许编程经验，这对你来说应该没什么难度，但是如果你是一位没有编程经验的设计师，可能需要你好好消化一段时间，并在自己的动画制作中仔细体会该功能的使用，熟练了就好了。

演示动画预览地址：

http://cn.mugeda.com/client/preview_css3.html?id=cf30092e

演示动画编辑地址：

http://cn.mugeda.com/animation/edit/cf30092e



在这个动画中，我做了14个页面，在他们上面分别放了一个按钮，并在上面设置了跳转并播放行为，触发事件都是点击，在以前的章节中，这样设置后，只要点击就会成功触发跳转并播放的行为，现在我们并不像让他们总是执行，而是当满足一定条件时才执行，所以给他们分别设置了不同的执行条件，比如第一页的按钮的行为的行为参数设置如图：



执行条件选择了检查元素状态（就是元素的属性），元素名称选obj1（也就是按钮自己）,属性选左，逻辑条件选大于， 参考值填1。这一组设置的意思是，只有当物体obj1的左（即left或x坐标值）值大于1（单位是像素）时，该行为才会被触发，也就是跳转到第三帧并播放。因为obj0的x坐标是83，所以条件满足，当运行动画是，我们点击一下按钮，动画会跳转到3帧并播放，在第四帧停止（为了演示需要我在第四帧放了一个暂停）。为了直观，在每一帧都放了一个显示所在帧号的文本，所以点击后的效果如图：



动画最后停在了第四帧。

第二页按钮行为参数的设置如图：



这一组设置的意思是：只有当按钮obj1的上值（top,或上边界的y坐标值）大于等于10，该行为才被触发，也就是跳转到第一帧并播放。实际情况是按钮的top值是326，因此行为会执行。在动画中，我们点击了0之后动画跳转到了第四帧，然后我们再点击1，发现动画没有跳转，依然停留在第四帧，这是符合我们预期的。

第3页按钮行为参数的设置如图：



这组设置的意思是，行为的执行条件时按钮的宽度小于10，而按钮的宽度为129，因此行为不执行，不会发生没有跳转。

第4页按钮行为参数的设置如图：



行为的执行条件是：按钮的高小于等于100，因为它的高是48，因此行为会执行。

第5页按钮行为参数的设置如图：



行为的执行条件是：按钮的透明度等于1，因为它的透明度就是1，因此行为会执行。

第6页按钮行为参数的设置如图：



行为的执行条件是：按钮的旋转角度不等于100，因为它的旋转角度是0，因此行为会执行。

第7页按钮行为参数的设置如图：



行为的执行条件是：名称为green的文本物体（就是那个绿颜色的文本）的文本值是abc，因为它的文本值就是abc，因此行为会执行。

上面1~7页演示的是检查元素状态选项下的7种不同属性和6种不同的逻辑条件。

接下来会再用8~14页来演示执行条件是逻辑表达式的情况。逻辑表达式有点类似于伪代码，可能会比检查元素状态更抽象一点，需要没有编程经验的设计师们好好领会一下。

第8页按钮行为参数的设置如图：



执行条件选择逻辑表达式，逻辑表达式{{obj1.left}}<100的意思是：行为的条件是：按钮的left值小于100，因为它的left值是83 ，因此行为会执行。

第9页按钮行为参数的设置如图：





{{red/number.text}}==88该表达式的意思是，行为的执行条件是：名字为red的元件实例内的名为number的文本的文本值为88。这个元件实例就是那个红色的物体。元件实例名字和元件内物体名字之间用“/”连接表示层级关系。执行条件时满足的。

第10页按钮行为参数的设置如图：



{{obj9.top}}>=50表示行为的执行条件是：按钮的y坐标值大于等于50，因为他的y坐标值是326 ，因此行为会执行

第11页按钮行为参数的设置如图：



{{obj1.width}}<60表示行为的执行条件是：按钮的宽大于60，因为它的宽是 129，因此行为会执行

第12页按钮行为参数的设置如图：



{{obj1.height}}<=100表示：行为的执行条件是：按钮的高小于等于100，因为它的高是 48，因此行为会执行

第13页按钮行为参数的设置如图：



{{obj1.alpha}}==1表示行为的执行条件是：按钮的透明度为1，因为它的透明度就是1，因此行为会执行

第14页按钮行为参数的设置如图：



{{obj1.rotate}}!=100表示行为的执行条件是：按钮的旋转角度不等于100，因为它的旋转角度是0，因此行为会执行。

以上部分已经分别讲述了逻辑判断的各种情况，但是逻辑判断是一种比较灵活的功能还需要设计师们慢慢领会了它的使用方式后，活学活用，结合自己的动画需求灵活运用。