正文
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**。