您现在的位置是:首页 >其他 >Angular学习笔记:动画网站首页其他

Angular学习笔记:动画

大苏打seven 2024-07-04 11:18:05
简介Angular学习笔记:动画

本文是自己的学习笔记,主要参考资料如下。

- Angular官方文档:https://angular.io/guide/animations



1、前置工作

这篇文章介绍如何用Angular实现动画效果,比如划入划出,缩小变大。

1.1、导入依赖

先要在app.module.tsimport对应的包BrowserAnimationsModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


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

2、代码部分

这部分是一个示例,演示点击一个button后,一个div平滑地变大变小同时改变颜色。
在这里插入图片描述

2.1、有关的imports

在想要有动画效果的组件中引入下面与动画细节相关的组件,

这些组件与动画的具体效果有关,比如一个元素变化前的样子和变化后的样子,元素从A点移到B点花多少时间,恒速度移过去还是速度逐渐提升移过去,等等。

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



2.2、定义触发条件(trigger)

关于动画的部分都是定义在@Component注解中,我新建一个Component来写示例代码ng g component open-close

定义一个trigger,里面是动画的所有细节,同时我们需要为这个trigger命名,名字必须是驼峰或者中间用破折号隔开,比如backgroundColor或者background-Color

命名是需要和元素绑定,元素会通过名字知道需要执行什么动画。

可以看下面这个示例,命名了一个动画叫openClose,动画细节代码暂时省略。

@Component({
  selector: 'app-open-close',
  templateUrl: './open-close.component.html',
  styleUrls: ['./open-close.component.css'],
  animations: [
    trigger('openClose', [
      // ...
    ]),
  ]
})
export class OpenCloseComponent implements OnInit {
// ···
}

2.3、定义状态(state)

很多动画都可以看成从一个状态到另一个状态,或者说从状态1到状态2再到状态3,总之最小可以拆分成两个状态的变化。

比如从A点移到B点,高度从400缩小到300,从紫色变成红色等等都属于状态变化,当然这些可以一起发生。

在本示例中,div的高度将缩小,并且从黄色变成紫色;也会反过来。

所以下面的代码在trigger中定义两个状态,分别命名为openclose。其中也描述了两个状态的style。

@Component({
  selector: 'app-open-close',
  templateUrl: './open-close.component.html',
  styleUrls: ['./open-close.component.css'],
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      state('closed', style({
        height: '100px',
        opacity: 0.8, 
        backgroundColor: 'blue'
      }))
    ]),
  ]
})
export class OpenCloseComponent implements OnInit {
// ...
}



2.4、定义过渡细节(transition)

光定义了状态还不够,因为动画需要平滑过渡才能有更好的用户体验。从状态1刷地一下直接变到状态2就感受不到动画效果,所以我们还需要定义过渡细节。

在下面的示例中,定义了两个过渡细节,一个是从open => closed,这个状态变化过程花费1s;另一个是从closed => open,花费0.5s。

@Component({
  selector: 'app-open-close',
  templateUrl: './open-close.component.html',
  styleUrls: ['./open-close.component.css'],
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.8, 
        backgroundColor: 'blue'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ]
})
export class OpenCloseComponent implements OnInit {
// ...
}

2.5、动画绑定元素

我们可以在元素的属性中加上[@triggerName]="expression? state1: state2"

其中triggerName就是之前定义的trigger,这里应该写成[@openTrigger]

等号后面的表达式则是决定元素的状态变化。在这个示例中是通过按钮实现状态转变。

之前我们定义了动画的两个状态,分别叫openclosed,点击按钮,状态从open转到closed;再点击按钮,状态从closed转到open

所以这里的expression可以写成[@openClose]="isOpen ? 'open' : 'closed'" ,其中isOpen是变量,可以通过按钮点击事件改编。

下面是html的代码

<nav>
    <button type="button" (click)="toggle()">Toggle Open/Close</button>
</nav>

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
	<p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

在这里插入图片描述

下面是完整的ts代码。

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

@Component({
  selector: 'app-open-close',
  templateUrl: './open-close.component.html',
  styleUrls: ['./open-close.component.css'],
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.8, 
        backgroundColor: 'blue'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ]
})
export class OpenCloseComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }

}

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。