在本教程中,您将了解动画在改善用户体验方面的重要性。 我将向您展示如何在动画组件和Bootstrap的帮助下将动画合并到Angular 6应用程序中。
动画在用户设计中的作用
大多数网络用户是视觉生物,因此会响应视觉对象。 这意味着作为设计师,您必须找到一种在设计中融入动画的方法。
当涉及到用户与您的网站或应用的交互时,动画可以证明是一种有用的工具。 但是,这并不意味着当您使用动画时,用户会被您的网站所吸引。 您必须在特定时间和地点使用的动画数量要取得平衡。
让我们看一些在动画中可以证明对用户设计有用的场景。
- 提供反馈:动画可用于确认系统已收到特定动作。 例如,当用户输入错误的信息时,您可以使用摇动动画让他们知道他们需要再次输入其凭据。
- 演示:动画还可用于演示应用程序某些方面的工作方式。 这是通过提供可视提示来完成的,这些提示可以教用户如何使用不同的UI元素。
- 过渡:过渡动画可以帮助用户将注意力集中在正确的区域。 合并过渡动画时,请记住该过程应该流畅且轻松。
动画状态和过渡
在开始将动画添加到Angular应用程序之前,让我们首先看一下Angular中可用的不同动画状态和过渡。
这些是Angular动画的主要状态:
- 无效状态:视图中不存在的元素由无效状态表示
- 通配符(*)状态:表示任何状态
当我们开始编码时,我们将研究它们如何适合实际的应用程序。
为了使动画从一种状态变为另一种状态,需要进行过渡。 过渡事件具有其自己的属性,包括:
- 持续时间:此属性定义动画的寿命。 这意味着从动画的开始到完成的时间。
- 延迟:此属性用于定义实际过渡开始到触发之间的时间。
- 缓动:此属性控制动画速度的变化。 动画可以从慢开始并随其进展而加速,反之亦然。
设置Angular 6项目
我们将从初始化新的Angular应用程序开始,如下所示:
ng new angularAnimation
下一步是通过导入app.module.ts中的BrowserAnimationsModule
来启用动画,如下所示。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
然后,将从组件文件中的@angular/animations
导入将要使用的所有动画功能,如下所示:
import { trigger, state, style, animate, transition, group } from '@angular/animations';
定义动画
最后,您如图所示在组件装饰器中定义所有动画。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'].
animations: [
trigger('trigger1', [
//state and transitions go here
]),
trigger('trigger2', [
//state and transitions go here
]),
]
)
animation属性通常是一个数组,其中包含一个或多个如上所述的触发器。 每个触发器还具有状态和转换功能。
一个简单的动画属性如下所示:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('changeBtnColor', [
state('state1', style({
backgroundColor: 'yellow',
})),
state('state2', style({
backgroundColor: 'pink',
border:'1px solid #18ab29',
height: '100px',
width: '200px'
})),
transition('state1=>state2', animate('1000ms')),
transition('state2=>state1', animate('1000ms'))
]), ]
})
在上面的动画中,触发器的名称是changeBtnColor
,我们有两个状态: state1
和state2
。 我们的元素在state1
将为黄色,并且过渡到state2
时,动画将更改其大小和颜色。
将元素挂接到动画触发器
现在,让我们将元素挂接到模板中的触发器,如下所示。
<h3>Change color Animation</h3>
<button class ="my_button" (click)="changeState()">Click here</button>
<hr>
<button [@changeBtnColor]=current class ="mybutton" (click)="changeState()">Change Color</button>
<br />
现在回到组件并定义侦听按钮单击的函数。
export class AppComponent {
title = 'Animations in Angular';
current = 'state1';
changeState() {
this.current = this.current === 'state1' ? 'state2' : 'state1';
}
}
以下是动画的转换前后。
既然我们已经掌握了Angular动画的基础知识,那么让我们更深入地介绍另一个示例。 在下一个示例中,我们将动画添加到列表项。
动画列表项
现在打开app.component.ts并如下更新:
export class AppComponent {
title = 'Animations';
mylist = [];
addElement() {
this.mylist.push('This list is animated');
}
removeElement() {
this.mylist.length -= 1;
}
}
在这里,我们创建一个空列表,并创建一个用于向列表中添加元素和从列表中删除元素的函数。
接下来,我们将添加将应用于动画的元素。 如下更新模板:
<h3>Enter and Leave animation</h3>
<a (click)="addElement()" href="#" class="myButton">Add List</a>
<a (click)="removeElement()"href="#" class="myButton">Remove List</a>
<div style="width:200px; margin-left: 20px">
<ul>
<li *ngFor="let list of mylist">
{{list}}
</li>
</ul>
</div>
我们将开始在组件中添加动画。 打开app.component.ts并在组件装饰器中添加以下动画。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('AnimateList', [
transition(':enter', [
style({opacity: 0, transform: 'translateY(-75%)', offset: 1.0}),
animate('0.2s 600ms ease-in')
]),
transition(':leave', [
animate('1.2s ease-out',
style({opacity: .5, transform: 'translateY(35px)', offset: 0.3})
]),
])
]
})
在这里,我们有一个名为AnimateList
的触发器,它具有:enter
和:leave
别名。 enter
表示从void
到*
的过渡( void => *
),而:leave
表示从*
到void
的过渡( * => void
)。 在:enter
过渡期间,动画将等待600ms并运行0.2s。 leave
过渡将等待0.1秒,并且不会延迟运行。
现在,我们需要更新模板以使用上面定义的动画。 app.component.html中的列表项应如下所示:
<div style="width:200px; margin-left: 20px">
<ul>
<li *ngFor="let list of mylist" [@AnimateList]>
{{list}}
</li>
</ul>
</div>
该应用程序的最终演示应如下所示运行。
结论
本教程介绍了在Angular中开始自己的动画所必需的所有内容。 有关更多信息,请转到动画指南,并探索Angular中动画的全部功能。
翻译自: https://code.tutsplus.com/tutorials/how-to-use-animation-in-angular--cms-32488