MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Angular指令与动画：提升用户交互体验

2022-05-144.8k 阅读

Angular指令基础

指令分类

在Angular中，指令主要分为三类：属性指令（Attribute Directives）、结构指令（Structural Directives）和组件（Components），尽管组件从技术上来说也是一种指令，但由于其独特性，通常会单独讨论。

属性指令用于改变元素的外观或行为。例如，NgStyle和NgClass指令，NgStyle允许动态设置元素的CSS样式，NgClass则可以动态添加或移除CSS类。以下是NgStyle的代码示例：

<div [ngStyle]="{ 'background-color': isActive ? 'blue' : 'white' }">
  动态背景颜色
</div>

在上述代码中，isActive是组件类中的一个布尔属性。根据isActive的值，div元素的背景颜色会在蓝色和白色之间切换。

结构指令用于改变DOM的结构。常见的结构指令有NgIf、NgFor和NgSwitch。NgIf根据条件决定是否将一个元素添加到DOM树中：

<div *ngIf="userLoggedIn">
  欢迎，用户!
</div>

如果userLoggedIn为true，则div元素会被添加到DOM中，否则会从DOM中移除。

创建自定义属性指令

创建自定义属性指令可以让我们在项目中复用特定的行为。首先，使用Angular CLI生成指令：

ng generate directive highlight

这会生成一个highlight.directive.ts文件，其基本结构如下：

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @Input() set appHighlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

在上述代码中，我们通过ElementRef获取指令所应用到的DOM元素。@Input()装饰器定义了一个输入属性appHighlight，用于接收要设置的背景颜色。使用时，在模板中这样调用：

<p appHighlight="yellow">这段文字背景会被高亮为黄色</p>

创建自定义结构指令

创建自定义结构指令稍微复杂一些，因为它涉及到对视图容器的操作。假设我们要创建一个Unless指令，功能与NgIf相反：

ng generate directive unless

在生成的unless.directive.ts文件中编写如下代码：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

这里，TemplateRef代表被指令修饰的模板，ViewContainerRef用于管理视图。appUnless输入属性接收一个布尔值，根据该值决定是否创建或清除视图。在模板中使用：

<div *appUnless="isLoading">
  加载完成后显示此内容
</div>

深入Angular动画

动画基础概念

在Angular中，动画是基于Web Animations API构建的，通过定义状态（states）、过渡（transitions）和关键帧（keyframes）来实现。状态表示元素在动画过程中的不同外观，过渡描述了从一个状态到另一个状态的变化过程，关键帧则可以更精细地控制过渡中的各个阶段。

要使用动画，首先需要在app.module.ts中导入BrowserAnimationsModule：

import { BrowserAnimationsModule } from '@angular/platform - browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ]
})
export class AppModule {}

简单动画示例：状态过渡

假设我们有一个按钮，当鼠标悬停时，按钮的背景颜色会从白色变为蓝色，离开时变回白色。首先，在组件的@Component装饰器中定义动画：

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

@Component({
  selector: 'app - button - animation',
  templateUrl: './button - animation.component.html',
  styleUrls: ['./button - animation.component.css'],
  animations: [
    trigger('buttonColor', [
      state('default', style({ backgroundColor: 'white' })),
      state('hover', style({ backgroundColor: 'blue' })),
      transition('default <=> hover', animate('300ms ease - in - out'))
    ])
  ]
})
export class ButtonAnimationComponent {
  buttonState = 'default';

  onMouseEnter() {
    this.buttonState = 'hover';
  }

  onMouseLeave() {
    this.buttonState = 'default';
  }
}

在模板中使用这个动画：

<button [@buttonColor]="buttonState" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
  悬停我
</button>

这里，trigger定义了一个名为buttonColor的动画触发器。state定义了两个状态：default和hover，并分别设置了对应的样式。transition描述了两个状态之间的过渡效果，动画时长为300毫秒，使用ease - in - out缓动函数。

复杂动画：关键帧动画

关键帧动画可以实现更复杂的动画效果。例如，我们创建一个元素，在点击时，它会从原始位置向上移动并旋转，同时透明度逐渐降低。

@Component({
  selector: 'app - complex - animation',
  templateUrl: './complex - animation.component.html',
  styleUrls: ['./complex - animation.component.css'],
  animations: [
    trigger('complexAnimation', [
      state('inactive', style({
        transform: 'translateY(0) rotate(0deg)',
        opacity: 1
      })),
      state('active', style({
        transform: 'translateY(-50px) rotate(360deg)',
        opacity: 0
      })),
      transition('inactive => active', animate('1000ms ease - out', keyframes([
        style({ transform: 'translateY(0) rotate(0deg)', opacity: 1, offset: 0 }),
        style({ transform: 'translateY(-25px) rotate(180deg)', opacity: 0.5, offset: 0.5 }),
        style({ transform: 'translateY(-50px) rotate(360deg)', opacity: 0, offset: 1 })
      ])))
    ])
  ]
})
export class ComplexAnimationComponent {
  animationState = 'inactive';

  toggleAnimation() {
    this.animationState = this.animationState === 'inactive'? 'active' : 'inactive';
  }
}

模板如下：

<div [@complexAnimation]="animationState" (click)="toggleAnimation()">
  点击我触发动画
</div>

在这个例子中，keyframes数组定义了动画过渡过程中的关键帧。offset属性表示每个关键帧在整个动画时长中的位置，从0（开始）到1（结束）。通过设置不同的样式和偏移量，实现了复杂的动画效果。

指令与动画结合

利用指令触发动画

我们可以通过指令来触发动画，从而提升用户交互体验。例如，结合之前创建的highlight属性指令和一个动画，当元素被高亮时，同时触发一个淡入动画。 首先，修改highlight.directive.ts文件，让它可以触发动画：

import { Directive, ElementRef, Input, HostListener } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Directive({
  selector: '[appHighlight]',
  animations: [
    trigger('fadeIn', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      transition('inactive => active', animate('500ms ease - in'))
    ])
  ]
})
export class HighlightDirective {
  animationState = 'inactive';

  constructor(private el: ElementRef) { }

  @Input() set appHighlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
    this.animationState = 'active';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.animationState = 'inactive';
    this.el.nativeElement.style.backgroundColor = 'transparent';
  }
}

在模板中使用：

<p [@fadeIn]="animationState" appHighlight="yellow">
  鼠标悬停高亮并淡入
</p>

这里，当appHighlight属性被设置时，不仅设置了背景颜色，还将动画状态设置为active，触发淡入动画。当鼠标离开时，动画状态变为inactive，元素淡出并恢复背景颜色为透明。

结构指令与动画

结构指令也可以与动画结合，为DOM元素的添加和移除添加动画效果。以NgIf为例，我们可以为元素的显示和隐藏添加动画。 在组件的@Component装饰器中定义动画：

@Component({
  selector: 'app - ngif - animation',
  templateUrl: './ngif - animation.component.html',
  styleUrls: ['./ngif - animation.component.css'],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms ease - in', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('300ms ease - out', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class NgIfAnimationComponent {
  showElement = false;

  toggleElement() {
    this.showElement =!this.showElement;
  }
}

模板如下：

<button (click)="toggleElement()">
  {{showElement? '隐藏' : '显示'}}元素
</button>
<div *ngIf="showElement" [@fadeInOut]>
  带有淡入淡出动画的元素
</div>

在这个例子中，transition(':enter')表示元素进入DOM时的动画，transition(':leave')表示元素离开DOM时的动画。通过这种方式，NgIf指令控制的元素在显示和隐藏时会有淡入淡出的动画效果，提升了用户体验。

动画组与顺序动画

有时候，我们需要同时播放多个动画或者按顺序播放动画。Angular提供了group和sequence来实现这些需求。

假设我们有一个元素，在点击时，它既要改变颜色，又要缩放，同时还需要旋转。可以使用group来同时播放这些动画：

@Component({
  selector: 'app - group - animation',
  templateUrl: './group - animation.component.html',
  styleUrls: ['./group - animation.component.css'],
  animations: [
    trigger('groupAnimations', [
      state('inactive', style({
        backgroundColor: 'white',
        transform:'scale(1) rotate(0deg)'
      })),
      state('active', style({
        backgroundColor: 'blue',
        transform:'scale(1.5) rotate(360deg)'
      })),
      transition('inactive => active', group([
        animate('500ms ease - in - out', style({ backgroundColor: 'blue' })),
        animate('800ms ease - in - out', style({ transform:'scale(1.5) rotate(360deg)' }))
      ]))
    ])
  ]
})
export class GroupAnimationComponent {
  animationState = 'inactive';

  toggleAnimation() {
    this.animationState = this.animationState === 'inactive'? 'active' : 'inactive';
  }
}

模板如下：

<div [@groupAnimations]="animationState" (click)="toggleAnimation()">
  点击触发组合动画
</div>

在上述代码中，group中的两个animate动画会同时播放。

如果希望按顺序播放动画，可以使用sequence：

@Component({
  selector: 'app - sequence - animation',
  templateUrl: './sequence - animation.component.html',
  styleUrls: ['./sequence - animation.component.css'],
  animations: [
    trigger('sequenceAnimations', [
      state('inactive', style({
        backgroundColor: 'white',
        transform:'scale(1) rotate(0deg)'
      })),
      state('active', style({
        backgroundColor: 'blue',
        transform:'scale(1.5) rotate(360deg)'
      })),
      transition('inactive => active', sequence([
        animate('500ms ease - in - out', style({ backgroundColor: 'blue' })),
        animate('800ms ease - in - out', style({ transform:'scale(1.5) rotate(360deg)' }))
      ]))
    ])
  ]
})
export class SequenceAnimationComponent {
  animationState = 'inactive';

  toggleAnimation() {
    this.animationState = this.animationState === 'inactive'? 'active' : 'inactive';
  }
}

模板同样是：

<div [@sequenceAnimations]="animationState" (click)="toggleAnimation()">
  点击触发顺序动画
</div>

这里，先执行改变背景颜色的动画，完成后再执行缩放和旋转的动画。

动画性能优化

硬件加速

在动画中，利用硬件加速可以显著提升性能。对于基于变换（transform）和透明度（opacity）的动画，浏览器通常可以利用GPU进行加速。例如，在定义动画时，尽量使用transform和opacity来实现动画效果，避免频繁重排和重绘。

@Component({
  selector: 'app - hardware - acceleration',
  templateUrl: './hardware - acceleration.component.html',
  styleUrls: ['./hardware - acceleration.component.css'],
  animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translateX(0)'
      })),
      state('out', style({
        transform: 'translateX(100%)'
      })),
      transition('in => out', animate('300ms ease - out')),
      transition('out => in', animate('300ms ease - in'))
    ])
  ]
})
export class HardwareAccelerationComponent {
  state = 'in';

  toggleState() {
    this.state = this.state === 'in'? 'out' : 'in';
  }
}

模板：

<div [@slideInOut]="state" (click)="toggleState()">
  滑动动画（利用硬件加速）
</div>

通过使用transform的translateX属性来实现元素的滑动，浏览器可以利用GPU加速，使动画更加流畅。

减少动画复杂性

虽然复杂的动画效果可能很炫酷，但过多的复杂动画会消耗大量的系统资源，导致性能下降。尽量简化动画，减少关键帧的数量和动画的时长。例如，如果一个动画只需要简单的淡入淡出效果，就不要添加过多不必要的旋转或缩放等复杂效果。

@Component({
  selector: 'app - simple - animation',
  templateUrl: './simple - animation.component.html',
  styleUrls: ['./simple - animation.component.css'],
  animations: [
    trigger('simpleFade', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      transition('inactive => active', animate('300ms ease - in'))
    ])
  ]
})
export class SimpleAnimationComponent {
  animationState = 'inactive';

  activateAnimation() {
    this.animationState = 'active';
  }
}

模板：

<button (click)="activateAnimation()">
  触发简单淡入动画
</button>
<div [@simpleFade]="animationState">
  简单淡入元素
</div>

这个简单的淡入动画只涉及透明度的变化，性能消耗相对较小。

节流与防抖

在处理用户交互触发的动画时，如滚动或点击事件，使用节流（throttle）和防抖（debounce）技术可以避免频繁触发动画，从而提升性能。在Angular中，可以使用rxjs的debounceTime和throttleTime操作符。 假设我们有一个输入框，当用户输入时，会触发一个动画显示搜索结果。为了避免频繁触发动画，我们可以使用debounceTime：

import { Component } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

@Component({
  selector: 'app - debounce - animation',
  templateUrl: './debounce - animation.component.html',
  styleUrls: ['./debounce - animation.component.css']
})
export class DebounceAnimationComponent {
  searchResultsVisible = false;

  constructor() {
    const inputElement = document.getElementById('searchInput') as HTMLInputElement;
    const input$: Observable<string> = fromEvent(inputElement, 'input').pipe(
      map((event: any) => event.target.value),
      debounceTime(300)
    );

    input$.subscribe((value) => {
      if (value) {
        this.searchResultsVisible = true;
        // 这里可以添加动画相关逻辑
      } else {
        this.searchResultsVisible = false;
      }
    });
  }
}

模板：

<input type="text" id="searchInput" placeholder="搜索">
<div *ngIf="searchResultsVisible">
  搜索结果（带有动画）
</div>

在上述代码中，debounceTime(300)表示只有当用户停止输入300毫秒后，才会触发后续的逻辑，避免了用户输入过程中频繁触发动画。

应用场景与最佳实践

导航栏动画

在应用的导航栏中，可以使用动画来提升用户体验。例如，当用户鼠标悬停在导航项上时，导航项可以有一个淡入或缩放的动画效果。

@Component({
  selector: 'app - navigation - animation',
  templateUrl: './navigation - animation.component.html',
  styleUrls: ['./navigation - animation.component.css'],
  animations: [
    trigger('navItemAnimation', [
      state('default', style({
        opacity: 1,
        transform:'scale(1)'
      })),
      state('hover', style({
        opacity: 1.2,
        transform:'scale(1.1)'
      })),
      transition('default <=> hover', animate('200ms ease - in - out'))
    ])
  ]
})
export class NavigationAnimationComponent {
  navItemStates = [];

  constructor() {
    for (let i = 0; i < 5; i++) {
      this.navItemStates.push('default');
    }
  }

  onMouseEnter(index) {
    this.navItemStates[index] = 'hover';
  }

  onMouseLeave(index) {
    this.navItemStates[index] = 'default';
  }
}

模板：

<ul>
  <li *ngFor="let state of navItemStates; let i = index"
      [@navItemAnimation]="state"
      (mouseenter)="onMouseEnter(i)"
      (mouseleave)="onMouseLeave(i)">
    导航项{{i + 1}}
  </li>
</ul>

这样，当用户鼠标悬停在导航项上时，导航项会有轻微的放大和透明度增加的动画，增强了交互感。

模态框动画

模态框在显示和隐藏时添加动画可以让用户体验更加流畅。可以使用NgIf结合动画来实现。

@Component({
  selector: 'app - modal - animation',
  templateUrl: './modal - animation.component.html',
  styleUrls: ['./modal - animation.component.css'],
  animations: [
    trigger('modalAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(-50px)' }),
        animate('300ms ease - in', style({ opacity: 1, transform: 'translateY(0)' }))
      ]),
      transition(':leave', [
        animate('300ms ease - out', style({ opacity: 0, transform: 'translateY(-50px)' }))
      ])
    ])
  ]
})
export class ModalAnimationComponent {
  showModal = false;

  openModal() {
    this.showModal = true;
  }

  closeModal() {
    this.showModal = false;
  }
}

模板：

<button (click)="openModal()">打开模态框</button>
<div *ngIf="showModal" [@modalAnimation] class="modal">
  <div class="modal - content">
    <p>模态框内容</p>
    <button (click)="closeModal()">关闭</button>
  </div>
</div>

这里，模态框在显示时会从上方滑入并淡入，隐藏时会淡出并滑出，提升了用户与模态框的交互体验。

最佳实践总结

  1. 遵循用户体验原则：动画应该增强用户体验，而不是干扰用户。避免使用过于复杂或突兀的动画，确保动画效果与应用的整体风格和功能相匹配。
  2. 性能优先：始终关注动画性能，尽量利用硬件加速，减少动画复杂性，合理使用节流和防抖技术。
  3. 测试与优化：在不同设备和浏览器上测试动画效果，确保兼容性和流畅性。根据测试结果对动画进行优化，以提供最佳的用户体验。

通过合理运用Angular指令与动画，开发者可以为应用添加丰富的交互效果，提升用户体验，打造出更加吸引人的前端应用。同时，遵循性能优化和最佳实践原则，能够确保应用在各种环境下都能高效运行。