生成折叠拖放指示器

创建一个交互式下拉箭头,您可以将其添加到下拉菜单和手风琴触发器中。

在本教程中,您将获得有关制作可合并到手风琴和可折叠面板中的交互式拖放指示器的知识。

启动之前
  • 掌握个性化手风琴的形成过程
  • 此外,请查看开发自定义下拉菜单的技术
在此教学课程中
  1. 集成和定制指标
  2. 制定动画
  3. 指定受影响的 category

集成和定制指标

此步骤很简单。您可以自由使用任何元素 — 在我们的例子中,使用的是图像。图像描绘了一个向下的指示器。将其放置在手风琴触发器内,位于导航器 (H3) 中相应查询的正下方。接下来,设置一个类(对于交互至关重要)。根据需要调整大小。这可以通过估计来完成(按住 shift 键,同时使用向上和向下箭头以 10 为增量进行调整)。

随后,复制相同的元素(指示器)并将其放置在折叠面板中的其他标题之后。鉴于它们共享相同的类,修改其中一个的样式将不可避免地影响所有标题。

制定动画

这标志着初始阶段。让我们开始制作动画。启动交互的触发器是手风琴的项目触发器。选择它后,通过合并操作来增强现有触发器。触发器在鼠标单击(或点击)时运行,具有两种状态:第一次单击和第二次单击。第一次单击后,继续引入开场动画。由于指示器当前指向下方,因此单个动作就足够了(与内容的动画同时进行)。实现 180 度的旋转,将其转换为向上的方向。

为了确保与其余动画的一致性,请调整缓动(指定缓动动画曲线)并减少持续时间(设置较低的值)。

如果您预览该序列,它应该可以无缝运行。结束此阶段并为结束动画实现逆操作。结合现有操作引入一个附加步骤。通过将旋转设置为零,将指示器旋转回其初始位置。调整缓动(再次选择缓动)并减少持续时间。

预览时,观察到初始查询滑出,而指示器则适时旋转 - 符合预期。然而,后续查询并不具有相同的行为。

指定受影响的类别

继续指定受影响的类。这个过程很简单。鉴于此动画与手风琴项目触发器有关,因此在第一次和第二次点击期间,只有触发器的子项会受到影响(考虑到指示器作为触发器子项的位置)。

在处理第一次点击时,选择与指标相关的操作。确保它影响 不是选定的实体,而是类。指定此修改应应用于触发器的子项。

完成后,重复第二次点击的过程。瞄准向下指示器并确认该类受到影响 — 特别是向下指示器类。选择触发器的子项作为受影响的实体,因为指示器是每个触发器的一部分。

按照这些步骤,您可以将向下指示器动画化为向上指示器。

麦宜云
Ewan Mak 的最新帖子 (查看全部)