专栏名称: AT阿宝哥
15年IT互联网从业经验,专注产品方案,人才...
目录
相关文章推荐
51好读  ›  专栏  ›  AT阿宝哥

《Axure官方文档译读》之0505:Animations and Move Action B...

AT阿宝哥  · 简书  ·  · 2020-01-20 00:05

正文

Axure RP

Animations and Move Action Boundaries

动画和移动动作边界

1、Animations

动画

image

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







请到「今天看啥」查看全文