ng-cw-v12
Version:
Angular UI component library
152 lines (147 loc) • 6.81 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
class PulsatingDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncDuration = 1500; // 一次动画时长，ms
this.ncColor = '#0096ff'; // 默认浅蓝色光晕
this.ncSize = '8px'; // 最大光晕宽度
this.ncStopTime = 0; // 停止动画时间，ms，0表示不停止
this.ncEnabled = true; // 是否启用脉冲动画
this.ncEnabledChange = new EventEmitter(); // 双向绑定输出事件
this.shouldStop = false;
this.isInitialized = false;
// 为每个实例生成唯一的动画名称
this.animationName = `ncPulse_${Math.random().toString(36).substring(2, 11)}`;
}
ngOnInit() {
this.createPulsatingContainer();
this.isInitialized = true;
if (this.ncEnabled) {
this.startAnimation();
}
}
ngOnChanges(changes) {
if (this.isInitialized && changes['ncEnabled']) {
if (this.ncEnabled) {
this.startAnimation();
}
else {
this.stopAnimation();
}
}
}
ngOnDestroy() {
if (this.stopTimer) {
clearTimeout(this.stopTimer);
}
}
createPulsatingContainer() {
this.pulsatingContainer = this.renderer.createElement('div');
this.renderer.addClass(this.pulsatingContainer, 'pulsating-container');
// 设置基础样式
this.renderer.setStyle(this.pulsatingContainer, 'position', 'absolute');
this.renderer.setStyle(this.pulsatingContainer, 'inset', '0');
this.renderer.setStyle(this.pulsatingContainer, 'borderRadius', 'inherit');
this.renderer.setStyle(this.pulsatingContainer, 'pointerEvents', 'none');
this.renderer.setStyle(this.pulsatingContainer, 'zIndex', '-1');
const elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 添加关键帧动画样式
this.styleElement = this.renderer.createElement('style');
const keyframes = `
${this.animationName} {
0% {
box-shadow: 0 0 0 0 ${this.ncColor};
}
50% {
box-shadow: 0 0 0 ${this.ncSize} ${this.ncColor};
opacity: 0.5;
}
100% {
box-shadow: 0 0 0 0 ${this.ncColor};
}
}
`;
this.renderer.appendChild(this.styleElement, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, this.styleElement);
// 将容器添加到宿主元素中
this.renderer.appendChild(this.el.nativeElement, this.pulsatingContainer);
// 监听动画迭代事件，用于平滑停止
this.renderer.listen(this.pulsatingContainer, 'animationiteration', () => {
if (this.shouldStop) {
this.renderer.setStyle(this.pulsatingContainer, 'animation', 'none');
this.shouldStop = false;
}
});
}
startAnimation() {
if (!this.pulsatingContainer)
return;
this.shouldStop = false;
this.renderer.setStyle(this.pulsatingContainer, 'animation', `${this.animationName} ${this.ncDuration}ms ease-in-out infinite`);
// 如果设置了停止时间，则在指定时间后标记需要停止
if (this.ncStopTime > 0) {
this.stopTimer = setTimeout(() => {
this.stopAnimation();
// 当因为 ncStopTime 停止动画时，更新 ncEnabled 值并发出事件
this.ncEnabled = false;
this.ncEnabledChange.emit(false);
}, this.ncStopTime);
}
}
stopAnimation() {
if (!this.pulsatingContainer)
return;
if (this.stopTimer) {
clearTimeout(this.stopTimer);
this.stopTimer = null;
}
this.shouldStop = true;
}
}
PulsatingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PulsatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
PulsatingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: PulsatingDirective, selector: "[ncPulsating]", inputs: { ncDuration: "ncDuration", ncColor: "ncColor", ncSize: "ncSize", ncStopTime: "ncStopTime", ncEnabled: "ncEnabled" }, outputs: { ncEnabledChange: "ncEnabledChange" }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PulsatingDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncPulsating]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncDuration: [{
type: Input
}], ncColor: [{
type: Input
}], ncSize: [{
type: Input
}], ncStopTime: [{
type: Input
}], ncEnabled: [{
type: Input
}], ncEnabledChange: [{
type: Output
}] } });
class NcPulsatingModule {
}
NcPulsatingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcPulsatingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, declarations: [PulsatingDirective], exports: [PulsatingDirective] });
NcPulsatingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcPulsatingModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PulsatingDirective
],
imports: [],
exports: [
PulsatingDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NcPulsatingModule, PulsatingDirective };
//# sourceMappingURL=ng-cw-v12-pulsating.js.map