angular-icon-morphing
Version:
Angular library to animate icons with smooth morphing animation
44 lines • 5.83 kB
JavaScript
import { Component, ContentChild, ElementRef, Input, ViewChild } from '@angular/core';
export class IconComponent {
constructor() {
this.easing = 'linear';
this.duration = 250;
this.containerId = 'ic-' + Math.floor(Math.random() * 1000000);
}
ngOnInit() {
}
ngAfterContentInit() {
this.startIcon.nativeElement.id = 'startIcon';
this.endIcon.nativeElement.id = 'endIcon';
this.iconContainer.nativeElement.id = this.containerId;
this.svgMorpheus = new SVGMorpheus('#' + this.containerId + ' svg', { iconId: 'startIcon' });
}
ngOnChanges(changes) {
if (changes.active) {
this.doTransition();
}
}
doTransition() {
if (this.svgMorpheus) {
const target = (!this.active) ? 'startIcon' : 'endIcon';
this.svgMorpheus.to(target, { duration: this.duration, easing: this.easing, rotation: 'none' }, null);
}
}
}
IconComponent.decorators = [
{ type: Component, args: [{
selector: 'aim-icon',
template: "<div #iconContainer>\r\n <ng-content></ng-content>\r\n</div>",
styles: [".hidden{display:none}"]
},] }
];
IconComponent.ctorParameters = () => [];
IconComponent.propDecorators = {
startIcon: [{ type: ContentChild, args: ['startIcon', { static: true },] }],
endIcon: [{ type: ContentChild, args: ['endIcon', { static: true },] }],
iconContainer: [{ type: ViewChild, args: ['iconContainer', { static: true },] }],
active: [{ type: Input }],
easing: [{ type: Input }],
duration: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWljb24tbW9ycGhpbmcvc3JjL2xpYi9pY29uL2ljb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFvQyxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFTMUksTUFBTSxPQUFPLGFBQWE7SUFFeEI7UUFRUyxXQUFNLEdBQUcsUUFBUSxDQUFDO1FBQ2xCLGFBQVEsR0FBRyxHQUFHLENBQUM7UUFLakIsZ0JBQVcsR0FBRyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsT0FBTyxDQUFDLENBQUM7SUFkakQsQ0FBQztJQWdCakIsUUFBUTtJQUNSLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsRUFBRSxHQUFHLFdBQVcsQ0FBQztRQUM5QyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxFQUFFLEdBQUcsU0FBUyxDQUFDO1FBQzFDLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO1FBQ3ZELElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxXQUFXLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxXQUFXLEdBQUcsTUFBTSxFQUFFLEVBQUMsTUFBTSxFQUFFLFdBQVcsRUFBQyxDQUFDLENBQUM7SUFDN0YsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1NBQ3JCO0lBRUgsQ0FBQztJQUNELFlBQVk7UUFDVixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsTUFBTSxNQUFNLEdBQVcsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7WUFDaEUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsTUFBTSxFQUFFLEVBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxFQUFFLElBQUksQ0FBQyxDQUFDO1NBQ3JHO0lBQ0gsQ0FBQzs7O1lBNUNGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsVUFBVTtnQkFDcEIsMkVBQW9DOzthQUVyQzs7Ozt3QkFLRSxZQUFZLFNBQUMsV0FBVyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtzQkFDMUMsWUFBWSxTQUFDLFNBQVMsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7NEJBRXhDLFNBQVMsU0FBQyxlQUFlLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO3FCQUUzQyxLQUFLO3FCQUNMLEtBQUs7dUJBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyQ29udGVudEluaXQsIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFbGVtZW50UmVmLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIFNpbXBsZUNoYW5nZXMsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuZGVjbGFyZSB2YXIgU1ZHTW9ycGhldXM6IGFueTtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYWltLWljb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9pY29uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9pY29uLmNvbXBvbmVudC5jc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgSWNvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJDb250ZW50SW5pdCwgT25DaGFuZ2VzIHtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuICAvLyBJY29ucyBjaGlsZHJlblxyXG4gIEBDb250ZW50Q2hpbGQoJ3N0YXJ0SWNvbicsIHsgc3RhdGljOiB0cnVlIH0pIHN0YXJ0SWNvbjogRWxlbWVudFJlZjtcclxuICBAQ29udGVudENoaWxkKCdlbmRJY29uJywgeyBzdGF0aWM6IHRydWUgfSkgZW5kSWNvbjogRWxlbWVudFJlZjtcclxuXHJcbiAgQFZpZXdDaGlsZCgnaWNvbkNvbnRhaW5lcicsIHsgc3RhdGljOiB0cnVlIH0pIGljb25Db250YWluZXI6IEVsZW1lbnRSZWY7XHJcblxyXG4gIEBJbnB1dCgpIGFjdGl2ZTogYm9vbGVhbjtcclxuICBASW5wdXQoKSBlYXNpbmcgPSAnbGluZWFyJztcclxuICBASW5wdXQoKSBkdXJhdGlvbiA9IDI1MDtcclxuXHJcbiAgLy8gbW9ycGhldXMgdmFyaWFibGVcclxuICBwdWJsaWMgc3ZnTW9ycGhldXM6IGFueTtcclxuXHJcbiAgcHVibGljIGNvbnRhaW5lcklkID0gJ2ljLScgKyBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAxMDAwMDAwKTtcclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XHJcbiAgICB0aGlzLnN0YXJ0SWNvbi5uYXRpdmVFbGVtZW50LmlkID0gJ3N0YXJ0SWNvbic7XHJcbiAgICB0aGlzLmVuZEljb24ubmF0aXZlRWxlbWVudC5pZCA9ICdlbmRJY29uJztcclxuICAgIHRoaXMuaWNvbkNvbnRhaW5lci5uYXRpdmVFbGVtZW50LmlkID0gdGhpcy5jb250YWluZXJJZDtcclxuICAgIHRoaXMuc3ZnTW9ycGhldXMgPSBuZXcgU1ZHTW9ycGhldXMoJyMnICsgdGhpcy5jb250YWluZXJJZCArICcgc3ZnJywge2ljb25JZDogJ3N0YXJ0SWNvbid9KTtcclxuICB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgIGlmIChjaGFuZ2VzLmFjdGl2ZSkge1xyXG4gICAgICB0aGlzLmRvVHJhbnNpdGlvbigpO1xyXG4gICAgfVxyXG5cclxuICB9XHJcbiAgZG9UcmFuc2l0aW9uKCkge1xyXG4gICAgaWYgKHRoaXMuc3ZnTW9ycGhldXMpIHtcclxuICAgICAgY29uc3QgdGFyZ2V0OiBzdHJpbmcgPSAoIXRoaXMuYWN0aXZlKSA/ICdzdGFydEljb24nIDogJ2VuZEljb24nO1xyXG4gICAgICB0aGlzLnN2Z01vcnBoZXVzLnRvKHRhcmdldCwge2R1cmF0aW9uOiB0aGlzLmR1cmF0aW9uLCBlYXNpbmc6IHRoaXMuZWFzaW5nLCByb3RhdGlvbjogJ25vbmUnfSwgbnVsbCk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==