COSMIC TIME

为 Iced 设计的动画工具包

该项目是为 Cosmic DE 构建的。尽管这也可以适用于任何依赖 Iced 的项目。

该项目的目标是提供一个简单的 API，以在用 Iced-rs/Iced 构建的应用程序中高效地构建和显示复杂动画。

项目目标

• 完全兼容 Iced 和 Elm 架构。
• 易于使用。
• 无需任何动画的数学知识。
• 渲染循环中无堆分配。
• 提供额外的可动画控件。
• 自定义控件支持（创建自己的！）。

概述

要将 cosmic-time 集成到 Iced，需要进行以下五个步骤。

1. 创建一个 Timeline。这是控制动画的类型。

struct Counter {
      timeline: Timeline
}

// ~ SNIP

impl Application for Counter {
    // ~ SNIP
     fn new(_flags: ()) -> (Self, Command<Message>) {
        (Self { timeline: Timeline::new()}, Command::none())
     }
}

2. 将至少一个动画添加到您的时间轴中。这可以在您的应用程序的 new() 或 update() 中完成，或者两者都可以！

static CONTAINER: Lazy<id::Container> = Lazy::new(id::Container::unique);

let animation = chain![
  CONTAINER,
  container(Duration::ZERO).width(10),
  container(Duration::from_secs(10)).width(100)
];
self.timeline.set_chain(animation).start();

这里有一些不同之处！

static CONTAINER: Lazyid::Container = Lazy::new(id::Container::unique);

Cosmic Time 使用 ID 来引用每个动画。我们导出自己的，但它们与 Iced 用于控件操作的 ID 完全相同。每个可动画控件都需要一个 ID。每个 ID 只能引用一个动画。

let animation = chain![

宇宙时间指的是我们构建动画的方式，将其称为Chain。每个关键帧都像链条一样相互连接。宇宙时间API不会说“将宽度从10改为100”。我们定义每个状态，我们希望小部件具有的状态，例如在.width(10)在Duration::ZERO然后.width(100)在Duration::from_secs(10)。其中Duration是上一个关键帧之后的时间。这就是我们为什么称之为链的原因。尽管如此，我们无法不通过所有先前关键帧而达到下一个状态。

self.timeline.set_chain(animation1).start();
self.timeline.set_chain(animation2).start();

  fn subscription(&self) -> Subscription<Message> {
       self.timeline.as_subscription::<Event>().map(Message::Tick)
   }

fn update(&mut self, message: Message) -> Command<Message> {
       match message {
           Message::Tick(now) => self.timeline.now(now),
       }
   }

anim!(CONTIANER, &self.timeline, contents)