ng-cw-v12
Version:
Angular UI component library
199 lines (190 loc) • 11.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/sparkles-text', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["sparkles-text"] = {}), global.ng.core, global.ng.common));
})(this, (function (exports, i0, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var SparklesTextComponent = /** @class */ (function () {
function SparklesTextComponent() {
/** 展示的文本内容 */
this._text = '';
/** 闪烁点的数量 */
this.ncCount = 10;
/** 闪烁点的颜色数组 */
this.ncColors = ['#9E7AFF', '#FE8BBB', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'];
/** 闪烁循环时间（秒） */
this.ncDuration = 0.8;
/** 闪烁点的最大尺寸 */
this.ncSize = 21;
this.sparkles = [];
}
Object.defineProperty(SparklesTextComponent.prototype, "ncText", {
get: function () {
return this._text;
},
set: function (value) {
var _this = this;
this._text = value;
this.cleanup();
setTimeout(function () {
_this.initializeSparkles();
_this.startAnimation();
});
},
enumerable: false,
configurable: true
});
SparklesTextComponent.prototype.ngOnInit = function () { };
SparklesTextComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
SparklesTextComponent.prototype.initializeSparkles = function () {
var _this = this;
this.sparkles = Array.from({ length: this.ncCount }, function () { return _this.generateSparkle(); });
};
SparklesTextComponent.prototype.generateSparkle = function () {
var x = Math.random() * 100 + "%";
var y = Math.random() * 100 + "%";
var color = this.ncColors[Math.floor(Math.random() * this.ncColors.length)];
var delay = Math.random() * 2;
var scale = Math.random() * 1 + 0.3;
var lifespan = Math.random() * 10 + 5;
var id = x + "-" + y + "-" + Date.now() + "-" + Math.random();
var opacity = 0;
var rotation = 75;
var scaleValue = 0;
return { id: id, x: x, y: y, color: color, delay: delay, scale: scale, lifespan: lifespan, opacity: opacity, rotation: rotation, scaleValue: scaleValue };
};
SparklesTextComponent.prototype.startAnimation = function () {
var _this = this;
// 更新闪烁点生命周期
this.intervalId = window.setInterval(function () {
_this.sparkles = _this.sparkles.map(function (sparkle) {
if (sparkle.lifespan <= 0) {
return _this.generateSparkle();
}
else {
return Object.assign(Object.assign({}, sparkle), { lifespan: sparkle.lifespan - 0.1 });
}
});
}, 100);
// 动画循环 - 模拟Framer Motion的关键帧动画
var animate = function () {
_this.sparkles = _this.sparkles.map(function (sparkle) {
var time = (Date.now() * 0.001 + sparkle.delay) % _this.ncDuration; // 使用可配置的循环时间
var progress = time / _this.ncDuration;
// 模拟关键帧动画 [0, 1, 0]
var opacity;
var scaleValue;
var rotation;
if (progress <= 0.5) {
// 前半段：0 -> 1
var t = progress * 2;
opacity = t;
scaleValue = t * sparkle.scale;
rotation = 75 + (120 - 75) * t;
}
else {
// 后半段：1 -> 0
var t = (progress - 0.5) * 2;
opacity = 1 - t;
scaleValue = (1 - t) * sparkle.scale;
rotation = 120 + (150 - 120) * t;
}
return Object.assign(Object.assign({}, sparkle), { opacity: opacity, rotation: rotation, scaleValue: scaleValue });
});
_this.animationFrameId = requestAnimationFrame(animate);
};
animate();
};
SparklesTextComponent.prototype.cleanup = function () {
if (this.intervalId) {
clearInterval(this.intervalId);
}
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
};
SparklesTextComponent.prototype.getSparkleStyle = function (sparkle) {
return {
left: sparkle.x,
top: sparkle.y,
opacity: sparkle.opacity,
transform: "scale(" + sparkle.scaleValue + ") rotate(" + sparkle.rotation + "deg)"
};
};
SparklesTextComponent.prototype.trackBySparkleId = function (index, sparkle) {
return sparkle.id;
};
return SparklesTextComponent;
}());
SparklesTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SparklesTextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
SparklesTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SparklesTextComponent, selector: "nc-sparkles-text", inputs: { ncText: "ncText", ncCount: "ncCount", ncColors: "ncColors", ncDuration: "ncDuration", ncSize: "ncSize" }, ngImport: i0__namespace, template: "<div class=\"sparkles-text\">\n <span class=\"sparkles-container\">\n <!-- \u95EA\u70C1\u70B9 -->\n <svg *ngFor=\"let sparkle of sparkles; trackBy: trackBySparkleId\" [ngStyle]=\"getSparkleStyle(sparkle)\"\n class=\"sparkle-svg\" [attr.width]=\"ncSize\" [attr.height]=\"ncSize\" viewBox=\"0 0 21 21\">\n <path\n d=\"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z\"\n [attr.fill]=\"sparkle.color\" />\n </svg>\n <!-- \u6587\u672C\u5185\u5BB9 -->\n <span class=\"sparkles-content\">{{ncText}}</span>\n </span>\n</div>", styles: [".sparkles-text{position:relative;display:inline-block}.sparkles-text .sparkles-container{position:relative;display:inline-block}.sparkles-text .sparkles-container .sparkle-svg{position:absolute;pointer-events:none;z-index:20}.sparkles-text .sparkles-container .sparkles-content{position:relative;z-index:10}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SparklesTextComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-sparkles-text',
templateUrl: './sparkles-text.component.html',
styleUrls: ['./sparkles-text.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { ncText: [{
type: i0.Input
}], ncCount: [{
type: i0.Input
}], ncColors: [{
type: i0.Input
}], ncDuration: [{
type: i0.Input
}], ncSize: [{
type: i0.Input
}] } });
var NcSparklesTextModule = /** @class */ (function () {
function NcSparklesTextModule() {
}
return NcSparklesTextModule;
}());
NcSparklesTextModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSparklesTextModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcSparklesTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSparklesTextModule, declarations: [SparklesTextComponent], imports: [i1.CommonModule], exports: [SparklesTextComponent] });
NcSparklesTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSparklesTextModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSparklesTextModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
SparklesTextComponent
],
imports: [
i1.CommonModule
],
exports: [
SparklesTextComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcSparklesTextModule = NcSparklesTextModule;
exports.SparklesTextComponent = SparklesTextComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-sparkles-text.umd.js.map