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.每个动画都有两个部分:效果和时间。
|
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.以下效果可应用于更改窗口部件可见性的操作。 这些是“显示/隐藏”操作和“设置面板状态”操作。
<iframe src="https://pb54dx.axshare.com/#id=xn1fo4&p=visibility_effects&c=1"></iframe> |
|
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.也称为“缓动”,以下效果决定了在指定时间范围内动画的步调。 这些可以应用于更改窗口部件或页面本身的空间方向的动作。 包括“滚动到部件”,“移动”,“旋转”,“设置大小”和“设置不透明度”操作。
<iframe src="https://pb54dx.axshare.com/#id=pr9u3l&p=movement_effects&c=1"></iframe>
Swing逐渐: The animation is very slightly slower at the beginning and end of the timing than it is at the midpoint动画在开始和结束时比在中点处稍微慢一些
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动画会超出其终点,然后弹回原点