Angular 4动画教程

分享于 

16分钟阅读

ionic

  繁體 雙語

Angular提供了创建强大动画并根据各种因素激活它们的能力。 你可以在任何HTML元素上放置动画,并根据 Angular 生命周期。用户事件和更多的内容使它们发生。

从 Angular 2到 4的一个变化是,他们将动画功能从 Angular 核心库移动到自己的动画库中。 如果你希望在 Angular 4应用中集成动画,你需要使用npm安装动画包,在 app.module.ts 文件中导入库。

那么,让我们开始吧,然后我们将了解 Angular 4动画的工作原理。

安装 Angular 动画

由于本教程是免费 Angular 4课程的一部分,所以我们已经有了一个项目设置并准备好去。 如果你在本教程页面上没有跟随以前的视频,请确保使用 Angular CLI生成新的Angular 项目。 这样,我们都会在同一页上。

在 Angular 应用程序的项目文件夹中,在控制台上,键入:
> npm install @angular/animations@latest --save

这将保存 Angular 动画库的最新版本,并将它的保存为 package.json 文件中的一个依赖项。

接下来,在 /src/app/app.module.ts 文件,我们添加导入:
import{ BrowserAnimationsModule }from'@angular/platform-browser/animations';

在 @NgModule decorator的导入 array 中,我们添加:

@NgModule({
 //Other arrays removed
 imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 BrowserAnimationsModule
 ],
})

很好, 现在我们可以像往常一样继续进行,就好像这是一个Angular 2应用程序。

让你的组件准备动画

首先,我们需要将一些动画功能导入到所需组件的顶部:
import{ trigger,state,style,transition,animate,keyframes }from'@angular/animations';

对于动画来说,所有这些功能都有例外 如果你的组件模板不包含多个步骤动画,则可以忽略关键帧。

接下来,我们必须添加 将属性设置为 @Component() 装饰器:

@Component({
 selector: 'app-root',
 template: `
 <p>I will animate</p>
 `,
 styles: [``],
 animations: [

 //Define animations here.

 ]
})

为了简单起见,我们在这里使用 inline HTML和 CSS 。

接下来,我们来定义一个实际动画。

动画触发器

记住当我们导入一个 触发功能最高? 该 触发动画功能是每个独特动画动画的起始点。

第一个参数接受动画的NAME,第二个参数接受我们导入的所有其他动画函数。

所以在 animations组件decorator的动画属性,我们添加:

animations: [
 trigger('myAwesomeAnimation', [

 ]),
 ]

注意触发器函数后面的逗号? 那就是你可以定义多个动画,每个动画都有第一个参数中定义的唯一动画名称。

接下来是动画状态。

动画状态&样式

状态函数允许你定义不同的状态,你可以在其中调用和转换。 第一个参数接受一个唯一的NAME,第二个参数接受样式函数。

样式函数允许你应用具有网络动画属性名称和相关值的对象。

因此,在前面的示例中扩展:

animations: [
 trigger('myAwesomeAnimation', [
 state('small', style({
 transform: 'scale(1)',
 })),
 state('large', style({
 transform: 'scale(1.2)',
 })),
 ]),
 ]

我们有 2种不同的状态 scale 属性的默认大小为 1,到 1.2. 下一个是 转换函数。

动画转换

转换函数是使实际动画发生的原因。 第一个参数接受 2个不同状态之间的direction,第二个参数接受 函数动画。

动画功能允许你定义转换的长度。延迟和缓和。 它还允许你指定 当转换发生时,样式函数用于定义样式,或者 多步骤动画关键帧函数;它们都放置在动画功能的第二个参数中。

现在,我们将省略动画函数的第二个参数。

animations: [
 trigger('myAwesomeAnimation', [
 state('small', style({
 transform: 'scale(1)',
 })),
 state('large', style({
 transform: 'scale(1.2)',
 })),
 transition('small => large', animate('100ms ease-in')),
 ]),
 ]

这个转换定义了转换的长度,以及使用一个HTML元素时的缓动类型。 myAwesomeAnimation 触发器从 小的状态到 大的状态。

现在让我们这样做吧,但是我们稍后会再次讨论这个代码段。

在模板中附加动画

我们的模板很简单。 我们只有一个段落元素。 我们将动画附加到该元素,并添加一个绑定到方法的click事件。

template: `
 <p [@myAwesomeAnimation]='state' (click)="animateMe()">I will animate</p>
 `,

如你所见,要将动画附加到HTML元素,请在触发器 NAME 周围包括括号,前面是 @. 。 在本例中将它绑定到模板表达式,在本例中,它是我们将在组件类中定义的属性。

在执行这里操作之前,让我们在样式属性中赋予段落一些样式:

styles: [`
 p {
 width:200px;
 background:lightgray;
 margin: 100px auto;
 text-align:center;
 padding:20px;
 font-size:1.5em;
 }
 `],

接下来,让我们在组件上工作。

使它在组件中工作

现在我们必须定义状态属性和方法。 因此,在组件类中,让我们添加:

export class AppComponent {
 state: string = 'small';

 animateMe() {
 this.state = (this.state === 'small' ? 'large' : 'small');
 }

}

当应用加载时,我们将 状态属性到动画的小状态。

然后,当用户单击段落元素时,它将调用 animateMe()方法。在里面,它只是在小到大之间来回切换。

保存,运行 在项目文件夹中的控制台中服务器,并观察它的工作 !

这一点的动画只能在一个 direction 中工作,因为我们只设置了 1个转换属性。 小到 大型 。

要使它在两个方向上工作,你需要改变 to => 大到 小型 <=> 大,这意味着在两个方向上。

保存它,现在两种状态变化都是动画。

在转换过程中添加样式

如上所述,可以将第二个属性添加到 animate函数的动画,该函数接受 样式。函数。让我们来做。

 transition('small <=> large', animate('300ms ease-in', style({
 transform: 'translateY(40px)'
 }))),

如果保存,您将在转换期间看到,段落元素向下移动40个像素。

添加关键帧动画

动画功能的第二个参数也接受 关键帧函数。这允许你创建复杂的基于序列的动画。

 transition('small <=> large', animate('300ms ease-in', keyframes([
 style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
 style({opacity: 1, transform: 'translateY(35px)', offset: 0.5}),
 style({opacity: 1, transform: 'translateY(0)', offset: 1.0})
 ]))),

关键帧函数接受样式函数的array,其中包括动画属性和偏移量。 偏移量指定在动画过程中下一个样式函数开始的点。 0是起始值,1是结束值。

简而言之,这就是动画在Angular中的运作方式。
angular  动画  教程  
相关文章