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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
// other import definitions 
@NgModule({ imports: [BrowserAnimationsModule // other imports]})

@Component({ 
// other component properties. 
 animations: [ 
 trigger('triggerName'), [ 
 state('stateName', style()) 
 transition('stateChangeExpression', [Animation Steps]) 
 ] 
 ] 
})

import { trigger, state, style, animate, transition } from '@angular/animations';

animations: [ 
 trigger('changeDivSize', [ 
 state('initial', style({ 
 backgroundColor: 'green', 
 width: '100px', 
 height: '100px' 
 })), 
 state('final', style({ 
 backgroundColor: 'red', 
 width: '200px', 
 height: '200px' 
 })), 
 transition('initial=>final', animate('1500ms')), 
 transition('final=>initial', animate('1000ms')) 
 ]), 
] 

currentState = 'initial'; 
changeState() { 
 this.currentState = this.currentState === 'initial' "htmlcode">

<h3>Change the div size</h3> 
<button (click)="changeState()">Change Size</button> 
<br /> 
<div [@changeDivSize]=currentState></div> 
<br />


我们定义了一个按钮，来调用点击时的changeState函数。由于我们前面已经定义了元素，并对它应用了changeDivSize动画触发器，因此当按钮被点击时，它会更新元素的状态，其大小则会伴随着转换效果而发生变化。
在执行该应用之前，我们也需要将引用包含在app.component.html文件内的Animationdemo组件中。
打开app.component.html文件，您会发现该文件中已包含了一些默认的HTML代码。请删除所有的代码，并按照下图所示放置组件的选择器：
<app-animationdemo></app-animationdemo>
请在Visual Studio Code的终端窗口里运行ng serve命令，以执行该代码。运行完毕后，它会提示您在浏览器中打开http://localhost:4200。随后，您就会在浏览器中看到如下点击按钮的动画效果。



气球动画效果
在前面的动画示例中，转化仅发生在两个方向。而在本节中，我们将学习如何改变所有方向上的尺寸。这与气球的充、放气比较类似，故称为气球动画效果。
请在动画属性中添加如下的触发器定义。


trigger('balloonEffect', [ 
 state('initial', style({ 
 backgroundColor: 'green', 
 transform: 'scale(1)' 
 })), 
 state('final', style({ 
 backgroundColor: 'red', 
 transform: 'scale(1.5)' 
 })), 
 transition('final=>initial', animate('1000ms')), 
 transition('initial=>final', animate('1500ms')) 
 ]), 


在此，我们使用转换属性来更改所有方向的尺寸大小。当该元素的状态发生变化时转换随即发生。
请在app.component.html文件中添加如下HTML代码。


<h3>Balloon Effect</h3> 
<div (click)="changeState()" 
 style="width:100px;height:100px; border-radius: 100%; margin: 3rem; background-color: green" 
 [@balloonEffect]=currentState> 
</div> 


在此，我们定义了一个div，并通过CSS样式来定义成一个圆圈。我们将通过点击div去调用changeState，从而实现元素状态的切换。
下图便是该动画在浏览器中的运行效果：

淡入和淡出动画
有时候，我们需要在显示动画的同时，对DOM添加或移除元素。下面，我们来看看如何通过对一个列表添加或删除条目，以实现淡入和淡出的动画效果。
请将如下代码插入AnimationdemoComponent类的定义之中。


listItem = []; 
list_order: number = 1; 
addItem() { 
 var listitem = "ListItem " + this.list_order; 
 this.list_order++; 
 this.listItem.push(listitem); 
} 
removeItem() { 
 this.listItem.length -= 1; 
} 


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


trigger('fadeInOut', [ 
 state('void', style({ 
 opacity: 0 
 })), 
 transition('void <=> *', animate(1000)), 
]), 


在此，我们定义了触发器fadeInOut。当该元素被添加到DOM时，它的状态就从void转换为wildcard，我们表示为void => *。而当该元素从DOM删除时，它的状态就从wildcard转换为void，我们表示为* => void。
我们给动画的不同方向使用相同的动画定时，其语法为<=>。正如该触发器所定义的，动画从void => * 和 * => void，都需要1000毫秒才能完成。
请在app.component.html文件中添加如下HTML代码。


<h3>Fade-In and Fade-Out animation</h3> 
<button (click)="addItem()">Add List</button> 
<button (click)="removeItem()">Remove List</button> 
<div style="width:200px; margin-left: 20px"> 
 <ul> 
 <li *ngFor="let list of listItem" [@fadeInOut]> 
 {{list}} 
 </li> 
 </ul> 
</div> 


在此，我们定义了两个按钮来添加和删除条目。我们将fadeInOut触发器与元素绑定，以实现在对DOM进行添加、删除时，能够出现淡入和淡出的效果。
下图便是该动画在浏览器中的运行效果：

进入和离开动画
此外，我们还能够通过对DOM的添加，实现某个元素从左边进入屏幕;而在删除时，能让该元素从右边离开屏幕。
由于从void => * 和 * => void 的转换十分常见。因此，Angular为这些动画提供了别名机制：
对于 void => * ，我们可以用':enter'

对于 * => void ，我们可以用':leave'
这两个别名使得此类转换更具可读性，也更容易被理解。
请在动画的属性中添加如下触发器的定义。


trigger('EnterLeave', [ 
 state('flyIn', style({ transform: 'translateX(0)' })), 
 transition(':enter', [ 
 style({ transform: 'translateX(-100%)' }), 
 animate('0.5s 300ms ease-in') 
 ]), 
 transition(':leave', [ 
 animate('0.3s ease-out', style({ transform: 'translateX(100%)' })) 
 ]) 
]) 


在此，我们定义了触发器EnterLeave。那么':enter'的转换需要等待300毫秒，然后运行0.5秒，并实现滑入的效果;而':leave'的转换只运行0.3秒，实现滑出的效果。
请在app.component.html文件中添加如下HTML代码。


<h3>Enter and Leave animation</h3> 
<button (click)="addItem()">Add List</button> 
<button (click)="removeItem()">Remove List</button> 
<div style="width:200px; margin-left: 20px"> 
 <ul> 
 <li *ngFor="let list of listItem" [@EnterLeave]="'flyIn'"> 
 {{list}} 
 </li> 
 </ul> 
</div>


在此，我们定义了两个按钮来对列表添加和删除条目。我们将EnterLeave触发器与元素绑定，以实现在对DOM进行添加、删除时，出现滑入和滑出的效果。
下图便是该动画在浏览器中的运行效果：

结论
综上所述，我们针对Angular 6的动画效果，探讨了动画状态和转换的概念，也通过一个应用示例展示了实际的动画代码与效果。
推荐：
感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】，更多网页制作特效源码及学习干货哦！！！
以上所述是小编给大家介绍的使用Angular 6创建各种动画效果的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！