使用角度6创建各种动画效果的方法

从技术角度来看，动画可以定义为从初始状态到最终状态的过渡过程。如今，它已经成为各种网络应用不可或缺的一部分。通过动画，我们不仅可以创建各种酷炫的UI，还可以增加应用的趣味性。因此，设计精美的动画不仅能吸引用户的注意力，还能增强用户的浏览体验。

Angular使我们能够用原生性能创建动画。我们将学习如何使用Angular 6创建各种动画效果。这里，我们将使用Visual Studio代码进行示例演示。

准备工作/即将工作

安装Visual Studio代码和Angular CLI。

如果你是新手，请参考我之前的Angular 6.0入门文章(https://dzone.com/articles/getting-started-with-angular-60)，在自己的机器上构建一个Angular 6开发环境。

源代码

请从https://github.com/AnkitSharma-007/angular-6-animations.的GitHub下载源代码

了解角度动画的不同状态

动画是元素从一种状态到另一种状态的过渡。Angular为单个元素定义了三种不同的状态。

无效状态：无效状态表示元素处于不属于DOM的状态。当一个元素被创建并且还没有被放入到DOM中，或者该元素从DOM中被移除时，它就处于这种状态。这种状态特别实用，尤其是当我们想要通过在DOM中添加或删除元素来创建动画时，我们在代码中使用关键字void来定义这种状态。通配符状态：也称为元素的默认状态。无论当前动画状态如何，各种样式都使用该状态来定义元素。我们在代码中使用符号*来定义这种状态。自定义状态：元素的这种状态需要在代码中明确定义。我们可以在代码中使用任何自定义名称来表示这种状态。动画转换时序

在我们自己的应用程序中，我们通过定义动画转换的时间来显示从一种状态到另一种状态的转换。Angular为我们提供了以下三种与时间相关的属性：

1.持续时间

此属性指示动画从开始(初始状态)到结束(最终状态)所需的时间。我们可以通过以下三种方式定义动画的持续时间：

使用整数值以毫秒为单位表示时间。例如，500使用一个字符串值来表示以毫秒为单位的时间。例如，“500ms”使用一个字符串值来表示以秒为单位的时间。示例：“0.5”2。耽搁

此属性表示动画触发和实际过渡开始之间的时间间隔。该属性遵循与上述持续时间相同的语法规则。为了定义延迟，我们需要将延迟值作为一个字符串添加到持续时间值之后，即“持续时间延迟”。例如，“0.3s 500ms毫秒”表示转换将等待500毫秒，然后运行0.3秒.

3.松开

此属性指示动画在执行过程中如何加速或减速。我们可以在持续时间和延迟字符串之后添加第三个变量。当然，如果延迟值不存在，宽松将成为第二个值。这也是一个可选属性。例如：

0.3秒500毫秒放松时间.这意味着转换将等待500毫秒，然后运行0.3秒(300毫秒)以达到滑入的效果。300毫秒放松时间.这意味着转换将运行300毫秒(0.3秒)以达到滑出的效果。创建角度6应用程序

在计算机上打开命令提示符行，并执行以下命令集：

这些命令将创建一个名为ngAnimationdemo的目录，然后在该目录中创建一个名为ngAnimationDemo的Angular应用程序。

使用Visual Studio代码打开导航应用程序。然后我们将创建自己的组件。

依次进入查看集成终端，将打开Visual Studio Code的终端窗口。

执行以下命令创建相应的组件：

ng g c动画演示

它将在/src/app文件夹中创建我们的组件- animationdemo。

为了使用角度动画，我们需要导入一个特定的动画模块——浏览器动画模块。打开app.module.ts文件并添加以下导入定义：

从“@ angular/platform-browser/animations”导入{ browseraningsmodule }；//other import definitions @ ng module({ imports 3360[browserinamtionmodule//other imports]))了解Angular动画的语法

接下来，我们在组件的元数据中编写动画代码。它的语法如下：

@Component({ //其他组件属性。animations :[trigger(' trigger name ')，[ state('stateName '，Style())转换('状态更改表达式'，[动画步骤])]})这里，我们使用一个名为animations的属性。该属性的输入是一个包含一个或多个“触发器”的数组。同时，每个触发器都有一个唯一的名称，用于定义动画的状态和各种转换的具体实现。

另外，每个状态函数都会通过“stateName”来唯一标识其状态，并使用style函数来显示该状态下的元素样式。

当然，每个变换函数也通过stateChangeExpression定义了元素状态变换和动画不同步骤对应的数组，从而展现变换是如何发生的。在这里，我们可以使用逗号分隔的值在动画属性中包含多个触发器函数。

因为这些函数(触发器、状态和转换)是在@angular/animations模块中定义的，所以我们需要在自己的组件中导入这个模块。

为了将动画应用于元素，我们需要在元素的定义中包含触发器名称，即在元素的标签中使用@后跟触发器名称的格式。相应的代码示例如下：

div @changeSize/div

这是将触发器更改大小应用于元素的。

接下来，让我们创建更多的动画来更好地理解Angular动画的概念。

变化大小的动画

我们将创建一个动画，一键改变大小。

打开animationdemo.component.ts文件，并将以下代码添加到导入定义中。

从“@angular/animations”导入{ trigger，state，style，animate，transition }；将以下动画属性定义添加到组件的元数据中。

animation s :[trigger(' changeDivSize '，[ state('initial ')，style({ background color : ' green '，width: '100px '，height: '100px' }))，state('final '，style({ background color : ' red '，width 3360 ' 200px ' })，transition('initial=final '，animate('1500ms随着宽度和高度的增加，元素在“初始”状态下为绿色，在“最终”状态下为红色。

同时，我们定义了状态转换的规则：从“初始”状态到“最终”状态将持续1500毫秒，从“最终”状态到“初始”状态将持续1000毫秒。

为了改变元素的状态，我们在组件的类定义中定义了一个函数。我们在动画演示组件类中包含以下代码：

currentState=' initialchangeState(){ this . currentstate=this . currentstate===' initial '？final ' : ' initial}在这里，我们定义了一个changeState方法来切换元素的状态。

请打开animationdemo.component.html文件并添加以下代码：

H3更改div大小/H3按钮(点击)=' changeState()' changesize/button br/div[@ changedivsize]=currentstate/div br/我们定义了一个按钮，在点击时调用changeState函数。因为我们之前已经定义了元素，并对其应用了changeDivSize动画触发器，当点击按钮时，会更新元素的状态，其大小也会随着转换效果而变化。

在执行应用程序之前，我们还需要将Animationdemo组件中的引用包含在app.component.html文件中。

打开app.component.html文件，您会发现该文件已经包含一些默认的HTML代码。请删除所有代码，并按下图所示放置组件的选择器：

app-animation demo/app-animation demo

在Visual Studio代码的终端窗口中运行ng serve命令来执行代码。运行后，会提示您在浏览器中打开http://localhost:4200。然后，您将在浏览器中看到如下所示的单击按钮的动画效果。

气球动画效果

在前面的动画示例中，变换只发生在两个方向。在本节中，我们将学习如何全方位改变维度。这类似于气球的充气和放气，所以被称为气球动画效果。

请将以下触发器定义添加到动画属性中。

触发器(‘气球效应’)，[状态(‘初始’)、样式({ background color :‘绿色’、transform :‘刻度(1)’)))、状态(‘最终’)、样式({ background color :‘红色’、transform :‘刻度(1.5)’)))、过渡(‘最终=初始’)、动画(‘1000毫秒’)、动画(‘1500毫秒’)当元素的状态发生变化时会发生转换。

请将以下HTML代码添加到app.component.html文件中。

h3气球效果/h3 div(点击)=' changeState()' style=' width :100 px；高度：100 px；边界半径： 100%；margin: 3remBackground-color:green' [@气球效果]=currentstate/div在这里，我们定义了一个div，并通过CSS样式将其定义为一个圆。我们将通过点击div来调用changeState，从而切换元素的状态。

下图显示了动画在浏览器中的运行效果：

淡入淡出动画

有时，我们需要在显示动画时在DOM中添加或移除元素。接下来，我们来看看如何在列表中添加或删除条目，以实现淡入淡出的动画效果。

请将以下代码插入到AnimationdemoComponent类的定义中。

listItem=[]；list _ order : number=1；addItem(){ var ListItem=' ListItem ' this . list _ order；this.list _ orderthis . listitem . push(listitem)；} remove item(){ this . listitem . length-=1；}请在动画的属性中添加以下触发器定义。

Trigger ('fadeInOut '，[state ('void ')，style({ opa city 33600 }))，transition ('void=*，animate (1000))，])，其中我们定义了trigger fadeinout。当元素被添加到DOM中时，它的状态从void变为通配符，我们将其表示为void=*。当元素从DOM中删除时，它的状态从通配符变为void，我们将其表示为*=void。

我们对不同方向的动画使用相同的动画时序，其语法为=。根据触发器的定义，来自void=*和*=void的动画需要1000毫秒才能完成。

请将以下HTML代码添加到app.component.html文件中。

h3淡入淡出动画/h3按钮(点击)='addItem()'添加列表/按钮按钮(点击)='removeItem()'移除列表/按钮div style=' width:200pxmargin-left : 20px ' ul Li * ng for=' let list item的列表'[@ fadeinout] {{list}}/Li/ul/div在这里，我们定义了两个按钮来添加和删除条目。我们将fadeInOut触发器与元素绑定，以达到在添加或删除DOM时淡入淡出的效果。

下图显示了动画在浏览器中的运行效果：

进入和离开动画

另外，我们还可以添加DOM，实现一个元素从左边进入屏幕；删除时，元素可以从右侧离开屏幕。

因为从void=*和*=void的转换非常常见。因此，Angular为这些动画提供了一种别名机制：

对于void=*，我们可以使用' : enter '；对于*=void，我们可以使用“:leave”

这两个昵称使得这种转换更加易读易懂。

请在动画属性中添加以下触发器定义。

触发器(' EnterLeave '，[状态(' flyIn ')，样式({ transform : ' translateX(0)' }))，过渡(' :enter '，[样式({ transform : ' translateX(-100%)')})，动画(' 0.5s 300ms轻松进入'))]，过渡(' :leave '，[动画(' 0.3s轻松退出'，样式({ transform : ' translatx(100%)}))])那么‘: enter’的转换需要等待300毫秒，然后运行0.5秒，达到滑入的效果；但是‘: leave’的转换只运行了0.3秒，达到了滑出的效果。

请将以下HTML代码添加到app.component.html文件中。

h3Enter and Leave animation/h3按钮(单击)='addItem()'Add List/button按钮(单击)=' Remove item()' Remove List/button div style=' width :200 px；margin-left : 20px ' ul Li * ng for=' let list item的列表'[@ enter left]=' flyin ' ' { { list } }/Li/ul/div在这里，我们定义了两个按钮来添加和删除列表中的条目。我们将EnterLeave触发器绑定到元素上，实现在添加和删除DOM时的滑入和滑出的效果。

下图显示了动画在浏览器中的运行效果：

结论

综上所述，针对Angular 6的动画效果，我们讨论了动画状态和过渡的概念，并通过一个应用实例展示了实际的动画代码和效果。

推荐：

感兴趣的朋友可以关注边肖的微信微信官方账号【关于码农的一些事情】，更多网页制作特效源码和学习干货！

以上就是边肖介绍的用Angular 6创建各种动画效果的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！