圆形指示器使整个页面颤动 - TypeScript

在web应用中，我们经常需要使用各种指示器来表示页面的状态/进度，其中最常见的就是圆形指示器。现在我们将学习使用TypeScript创建一个圆形指示器，并将其与页面颤动效果结合，从而提高应用的用户体验。

准备工作

在开始之前，我们需要确保已经安装了TypeScript和Angular。如果你还没有安装，请遵循以下步骤：

1. 安装Node.js: https://nodejs.org/
2. 安装TypeScript: 在命令行中运行 npm install -g typescript
3. 安装Angular: 在命令行中运行 npm install -g @angular/cli

创建一个Angular应用

现在，我们需要创建一个Angular应用，如果你已经有了一个Angular应用，请跳过这一步。

在命令行中运行以下命令：

ng new my-app
cd my-app
ng serve

该应用将在 localhost:4200 上启动。

创建一个圆形指示器

我们可以使用 ngx-spinner 库创建一个圆形指示器。

先安装 ngx-spinner ：在命令行中运行 npm install ngx-spinner --save

然后在 app.module.ts 文件中导入 NgxSpinnerModule 模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxSpinnerModule } from 'ngx-spinner';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxSpinnerModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

现在我们已经准备好在应用中使用 ngx-spinner 。在我们的组件中，我们需要使用 NgxSpinnerService 服务启动/停止指示器。

import { Component } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private spinner: NgxSpinnerService) {}

  showSpinner() {
    this.spinner.show();
  }

  hideSpinner() {
    this.spinner.hide();
  }
}

同时，我们还需要在模板中定义一个按钮来启动/停止指示器。

<button (click)="showSpinner()">启动指示器</button>
<button (click)="hideSpinner()">停止指示器</button>

这就是一个简单的圆形指示器了。现在我们想为它添加一些动画效果。

在指示器上添加颤动效果

我们将使用CSS3动画来为指示器添加颤动效果。

首先，在 styles.css 文件中添加以下代码：

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

然后，在组件中我们需要使用 HostBinding 装饰器和 NgxSpinnerService 服务来启动/停止颤动效果。

import { Component, HostBinding } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @HostBinding('class.shake') shake = false;

  constructor(private spinner: NgxSpinnerService) {}

  showSpinner() {
    this.spinner.show();
    this.shake = true;
  }

  hideSpinner() {
    this.spinner.hide();
    this.shake = false;
  }
}

最后，在模板中为指示器添加 shake 类即可。

<ngx-spinner bdColor="rgba(0, 0, 0, 0.8)" color="#fff" type="ball-scale-multiple" [fullScreen]="true" [show]="false" class="shake"></ngx-spinner>

现在，我们的应用中的圆形指示器已经具有了颤动效果，让我们快快试试吧！

总结

通过使用 ngx-spinner 库和CSS3动画，我们可以在Angular应用中轻松创建一个具有颤动效果的圆形指示器。这不仅使应用更具吸引力，而且还提高了用户体验。

参考资料

• ngx-spinner
• CSS3动画