Animations and Move Action Boundaries

动画和移动动作边界

1、Animations

动画

You can animate certain actions to give them a visual effect as they occur in the web browser, such as hiding a widget with a fading animation or moving a widget with a bouncing animation.

当它们在web浏览器中发生时，您可以动画某些操作以使它们具有视觉效果，例如隐藏带有淡入动画的小部件或移动带有跳动动画的小部件。

There are two parts to every animation: its effect and its timing. The animation's effect, which you select in the Animate dropdown, determines the visual effect of the animation. The animation's timing, which you enter in the ms field, determines the time in milliseconds that it will take for the animation to be completed.

每个动画有两个部分:它的效果和它的时机。您在 Animate 下拉菜单中选择的动画效果决定了动画的视觉效果。您在 ms 字段中输入的动画计时决定了动画完成所需的毫秒时间。

1.1、Visibility Effects

可见性的影响

The following effects can be applied to actions that change the visibility of widgets. These are the Show/Hide action and the Set Panel State action.

以下效果可应用于更改小部件可见性的操作。这些是 显示/隐藏 操作和 设置面板状态 操作。

• Fade: Gradually changes the widget or panel state's opacity until it is completely in or out of view

渐隐:逐渐改变小部件或面板状态的不透明度，直到完全进入或退出视图

• Slide left/right/up/down: Slides the widget or state into or out of view
  向左/向右/向上/向下滑动:将小部件或状态滑进或滑出视图

• Flip left/right/up/down: Flips the widget or state into or out of view along a center axis (X for up/down and Y for left/right)
  将小部件或状态沿中心轴(X表示向上/向下，Y表示向左/向右)翻转到视图中或从视图中移出。

1.2、Movement Effects

移动效果

Also known as "easings," the following effects determine the pacing of the animation within the designated timing. These can be applied to actions that change the spatial orientation of a widget or the page itself. These are the Scroll to Widget , Move , Rotate , Set Size , and Set Opacity actions.

也被称为“缓和”，下面的效果决定了动画在指定时间内的节奏。可以将这些应用于更改小部件或页面本身的空间方向的操作。这些是 滚动到Widget ， 移动 ， 旋转 ， 设置大小 ， 设置不透明度 动作。

• Swing: The animation is very slightly slower at the beginning and end of the timing than it is at the midpoint
  Swing: 动画在计时的开始和结束时比在中点时稍微慢一点

• Linear: The animation progresses at the same speed throughout the entire timing
  线性: 动画进展在整个时间以相同的速度

• Ease in cubic: The animation starts out slow and progressively gets faster until the end of the timing
  轻松在立方: 动画开始缓慢，并逐步加快，直到结束的时间

• Ease out cubic: The animation starts out fast and progressively gets slower until the end of the timing
  使立方: 动画开始快，并逐渐变慢，直到时间结束

• Ease in out cubic: The animation starts out slow and progressively gets faster until the midpoint of the timing; then it progressively gets slower again. (This is similar to Swing but more pronounced.)
  **动画开始缓慢，逐渐变快，直到时间的中点;然后它又逐渐变慢。(这与Swing相似，但更明显。)

• Bounce: The animation speeds up like Ease in cubic but bounces back a few times once the animation's finishing point is reached
  反弹: 动画速度像轻松在立方，但反弹几次，一旦动画的终点到达

• Elastic: The animation overshoots its finishing point and then springs back to it
  弹性: 动画超过了它的终点，然后弹回来

2、Move Action Boundaries

移动动作边界

The Move action allows you to set boundaries on how far its target widget can be moved in any direction. Try dragging the slider thumb below:
Move 动作允许您设置目标小部件在任何方向移动的距离。尝试拖动滑块拇指如下:

To add a boundary to a Move action, click More Options and then click Add boundary .
要向 Move 操作添加边界，请单击 More Options ，然后单击** add boundary**。

Movement boundaries are broken down into three parts:
运动边界分为三部分:

1. The first dropdown represents the side of the widget you want to place the boundary on: its top , left , right , or bottom edge.
   第一个下拉框表示您想要放置边界的窗口小部件的边:它的 top ， left ， right ，或 bottom edge。

2. The second dropdown defines a comparison between the X or Y value of the selected widget edge and the pixel value entered in the field to the right.
   第二个下拉框定义所选小部件边缘的X或Y值与右侧字段中输入的像素值之间的比较。

3. The field to the right defines an X or Y value that the selected widget edge is compared to.
   右边的字段定义了与所选小部件边缘相比较的X或Y值。

For example, a boundary reading top — is greater than — 10 means that the Y value of the widget's top edge must be 11 or greater. In other words, this Move action cannot move the widget's top edge any farther up on the page than Y=11.
例如，读取“top -大于- 10”的边界意味着小部件的上边缘的Y值必须是“11”或更大。换句话说，这个 Move 操作不能将小部件的顶部边缘移动到页面上比Y=11更高的位置。

Tip
提示

You can use a math expression to dynamically generate the pixel value in the fx field. This is especially helpful when you want to use other widgets on the page as boundary markers. Check out the slider control tutorial for an example.
可以使用数学表达式在 fx 字段中动态生成像素值。当您希望使用页面上的其他小部件作为边界标记时，这尤其有用。查看滑块控制教程以获得一个示例。