跳到内容
CrossFly 是 100% 开源在 GitHub 关注我们
CrossFlyCrossFly
开始使用

本页面由葡萄牙语机器翻译，可能存在错误。葡萄牙语版本为准。

如何创建持续脉冲（循环）

目的。 让某个元素无限地脉动/闪烁（“加载中”指示器、发光、按钮的呼吸效果）。LoopAnimation 反复地将一个值从 0 → 1 循环，可带或不带缓动，没有 onComplete（它是无限的——你用 stop() 停止它）。

使用的 API

  • new LoopAnimation(float duration [, float fps, boolean easeInOut]) —— 每个循环持续 duration 秒并自动重新开始。fps 默认 60；easeInOut 默认 false（线性）。当 easeInOut=true 时，每个循环应用三次 ease-in-out 缓动。
  • LoopAnimation.onUpdate(Runnable) —— 每帧的回调；读取 getValue()（0–1，当前循环的进度）。
  • LoopAnimation.getValue() —— 当前循环的进度。
  • LoopAnimation.start() / stop() —— 启动 / 中断循环。没有 onComplete 也没有 cancel() —— 它本质上是无限的。
  • Component.alpha(float) —— 应用不透明度（用于“呼吸”效果）。
  • Component.repaint() —— 静态方法；在 onUpdate 中必须调用。

完整示例（复制、粘贴并运行）

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.animation.*;

/** 可执行的主界面：循环脉动一个「●」；关闭界面时停止循环。 */
public class MainWindow extends Window
{
   private LoopAnimation pulse;

   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      Label dot = new Label("●");
      add(dot);

      // 1 秒周期，60 fps，带缓动（柔和脉动）
      pulse = new LoopAnimation(1f, 60f, true);
      pulse.onUpdate(() ->
         {
            // 值从 0 → 1 并重启；映射到不透明度 0.3 → 1.0
            float v = 0.3f + 0.7f * pulse.getValue();
            dot.alpha(v);
            Component.repaint();
         })
         .start();

      // 结束脉动的按钮（例如加载完成时）
      add(new Button("Parar").onAction(e -> pulse.stop()));
   }

   @Override
   public void onRemove()
   {
      // 离开界面时停止，以免留下孤立循环在屏幕外动画。
      if (pulse != null) pulse.stop();
      super.onRemove();
   }
}

下面的代码片段仅展示核心部分。要运行它，请将其放入上面的 MainWindow 骨架中。

最小片段

// 已在源码核实：LoopAnimation(duration, fps, easeInOut)；无 onComplete；用 stop() 停止
Label dot = new Label("●");
add(dot);

// 1 秒周期，60 fps，带缓动（柔和脉动）
LoopAnimation pulse = new LoopAnimation(1f, 60f, true);
pulse.onUpdate(() ->
   {
      // 值从 0 → 1 并重启；映射到不透明度 0.3 → 1.0
      float v = 0.3f + 0.7f * pulse.getValue();
      dot.alpha(v);
      Component.repaint();
   })
   .start();

// 稍后，用于结束脉动（例如加载完成时）：
pulse.stop();

重要注意事项：

  • 保留引用（pulse）以便能够调用 stop()。没有 stop() 的 LoopAnimation 会永远运行并持续消耗 CPU/GPU（每帧都调用 repaint()）。
  • 离开屏幕时停止它：当 Window 关闭时（onRemove/hide）调用 pulse.stop()，以免留下一个在屏幕外持续播放动画的孤儿循环。
  • 每个循环开始时 getValue() 会回到 0。要实现“来回”脉冲（0→1→0），请对 getValue() 应用三角函数或正弦函数进行映射。

深入了解

这个页面有帮助吗？