【.com快译】简介从技术角度来说，动画可以定义为从初始状态到最终状态的过渡过程。如今，它已成为各种Web应用程序不可或缺的一部分。通过动画，我们不仅可以创建各种炫酷的UI，还可以为应用程序增添乐趣。因此，精心设计的动画不仅能吸引用户的眼球，还能提升他们的浏览体验。Angular允许我们创建具有原生性能的动画。我们将通过本文学习如何使用Angular6创建各种动画效果。在这里，我们将使用VisualStudioCode来演示示例。准备工作安装VisualStudioCode和AngularCLI。如果你是新手，请参考我之前的Angular6.0入门文章（https://dzone.com/articles/getting-started-with-angular-60）在自己的机器上搭建Angular6开发环境。请从GitHub下载源代码，网址为https://github.com/AnkitSharma-007/angular-6-animations。了解Angular动画的不同状态动画是元素从一种状态到另一种状态的转换，Angular为单个元素定义了三种不同的状态。空状态：空状态表示元素处于不属于DOM的状态。这个状态是当一个元素被创建并且还没有被放置到DOM中时，或者当元素被从DOM中移除时。这种状态非常有用，尤其是当我们想通过在DOM中添加或移除元素来创建动画时，我们在代码中使用关键字void来定义这种状态。通配符状态：也称为元素的默认状态。无论当前动画状态如何，各种样式都使用此状态来定义元素。我们在代码中使用符号*来定义这个状态。自定义状态：元素的这种状态需要在代码中明确定义。我们可以在代码中使用任何自定义名称来表示这种状态。动画转换时间在我们自己的应用程序中，我们定义动画转换时间以显示从一种状态到另一种状态的转换。Angular为我们提供了以下三个与时间相关的属性：1.持续时间（Duration）这个属性代表了我们的动画从开始（初始状态）到完成（最终状态）所需要的时间。我们可以通过以下三种方式来定义动画的时长：使用一个整数值来表示以毫秒为单位的时间，例如：500使用一个字符串值来表示以毫秒为单位的时间，例如：'500ms'使用一个字符串值以秒为单位表示时间。例如：'0.5'2.延迟（Delay）这个属性表示动画触发和实际过渡开始之间的时间间隔。此属性遵循与上述持续时间相同的语法规则。要定义延迟，我们需要在持续时间值之后以字符串的形式添加延迟的值，即：'DurationDelay'。例如“0.3s500ms”表示转换将等待500ms，然后运行??0.3s。3.滑动（Easing）该属性表示动画在执行过程中如何加速或减速。我们可以在持续时间和延迟字符串之后添加第三个变量。当然，如果延迟值不存在，那么Easing就是第二个值。这也是一个可选属性。例如：“0.3秒500毫秒缓入”。这意味着过渡将等待500毫秒，然后运行??0.3秒（300毫秒）以实现滑入效果。“300毫秒缓出”。这意味着转换将运行300毫秒（0.3秒）以实现滑出效果。要创建Angular6应用程序，请在您的计算机上打开命令提示符并执行以下一组命令：mkdirngAnimationDemocdngAnimationDemongnewngAnimation这些命令将创建一个名为ngAnimationDemo的目录，并在该目录中创建一个新的ngAnimationAngular应用程序。请使用VisualStudioCode打开ngAnimation应用程序。接下来我们将创建我们自己的组件。请转到查看>>集成终端，这将打开VisualStudioCode的终端窗口。请执行以下命令来创建相应的组件：nggcanimationdemo这将在/src/app文件夹中创建我们的组件--animationdemo。为了使用Angular动画，我们需要在应用程序中导入一个特定的动画模块——BrowserAnimationsModule。请打开app.module.ts文件并添加以下导入定义：import{BrowserAnimationsModule}from'@angular/platform-b??rowser/animations';//otherimportdefinitions@NgModule({imports:[BrowserAnimationsModule//otherimports]})理解Angular动画的语法下面，我们在组件的元数据中编写动画代码。它的语法如下：@Component({//othercomponentproperties.animations:[trigger('triggerName'),[state('stateName',style())transition('stateChangeExpression',[AnimationSteps])]]})这里，我们使用一个叫做动画的属性。此属性的输入是一个包含一个或多个“触发器”的数组。同时，每个触发器都有一个唯一的名字，用来定义动画的状态和各种过渡的具体实现。另外，每个状态函数都会通过“stateName”来准确识别自己的状态，并使用样式函数来显示该状态下的元素样式。当然，每个转场函数也通过stateChangeExpression定义了元素状态转场，并定义了动画不同步骤对应的数组，这样就可以展示出转场是如何发生的。在这里，我们可以使用逗号分隔值将多个触发函数包含到动画的属性中。由于这些功能（触发器、状态和转换）是在@angular/animations模块中定义的，因此我们需要在我们的组件中导入该模块。为了给元素应用动画，我们需要在元素的定义中包含触发器的名称，即在元素的标签中使用@后跟触发器名称的格式。对应的代码示例如下：
