Кто-нибудь знает, как использовать/включить анимированные значки в Angular WebApplication, которые показаны в документации по дизайну материала: https://material.io/design/iconography/animated-icons.html#usage
Угловые 4+ анимированные иконки
Ответ 1
Вы можете реализовать через компонент с помощью значков. Внесите компонент, который содержит массив для значков, затем поменяйте регулярный интервал значков. Каждый значок представляет состояние/изображение.
Например: используйте следующие значки в массиве, затем поменяйте их каждые 100 мс.
- https://fontawesome.com/v4.7.0/icon/pencil
- https://fontawesome.com/v4.7.0/icon/pencil-square-o
- https://fontawesome.com/v4.7.0/icon/pencil-square
Обновить:
См. " Анимация шрифта Удивительные значки" в Угловой статье.
Свернуто сверху https://stackblitz.com/edit/animated-icons-angular-forked
Ответ 2
material.io - это спецификация и руководство, как сделать конструкцию материалов, компонент углового материала построен на этом типе спецификации, но не показывает никакой информации об анимационной значке материала google.
Ответ 3
Как уже отмечалось, примеры на сайтах Material Icon должны быть построены.
Тем не менее, я нашел свой путь к этому вопросу, ища руководство о том, как анимировать иконки угловых материалов, и для тех, кто ищет то же самое, у меня есть решение. Анимация по умолчанию может быть настроена на что-то иное, чем просто поворот на 360 градусов.
По сути, вы можете создать компонент, который переключается между значком mat при нажатии или при нажатии родительского элемента, такого как кнопка.
Предварительные условия: у вас есть угловое приложение с установленными значками материалов. Я использовал угловой материал 8.
Вот работающий Stackblitz https://stackblitz.com/edit/angular-material-prototype-animated-icon
мат-анимированный-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;
}
}
мат-анимированный-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);
}
}
}
мат-анимированный-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>
Ответ 4
@leonzen,
есть внешняя библиотека, которая помогает анимировать матовые значки. Пожалуйста, проверьте эту ссылку ниже: