web-dev-qa-db-ja.com

Angular 4+アニメーションアイコン

Angularマテリアルデザインドキュメントに示されているWebApplicationのアニメーションアイコンを使用/有効にする方法を知っている人はいますか： https://material.io/ design/iconography/animated-icons.html＃usage

angularmaterial-designangular-material2
12
Leonzen

他の人が述べたように、マテリアルアイコンサイトの例を構築する必要があります。

しかし、私はこの質問への道を見つけて、angularマテリアルアイコンをアニメーション化する方法に関するガイドを探し、同じものを探している他の人には解決策があります。デフォルトのアニメーションは他の360度回転するだけではありません。

基本的に、クリックしたとき、またはボタンなどの親要素がクリックしたときにmat-iconの間でスワップするコンポーネントを作成できます。

前提条件は、angularマテリアルアイコンがインストールされたマテリアルアプリケーションです。私は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>
3
thebaron24

アイコンを使用してコンポーネントを介して実装できます。アイコンの配列を含むコンポーネントを実装し、アイコンを定期的に交換します。各アイコンは状態/画像を表します。

例：配列内で次のアイコンを使用し、100msごとに交換します。

更新：

AngularのAnimate Font Awesomeアイコン の記事を参照してください。

上から分岐 https://stackblitz.com/edit/animated-icons-angular-forked

1
nayakam