Angular学习笔记32：Angular动画(1)：一些基础

最新推荐文章于 2024-01-09 13:18:21 发布

wujiayucn

最新推荐文章于 2024-01-09 13:18:21 发布

阅读量1.7k

点赞数 1

分类专栏： # Angular

本文链接：https://blog.csdn.net/wjyyhhxit/article/details/88696024

版权

Angular 专栏收录该内容

99 篇文章 67 订阅

订阅专栏

Angular动画(1)

在项目中，有时候会有给某个元素，或者某个页面增加一些动画，从而使这个元素或者这个页面不会太突兀、不协调，进而增加用户体验，或者将用户的注意力吸引到需要注意的地方。经常看到的动画会涉及多种随时间变化的转换。HTML 元素可以移动、变换颜色、增加或缩小、隐藏或从页面中滑出。而且变化可以同时发生或顺序发生。

Angular中的动画：基于 CSS 功能构建的。

做一个简单的动画

Angular 主要的动画模块是 @angular/animations 和 @angular/platform-browser。

当使用Angular / cli 创建新项目时，这些依赖会自动添加到项目中。

一.引入相关的Module

导入 BrowserAnimationsModule，它能把动画能力引入 Angular 应用的根模块中。

在app.module.ts文件中引入BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  declarations: [
    AppComponent,
    ParentComComponent,
    ChildComComponent,
    PopupComponent,
    InlineStyleComComponent,
    StyleComComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})

二.创建组件

ng g c animationDemo

wujiayudeMacBook-Pro:demo-test wjy$ ng g c animationDemo
CREATE src/app/animation-demo/animation-demo.component.less (0 bytes)
CREATE src/app/animation-demo/animation-demo.component.html (33 bytes)
CREATE src/app/animation-demo/animation-demo.component.spec.ts (678 bytes)
CREATE src/app/animation-demo/animation-demo.component.ts (301 bytes)
UPDATE src/app/app.module.ts (1483 bytes)

三.引入常用的动画功能相关的函数

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

四.添加动画的元数据属性

@Component({
  selector: 'app-animation-demo',
  templateUrl: './animation-demo.component.html',
  styleUrls: ['./animation-demo.component.less'],
  animations: [
    // 定义动画的触发器放在 animations 元数据属性中
  ],
})

五.开始做一个简单的转场动画

在模版文件（HTML文件）中，有一个元素，它有两种状态，第一种状态名称叫做：“isYellow”；第二种状态叫做：“isGreen”,通过一个按钮去控制这个元素在这种个状态的变化。

在“isYellow”这种状态的时候，样式为：长200px；宽200px；背景色黄色；透明度为1；

在“isGreen”这种状态的时候，样式为：长100px；宽100px；背景色绿色；透明度为0.5；

此时可以使用style()函数去控制元素的样式变化；

1.定义“isYellow” 和“isGreen”这两种状态

animations: [
    // 定义动画的触发器放在 animations 元数据属性中
    state('isYellow'),
    state('isGreen')
  ],

注意此时会报错；是因为state()状态函数不止“name”这一个参数，所以会报错；

2.使用style()函数为每个状态增加样式

animations: [
    // 定义动画的触发器放在 animations 元数据属性中
    state('isYellow', style(
      {
        height: '200px',
        width: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      }
    )),
    state('isGreen', style(
      {
        height: '100px',
        width: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      }
    ))
  ],

注意，`style()` 函数中样式的属性必须是小驼峰格式的。

3.设置转场

当一个元素在两种状态之间相互转换的过程中没有使用一些可视化的方式来说明它在发生变化，那将会使页面显特别生硬，突兀。所以需要在两种状态变化之间设置一些过渡的动画，提示用户这个元素在发生变化，使页面不那么生硬，突兀。

在Angular中使用transition() 就可以完成这种过渡的转换，transition()接受两个参数：第一个参数接受一个表达式，它定义两个转场状态之间的方向；第二个参数接受一个 animate() 函数。

animate()说明：使用 animate() 函数来定义长度、延迟和缓动效果，并指定一个样式函数，以定义转场过程中的样式。对于多步骤的动画，还可以使用 animate() 函数来为多步动画定义keyframes() 函数。不过这些定义要放在 animate()函数的第二个参数中。

animate() 函数（作为转场函数的第二个参数）可以接受 timings 和 styles 参数。

timings 参数接受一个由三部分组成的字符串。

animate ('duration delay easing')

第一部分 duration（持续时间）是必须的。这个持续时间可以表示成一个不带引号的纯数字（表示毫秒），或一个带引号的有单位的时间（表示秒数）。比如，0.1 秒的持续时间有如下表示方式：

作为纯数字，毫秒为单位：100

作为字符串，毫秒为单位：'100ms'

作为字符串，秒为单位：'0.1s'

第二个参数 delay 的语法和 duration 一样。比如：

等待 100 毫秒，然后运行 200 毫秒表示为：'0.2s 100ms'

第三个参数 easing控制动画在运行期间如何进行加速和减速。比如 ease-in 表示动画开始时很慢，然后逐渐加速。

等待 100 毫秒，运行 200 毫秒。按照减速曲线运动，快速启动并逐渐减速，直到静止：'0.2s 100ms ease-out'

运行 200 毫秒，不等待。按照标准曲线运动，开始很慢，中间加速，最后逐渐减速：'0.2s ease-in-out'

立即开始，运行 200 毫秒。按照加速曲线运动，开始很慢，最后达到全速：'0.2s ease-in'

（以上摘自Angular 官方文档）

关于animate()函数的第三个参数，可以参考：https://easings.net/zh-cn；

设置状态之间转换的时间

animations: [
    // 定义动画的触发器放在 animations 元数据属性中
    state('isYellow', style(
      {
        height: '200px',
        width: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      }
    )),
    state('isGreen', style(
      {
        height: '100px',
        width: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      }
    )),
    transition('isYellow => isGreen', animate('1s')),
    transition('isGreen => isYellow', animate('2s')),
  ],

在这里，我们设置了：‘isYellow’状态向‘isGreen’状态转场动画时长：1s;‘isGreen’状态向‘isYellow’状态转场动画时长：2s;

`注意：=>` 操作符表示单向转场，而 `<=>` 表示双向转场；

4.触发动画

动画需要触发器，从而知道动画该在何时开始，trigger()函数会把一些状态和转场组合在一下，并命名这个动画名称，从而就可以在HTML模版文件中的元素上使用了。trigger() 函数描述了监听变化时要使用的触发器名称。当这个触发器名称所绑定的值发生了变化时，触发器就会启动它所定义的操作。

animations: [
    // 定义动画的触发器放在 animations 元数据属性中
    trigger('stateChange', [
      state('isYellow', style(
        {
          height: '200px',
          width: '200px',
          opacity: 1,
          backgroundColor: 'yellow'
        }
      )),
      state('isGreen', style(
        {
          height: '100px',
          width: '100px',
          opacity: 0.5,
          backgroundColor: 'green'
        }
      )),
      transition('isYellow => isGreen', animate('1s')),
      transition('isGreen => isYellow', animate('2s')),
    ])
  ],

5.绑定在模版元素上

在这里定一个button，并绑定一个点击事件，来改变触发器监听的值。

模版文件如下：

<div [@stateChange]="isChange?'isYellow':'isGreen'">
  <p>
    Angular学习笔记
  </p>
</div>

<button nz-button (click)="handleChange()">改变状态</button>

类文件：

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

@Component({
  selector: 'app-animation-demo',
  templateUrl: './animation-demo.component.html',
  styleUrls: ['./animation-demo.component.less'],
  animations: [
    // 定义动画的触发器放在 animations 元数据属性中
    trigger('stateChange', [
      state('isYellow', style(
        {
          height: '200px',
          width: '200px',
          opacity: 1,
          backgroundColor: 'yellow'
        }
      )),
      state('isGreen', style(
        {
          height: '100px',
          width: '100px',
          opacity: 0.5,
          backgroundColor: 'green'
        }
      )),
      transition('isYellow => isGreen', animate('1s')),
      transition('isGreen => isYellow', animate('2s')),
    ])
  ],
})
export class AnimationDemoComponent implements OnInit {
  public isChange = false;

  constructor() {
  }

  ngOnInit() {
  }

  public handleChange(): void {
    this.isChange = !this.isChange;
  }

}

运行，打开浏览器可以看到如下效果：

PS：为了截取上面这个动图；推荐一个截取动图的软件：LICEcap

下载地址：https://www.cockos.com/licecap/

软件截图如下：

wujiayucn

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Angular学习笔记32：Angular动画(1)：一些基础

Angular动画(1)在项目中，有时候会有给某个元素，或者某个页面增加一些动画，从而使这个元素或者这个页面不会太突兀、不协调，进而增加用户体验，或者将用户的注意力吸引到需要注意的地方。经常看到的动画会涉及多种随时间变化的转换。HTML 元素可以移动、变换颜色、增加或缩小、隐藏或从页面中滑出。而且变化可以同时发生或顺序发生。Angular中的动画：基于 CSS 功能构建的。做一个简单...
复制链接

扫一扫