在 Workflow Builder 中构建自定义动画

Slack users have more power than ever to automate routine tasks and processes, saving themselves time each day. Workflow Builder, a task automation tool built into Slack, has continued to improve since its launch back in 2019. Along with various new steps and triggers, we built a new sidebar section for all available workflow steps. These steps are now accessible to users without having to open a modal.

Slack用户比以往任何时候都拥有更多的权力来自动化例行任务和流程，每天节省时间。自2019年推出以来，内置在Slack中的任务自动化工具Workflow Builder一直在不断改进。除了各种新的步骤和触发器之外，我们还为所有可用的工作流步骤构建了一个新的侧边栏部分。现在，用户可以直接访问这些步骤，而无需打开模态框。

Before

之前

After

之后

The enhancement of the Slack Platform, coupled with smart and significant design changes, makes Workflow Builder a new and powerful experience for users automating tasks in Slack.

Slack平台的增强功能，加上智能和重要的设计变化，使Workflow Builder成为Slack用户自动化任务的新而强大的体验。

Powerful tools can be intimidating, though. On the Workflow Builder team, we identified animations as a great opportunity to create friendly and approachable UI magic.  Simple actions, like moving or adding steps, should have a Slack touch — the smooth and fun interaction patterns that Slack is known for.

然而，强大的工具可能令人生畏。在Workflow Builder团队中，我们认识到动画是创造友好和亲近的用户界面魔法的绝佳机会。简单的操作，如移动或添加步骤，应该具有Slack的特色——流畅而有趣的交互模式。

The Workflow Builder experience already had drag-and-drop animations when moving steps within a workflow. But, with the newly introduced sidebar, a drag-and-drop inconsistency was exposed. Why can’t users drag and drop a step from the sidebar into the workflow?

工作流程生成器的体验在移动工作流程中的步骤时已经有了拖放动画。但是，随着新引入的侧边栏，拖放的不一致性暴露了出来。为什么用户不能将侧边栏中的步骤拖放到工作流程中呢？

Working with an animation library

使用动画库

Unfortunately, drag-and-drop animations from our new steps sidebar into a workflow were not simple to support.

不幸的是，从新的步骤侧边栏拖放到工作流中的动画并不简单。

Workflow Builder uses react-beautiful-dnd — a library that supports drag-and-drop interactions with natural animations. Even though this library is powerful, it is also opinionated and has limitations.

Workflow Builder 使用 react-beautiful-dnd - 一个支持自然动画的拖放交互库。尽管这个库功能强大，但也有一些限制。

...