如何制作循环计时器？

Question

我想知道如何在Axure 8上制作这个动画

​

​

谢谢！

Answer 1

您可以使用动画gif。但是，您可以将其应用于所选状态，而不是直接显示。您添加一个操作来选择图像，gif就会开始运行。

添加计时器，完成后重置。请看这个简单明了的例子。https://www.dropbox.com/s/4hceqrbsbvyri8k/Circular-Timer.rp?dl=0

Answer 2

这里是另一个使用不同方法的解决方案。即数量惊人的定时动画：https://www.dropbox.com/s/52cuq8opsmquni0/Circular-Loader-Animated.rp?dl=0

可以设置两个有圆的动画。每一半都将旋转原点设置为公共中心。形状覆盖了动画的前半部分。

不是一个非常可靠的解决方案，只是证明了新的动画功能是可能的。

Answer 3

我最近刚刚开始使用Axure，所以可能有更好的方法来实现这一点，但这是我想出来的：

创建两个环：

• 从两个圆开始，一个比另一个略小。将一个放在另一个的中心，选择两个，然后点击样式窗格中的“减去”按钮，基本上在较大的圆圈中切割一个洞。瞧，这是一个戒指。
• 复制并粘贴这个戒指，这样你就可以使用2.用你想要的非活动状态颜色填充一个环(比如灰色)，用你想要的活动状态填充另一个环(比如浅蓝色)。
• 取消形状轮廓或使其与fill

的颜色相同

把那些环切成两半

• 恰好在每个圆的一半上放置了一个矩形(在这个例子中，我垂直地将我的矩形减半，但也可以水平地做)。使用相同的“减去”按钮移除每个环的一半。你应该只剩下一个灰色的半环和一个蓝色的环。

在2个半环的基础上制作新的全环

复制并粘贴每个半环，剩下2个灰色和2个蓝色的半环，每个颜色的半环中有1个，180 degrees

• Align
• ，这样你就有了一个完整的灰色环。对蓝色也做同样的事情。暂时对每个环进行分组。
• 在大纲窗格中为每个半环命名，以便以后参考(左灰色、右灰色、左蓝色、右蓝色)。

对齐环并设置顺序

• 将产生的灰色环直接放在蓝色环上，因此您可以看到的是灰色ring.
• Ungroup环，并在轮廓窗格中从上到下设置顺序:右灰色，右蓝色，左灰色，左蓝色。

现在来了有趣的部分

• 选择右侧的灰色半圆环，然后转到属性。我使用“On Load”，但选择适合您的选项并设置以下情况：
• 将右灰色旋转180度，顺时针，右锚，动画线性，1000ms

1000ms隐藏右灰色(no animation)

• Rotate left灰色180度，顺时针，右锚，动画-线性，1000ms

最终结果是右侧的灰色半圆环旋转，露出下面的蓝色环，但看起来好像蓝色只是填充了灰色空间。一旦那一半结束了它的180度旋转，并结束在左侧，它消失了，左边的灰色半环开始旋转。因为我们把它放在右边的蓝色半圆环后面，当它移动时，它就会缩在它后面，随着它的移动，它会暴露出蓝色环的其余部分。

正如我前面提到的，我是Axure的新手，所以如果有人对如何更有效地完成这项工作有任何建议，我们非常欢迎！