Question

是否有人知道如何使用/启用Angular WebApplication中的动画图标，这些图标显示在材料设计文档中：https://material.io/design/iconography/animated-icons.html#usage

Answer 1

有一个可以轻松设置角度动画的库。 https://github.com/filipows/angular-animations

我只是在角度8上使用它来设置喜爱的图标的动画，这非常简单。

此示例将满星变成空星，反之亦然。

Compount：

import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';
@Component({animations: [
    fadeInOnEnterAnimation(),
    fadeOutOnLeaveAnimation()
]})

public toggleFavorite() {
    this.isFavorite = !this.isFavorite;
}

html：

 <div style="display: grid;" id="favoriteContainer" (click)=toggleFavorite() matTooltip="Favorite" >
              <mat-icon style="grid-column: 1;grid-row: 1;" *ngIf="!isFavorite" [@fadeInOnEnter] [@fadeOutOnLeave]>star_border</mat-icon>
              <mat-icon style="grid-column: 1;grid-row: 1;" *ngIf="isFavorite" [@fadeInOnEnter] [@fadeOutOnLeave]>star</mat-icon>
          </div>

Answer 2

您可以使用图标通过组件来实现。实现一个包含图标数组的组件，然后定期交换图标。每个图标代表一个状态/图像。

例如：在数组中使用以下图标，然后每100毫秒交换一次。

更新：

请参阅Animate Font Awesome icons in Angular文章。

从https://stackblitz.com/edit/animated-icons-angular-forked上方分叉

Answer 3

在@Remy 的帮助下，我做了一个工作示例

首先安装这个包npm i angular-animations --save
然后在父模块导入中导入 BrowserAnimationsModule

html文件

<mat-icon matListIcon class="menu-item-icon" *ngIf="themeService.isDark();" [@fadeInOnEnter]>dark_mode</mat-icon>
<mat-icon matListIcon class="menu-item-icon" *ngIf="themeService.isLight();" [@fadeInOnEnter]>light_mode</mat-icon>
<mat-slide-toggle [checked]="themeService.isDark()" (change)="$event.checked ? setDarkTheme() : setLightTheme()"></mat-slide-toggle>

TS文件

import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';

@Component({
  selector: 'app-user-menu',
  templateUrl: './user-menu.component.html',
  styleUrls: ['./user-menu.component.scss'],
  animations: [
    fadeInOnEnterAnimation(),
  ]
})
export class UserMenuComponent implements OnInit, OnDestroy {

 constructor() {}

}

输出

Answer 4

material.io是规范和有关如何进行材料设计的指南， angular material component 是基于这种规范的，但是不显示有关使Google材质图标动画化的任何信息。< / p>

Answer 5

正如其他人所述，必须在“材质图标”站点上构建示例。

但是，我找到了解决此问题的方法，正在寻找有关如何对有角材质图标进行动画处理的指南，对于其他寻求相同角度的人，我也有解决方案。可以自定义默认动画，而不仅仅是360度旋转。

基本上，您可以创建一个在单击或单击诸如按钮之类的父元素时在 mat-icon 之间切换的组件。

先决条件是您具有安装了材质图标的棱角材质应用程序。我使用了 Angular Material 8 。

这是正在工作的Stackblitz https://stackblitz.com/edit/angular-material-prototype-animated-icon

mat-animated-icon.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'mat-animated-icon',
  templateUrl: './mat-animated-icon.component.html',
  styleUrls: ['./mat-animated-icon.component.scss']
})
export class MatAnimatedIconComponent implements OnInit {

  @Input() start: String;
  @Input() end: String;
  @Input() colorStart: String;
  @Input() colorEnd: String;
  @Input() animate: boolean;
  @Input() animateFromParent?: boolean = false;

  constructor() { }

  ngOnInit() {
    console.log(this.colorStart);
    console.log(this.colorEnd);
  }

  toggle() {
    if(!this.animateFromParent) this.animate = !this.animate;
  }

}

mat-animated-icon.component.scss

:host {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';

  /* Rules for sizing the icon. */
  &.md-18 { font-size: 18px; }
  &.md-24 { font-size: 24px; }
  &.md-36 { font-size: 36px; }
  &.md-48 { font-size: 48px; }

  /* Rules for using icons as black on a light background. */
  &.md-dark { 
    color: rgba(0, 0, 0, 0.54);

    &.md-inactive { color: rgba(0, 0, 0, 0.26); }
  }

  /* Rules for using icons as white on a dark background. */
  &.md-light { 
    color: rgba(255, 255, 255, 1);

    &.md-inactive { color: rgba(255, 255, 255, 0.3); }
  }

  .material-icons {
    transition: transform .5s;
    &.animate {
      transform: rotate(360deg);
    }
  }
}

mat-animated-icon.component.html

<mat-icon [ngClass]="{'animate' : animate}" color="{{animate ? colorEnd : colorStart}}" (click)="toggle()">{{animate ? end : start}}</mat-icon>

var.directive.ts

一些辅助指令

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

@Directive({
  selector: '[var]',
  exportAs: 'var'
})
export class VarDirective {

  @Input() var:any;

  constructor() { }

}

正在使用的组件示例

<button (click)="!this.disabled && iconAnimate10.var=!iconAnimate10.var" #iconAnimate10="var" var="'false'" mat-icon-button [disabled]="false" aria-label="Example icon-button with a heart icon">
<mat-animated-icon start="menu" end="close" colorStart="none" colorEnd="none" [animate]="iconAnimate10.var" animateFromParent="true"></mat-animated-icon>

Answer 6

@leonzen，

有一个外部库，可以帮助动画垫图标。请检查以下链接：

Animated Mat Icons- External Library

Angular 4+动画图标

6 个答案: