动画

IDE动画包括系统动画和自定义动画两种。

系统动画是系统预设的动画效果,如页面和画布属性中的动画效果,可以选择对象出现时的系统动画:无动画、从左进入、从右进入和缩放,某些控件的属性中也有是否开启动画选项,如仪表盘、进度条和数字等控件,用户可以勾选系统预设的动画模式。

IDE自定义动画是只针对于画布的动画,可以控制画布的位置和大小。根据用户输入的变换前参数、变换后参数以及动画持续时间,自动补全动画。

系统动画:

为方便客户使用,我们在IDE开发工具中添加了三套常用的动画,依次是从左进入、从右进入、缩放 1.如下添加一个画布,然后切换动画选择“缩放”,持续时间设为1000ms:

2.在画布中添加一个图层控件,在图层控件中插入一张图片

3.这样,该模板动画就完成了配置,点击“开始”》“运行”进行测试,该画布加载时其中的图层以缩放的形式呈现出来:

4.同理,从左进入和从右进入的动画效果可以自行尝试使用。

自定义动画:

实现自定义动画有两个步骤,首先配置动作参数,指示画布该怎样动;其次配置控制参数,指示画布动作时机。

普通动画模式下的动作参数包括以下:动画名称、动画序号、起始位置、起始大小(宽高比)、目标位置、目标大小(宽高比)、持续时间和时间曲线。此外用户可以选用高级动画模式,通过变量控制起始位置、大小和目标位置、大小。

对于宽度100,高度80的画布,如果设定其起始位置(0,0),起始大小比例(1,1),目标位置(200,200),目标大小比例(2,2)。那么当动画执行时会按照下图的形式来呈现过渡动画。

自定义动画的控制参数需要动作列表的指令集中的Animate命令来触发。Animate命令有两个操作数,分别为tag名X和动画序号Y。命令形式为“Animate X Y”。该指令实现的操作是触发与该tag绑定的页面中自定义的序号为Y的动画。

所以,要使得动画执行,第一是要绑定好Tag,其次是动画序号要正确填写。

自定义动画实例1: 在下面的工程中插入一个画布,在画布中添加一个图层控件并插入一张图片,让这张图片在第3秒放大2倍,第7秒缩小回原形。

那么我们可以这样去实现:

  1. 在变量中添加一个定时器并将该定时器做如下配置:

2.在变量中继续添加一个Tag,不需要填写寄存器号,如下:

3.在工程中添加一个画布,并在该画布中添加一个图层控件,然后在控件中插入一张图片:

4.回到画布将画布绑在变量a上:

5.将画布配置两个动画,一个是第3秒放大两倍,另一个是第7秒缩回原形(注意动画序号分别是1和2):

6.现在我们需要一个触发器去触发这两个动画,我们找到该画布下的NewSubCanvas然后添加两个触发器将触发器分别命名为放大和缩小:

对“放大”触发器作如下配置,先绑在第一个定时器上、高报警值设为3、动作中触发条件设置为进入高报警、变量绑a、值设为1(这里的值设为1为对应触发画布的第一个动画):

7.这样,该自定义动画就完成了配置,点击“开始”》“运行”进行测试:

自定义动画实例2:按比例平移和缩放 在下面的工程中插入一个画布,在画布中添加一个仪表盘,让此仪表盘从页面底部x=300,y=480处以1.2倍放大到x=250,y=100处(按比例平移和缩放)

那么我们可以这样去实现:

1.在变量中添加一个定时器并在NewPage页将该定时器做如下配置:

2.在变量中继续添加一个Tag,不需要填写寄存器号,如下:

3、在工程中添加一个画布,并在该画布中添加一个仪表盘控件(为展现仪表盘从页面底端向上平移放大的效果,需将画布宽高=仪表盘素材宽高),插入仪表盘的背景和指针素材:

4、回到画布将画布绑在变量a上;

5、将画布配置1个动画

6.现在我们需要一个触发器去触发这个动画,我们找到该画布下的NewSubCanvas然后添加1个触发器

对触发器作如下配置,先绑在定时器上、高报警值设为2、动作中触发条件设置为进入高报警、变量绑a、值设为1(这里的值设为1为对应触发画布的第一个动画):

7、这样,该自定义动画就完成了配置,点击“开始”》“运行”进行测试

results matching ""

    No results matching ""