网站首页 » 前端开发 » Angular 2+ » Angular 2+ 动画
上一篇:
下一篇:

Angular 2+ 动画

前言

Angular 2+ 动画可以让你写出来的 Angular 2+ 代码显示效果不再那么地生硬,它可以让你在对元素切换时添加一些动画,这不仅仅是好看,因为它确确实实提升了用户体验,让用户感觉这个页面科技感满满的。

基本用法

入门示例

要想使用 Angular 2+ 中的动画效果,你必需做一些准备:

在app.module.ts 中引入 animations 模块

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来我们就要在将要使用动画的页面的 app.component.ts 文件中引入一系列相关的东西,引入完后,就可以在 app.component.ts 文件中编写效果了:

app.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('eleState', [
      state('inactive', style({
        backgroundColor: '#efefef',
        transform: 'rotate(0deg)'
      })),
      state('active', style({
        backgroundColor: '#5cb85c',
        transform: 'rotate(270deg)'
      })),
      transition('inactive => active', animate('200ms ease-in')),
      transition('active => inactive', animate('200ms ease-out'))
    ])
  ]
})

export class AppComponent {
  currentState = "active";
  change() {
    this.currentState = this.currentState === "active" ? "inactive" : "active";
  }
}

然后我们在 app.component.html 中使用它:

app.component.html
<div>
  <div class="animate-box" [@eleState]="currentState">动我试试</div>
  <p>
    <button (click)="change()">点我</button>
  </p>
</div>

@eleState 就是我们在 app.component.ts 中定义的 trigger 名,同时我们在页面中添加了一个按钮来触发动画状态之间的切换。

到此我们就实现了一个简单的动画效果,但我们还需要考虑另外一些情况:

1、多个转场都有同样的时间线配置,此时我们可以把两个 transition 合并,就像下面这样:

transition('inactive => active, active => inactive', animate('200ms ease-in'))

2、两个方向都使用相同的时间线,我们就可以写得更加简洁:

 transition('inactive <=> active', animate('200ms ease-in'))

3、有时希望一些样式只在动画期间生效,但在结束后并不保留它们。这时可以把这些样式内联在transition中进行定义。

app.component.ts
  animations: [
    trigger('eleState', [
      transition('inactive <=> active', [
        style({
          backgroundColor: '#efefef',
          transform: 'rotate(0deg)'
        }),
        animate('11200ms ease-in', style({
          backgroundColor: '#5cb85c',
          transform: 'rotate(270deg)'
        })),
      ])
    ])
  ]

*(通配符)状态

*(通配符)状态匹配任何动画状态。

  • 当该元素的状态从active变成任何其它状态时,active => *转场都会生效。
  • 当在任意两个状态之间切换时,* => *转场都会生效。

void状态

有一种叫做 void 的特殊状态,它可以应用在任何动画中。它表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。 void状态在定义“进场”和“离场”的动画时会非常有用。比如当一个元素离开视图时,* => void 转场就会生效,而不管它在离场以前是什么状态。我们看看下面这个例子(修改 app.component.ts 和 app.component.html):

app.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('eleState', [
      transition('* => void', [
        style({ height: '*' }),
        animate('250ms', style({ height: 0 }))
      ]),
      transition('void => *', [
        style({ height: 0 }),
        animate('250ms', style({ height: 100 }))
      ])
    ])
  ]
})

export class AppComponent {
  currentState = "active";
  show = true;
  change() {
    this.currentState = this.currentState === "active" ? "inactive" : "active";
    this.show = this.show === true ? false : true;
  }
}
app.component.html
<div>
  <div class="animate-box" [@eleState]="currentState" *ngIf="show">动我试试</div>
  <p>
    <button (click)="change()">点我</button>
  </p>
</div>
app.component.css
.animate-box {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #5cb85c;
  overflow: hidden;
}

为了让这个示例看起来更加地完美,我们给元素添加了一些样式。app.component.html 中只是多添加了一个 *ngIf 结构指令来实现元素的进场和退场。

动画时间线

每一个动画转场效果都会有三种时间线属性可以调整:持续时间(duration)、延迟(delay)和缓动(easing)函数。它们被合并到了一个单独的转场时间线字符串。

持续时间

持续时间控制动画从开始到结束要花多长时间。可以用三种方式定义持续时间:

  • 作为一个普通数字,以毫秒为单位,如:100
  • 作为一个字符串,以毫秒为单位,如:’100ms’
  • 作为一个字符串,以秒为单位,如:’0.1s’

延迟

延迟控制的是在动画已经触发但尚未真正开始转场之前要等待多久。可以把它添加到字符串中的持续时间后面,它的选项格式也跟持续时间是一样的:

等待100毫秒,然后运行200毫秒:’0.2s 100ms’。

缓动函数

缓动函数用于控制动画在运行期间如何加速和减速。

  • 等待100毫秒,然后运行200毫秒,并且带缓动:’0.2s 100ms ease-out’
  • 运行200毫秒,并且带缓动:’0.2s ease-in-out’

基于关键帧(Keyframes)的多阶段动画

app.component.html
<div>
  <div *ngIf="show" (@eleState.start)="animationCallBack('animationStart')" (@eleState.done)="animationCallBack('animationEnd')"
    class="animate-box" [@eleState]="'active'">动我试试</div>
  <p>
    <button (click)="change()">点我</button>
  </p>
</div>
app.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

  animations: [
    trigger('eleState', [
      state('active', style({ transform: 'translateX(0)' })),
      transition('void => *', [
        animate(300, keyframes([
          style({ borderRadius: '50%', opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
          style({ borderRadius: '30%', opacity: 1, transform: 'translateX(15px)', offset: 0.3 }),
          style({ borderRadius: '0%', opacity: 1, transform: 'translateX(0)', offset: 1.0 })
        ]))
      ]),
      transition('* => void', [
        animate(300, keyframes([
          style({ borderRadius: '50%', opacity: 1, transform: 'translateX(0)', offset: 0 }),
          style({ borderRadius: '30%', opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }),
          style({ borderRadius: '0%', opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
        ]))
      ])
    ])
  ]
})

export class AppComponent {
  show = true;
  change() {
    this.show = this.show === true ? false : true;
  }
  animationCallBack(where) {
    console.log(where);
  }
}

示例代码基本跟官方的差不多,但也有稍作修改的地方。这个 关键帧动画用得好的话,效果一定会很惊艳。

并行动画组(Group)

app.component.html
<div>
  <div *ngIf="show" (@eleState.start)="animationCallBack('animationStart')" (@eleState.done)="animationCallBack('animationEnd')"
    class="animate-box" [@eleState]="'active'">动我试试</div>
  <p>
    <button (click)="change()">点我</button>
  </p>
</div>

html 不用动,只需要修改.ts 文件

app.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition, group } from '@angular/animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

  animations: [
    trigger('eleState', [
      state('active', style({ width: 120, transform: 'translateX(0)', opacity: 1 })),
      transition('void => *', [
        style({ width: 10, transform: 'translateX(50px)', opacity: 0 }),
        group([
          animate('0.3s 0.1s ease', style({
            transform: 'translate(0)',
            width: 100
          })),
          animate('0.3s ease', style({
            opacity: 1
          }))
        ])
      ]),
      transition('* => void', [
        group([
          animate('0.3s ease', style({
            transform: 'translateZ(0)',
            width: 1000
          })),
          animate('0.3s 0.2s ease', style({
            opacity: 0
          }))
        ])
      ])
    ])
  ]
})

export class AppComponent {
  show = true;
  change() {
    this.show = this.show === true ? false : true;
  }
  animationCallBack(where) {
    console.log(where);
  }
}

并行动画组可以让我们对使用相同参数的效果进行归类。让代码复用性更加强,真是方便你我们,简洁了代码,又让我更爱它。

动画回调

当动画开始和结束时,会触发一个回调。我们可以像下面这样用它:

<div>
  <div (@eleState.start)="animationCallBack('animationStart')" (@eleState.done)="animationCallBack('animationDone')" class="animate-box"
    [@eleState]="currentState">动我试试</div>
  <p>
    <button (click)="change()">点我</button>
  </p>
</div>

上面的大多数示例基本都是参考官方的,在学习 Angular 2+ 动画时,真是被它 强大的效果惊呆了。上面的示例中进场和离场效果以及关键帧效果会用得比较多,并且非常的实用,几行代码就可以让页面如丝般顺滑,绚丽多姿,惊天动地,所以你值得拥有。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-core-knowledge-animations/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END