ng-cw-v12
Version:
Angular UI component library
411 lines (402 loc) • 27.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/animate-text', ['exports', '@angular/core', '@angular/animations', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["animate-text"] = {}), global.ng.core, global.ng.animations, global.ng.common));
})(this, (function (exports, i0, animations, 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 AnimateTextComponent = /** @class */ (function () {
function AnimateTextComponent(elementRef) {
this.elementRef = elementRef;
/** 展示的文本内容 */
this._text = '';
/** 延迟 */
this.ncDelay = 0;
/** 动画类型 */
this.ncAnimation = 'fadeIn';
/** 动画分割方式 */
this.ncBy = 'word';
/** 每个分割块动画持续时间 */
this.ncDuration = 300;
/** 每个分割块之间的延迟(按text分割) */
this.ncDelayMultipleByText = 60;
/** 每个分割块之间的延迟(按word分割) */
this.ncDelayMultipleByWord = 50;
/** 每个分割块之间的延迟(按character分割) */
this.ncDelayMultipleByCharacter = 30;
/** 每个分割块之间的延迟(按line分割) */
this.ncDelayMultipleByLine = 60;
/** 是否在视图可见时才开始动画 */
this._startOnView = false;
/** 是否只执行一次动画 */
this._once = false;
this.segments = [];
this.segmentStates = [];
this.observer = null;
this.timeout = null;
// 交错时间
this.staggerTimings = {};
}
Object.defineProperty(AnimateTextComponent.prototype, "ncText", {
get: function () {
return this._text;
},
set: function (value) {
var _this = this;
this._text = value;
setTimeout(function () {
_this.start();
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(AnimateTextComponent.prototype, "ncStartOnView", {
get: function () {
return this._startOnView;
},
set: function (val) {
this._startOnView = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(AnimateTextComponent.prototype, "ncOnce", {
get: function () {
return this._once;
},
set: function (val) {
this._once = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
AnimateTextComponent.prototype.ngOnInit = function () {
this.staggerTimings = {
text: this.ncDelayMultipleByText,
word: this.ncDelayMultipleByWord,
character: this.ncDelayMultipleByCharacter,
line: this.ncDelayMultipleByLine
};
};
AnimateTextComponent.prototype.ngOnDestroy = function () {
this.clear();
};
AnimateTextComponent.prototype.start = function () {
var _this = this;
this.clear();
this.splitText();
// 初始所有段落都隐藏
this.segmentStates = this.segments.map(function () { return 'hidden'; });
if (this.ncStartOnView) {
this.setupIntersectionObserver();
}
else {
this.timeout = setTimeout(function () {
_this.animateIn();
}, this.ncDelay);
}
};
AnimateTextComponent.prototype.clear = function () {
if (this.observer) {
this.observer.disconnect();
}
if (this.timeout) {
clearTimeout(this.timeout);
}
};
AnimateTextComponent.prototype.splitText = function () {
switch (this.ncBy) {
case 'word':
this.segments = this.ncText.split(/(\s+)/);
break;
case 'character':
this.segments = this.ncText.split('');
break;
case 'line':
this.segments = this.ncText.split('\n');
break;
case 'text':
default:
this.segments = [this.ncText];
break;
}
};
AnimateTextComponent.prototype.setupIntersectionObserver = function () {
var _this = this;
var options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
this.observer = new IntersectionObserver(function (entries) {
var _a;
if (entries[0].isIntersecting) {
_this.timeout = setTimeout(function () {
_this.animateIn();
}, _this.ncDelay);
if (_this.ncOnce) {
(_a = _this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
}
}
else if (!_this.ncOnce) {
_this.animateOut();
}
}, options);
this.observer.observe(this.elementRef.nativeElement);
};
// 计算每个段落的延迟时间
AnimateTextComponent.prototype.getSegmentDelay = function (index) {
var staggerDelay = this.staggerTimings[this.ncBy] || 50;
return index * staggerDelay;
};
// 根据索引获取段落的动画状态
AnimateTextComponent.prototype.getSegmentState = function (index) {
return this.segmentStates[index] || 'hidden';
};
// 获取段落类名
AnimateTextComponent.prototype.getSegmentClass = function (index) {
var classes = 'animate-text-segment';
if (this.ncBy === 'line') {
classes += ' block';
}
else {
classes += ' inline-block whitespace-pre';
}
if (this.ncBy === 'character') {
classes += ' character';
}
return classes;
};
// 获取动画参数
AnimateTextComponent.prototype.getAnimationParams = function (index) {
return {
duration: this.ncDuration,
delay: this.getSegmentDelay(index)
};
};
// 执行进入动画
AnimateTextComponent.prototype.animateIn = function () {
var _this = this;
this.segmentStates.forEach(function (state, index) {
_this.segmentStates[index] = 'visible';
});
};
// 执行退出动画
AnimateTextComponent.prototype.animateOut = function () {
var _this = this;
//若存在ncDelay，离开视图后，进入动画（animateIn）可能还未执行，则需要清除timeout
if (this.timeout) {
clearTimeout(this.timeout);
}
//隐藏显示的文本
this.segmentStates.forEach(function (state, index) {
_this.segmentStates[index] = 'hidden';
});
};
return AnimateTextComponent;
}());
AnimateTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: AnimateTextComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
AnimateTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AnimateTextComponent, selector: "nc-animate-text", inputs: { ncText: "ncText", ncDelay: "ncDelay", ncAnimation: "ncAnimation", ncBy: "ncBy", ncDuration: "ncDuration", ncDelayMultipleByText: "ncDelayMultipleByText", ncDelayMultipleByWord: "ncDelayMultipleByWord", ncDelayMultipleByCharacter: "ncDelayMultipleByCharacter", ncDelayMultipleByLine: "ncDelayMultipleByLine", ncStartOnView: "ncStartOnView", ncOnce: "ncOnce" }, ngImport: i0__namespace, template: "<div class=\"animate-text-container whitespace-pre-wrap\">\r\n <ng-container *ngFor=\"let segment of segments; let i = index\">\r\n <!-- \u6839\u636E\u5F53\u524D\u52A8\u753B\u7C7B\u578B\u9009\u62E9\u6B63\u786E\u7684\u52A8\u753B\u89E6\u53D1\u5668 -->\r\n <span *ngIf=\"ncAnimation === 'fadeIn'\" [class]=\"getSegmentClass(i)\"\r\n [@fadeIn]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'blurIn'\" [class]=\"getSegmentClass(i)\"\r\n [@blurIn]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'blurInUp'\" [class]=\"getSegmentClass(i)\"\r\n [@blurInUp]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'blurInDown'\" [class]=\"getSegmentClass(i)\"\r\n [@blurInDown]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'slideUp'\" [class]=\"getSegmentClass(i)\"\r\n [@slideUp]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'slideDown'\" [class]=\"getSegmentClass(i)\"\r\n [@slideDown]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'slideLeft'\" [class]=\"getSegmentClass(i)\"\r\n [@slideLeft]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'slideRight'\" [class]=\"getSegmentClass(i)\"\r\n [@slideRight]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'scaleUp'\" [class]=\"getSegmentClass(i)\"\r\n [@scaleUp]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n <span *ngIf=\"ncAnimation === 'scaleDown'\" [class]=\"getSegmentClass(i)\"\r\n [@scaleDown]=\"{value: getSegmentState(i), params: getAnimationParams(i)}\">{{segment}}</span>\r\n </ng-container>\r\n</div>", styles: [":host{display:block}.animate-text-container{width:-moz-fit-content;width:fit-content}.whitespace-pre-wrap{white-space:pre-wrap}.inline-block{display:inline-block}.whitespace-pre{white-space:pre}.block{display:block}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
animations.trigger('fadeIn', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateY(20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateY(20px)' })))
]),
animations.trigger('blurIn', [
animations.state('hidden', animations.style({ opacity: 0, filter: 'blur(10px)' })),
animations.state('visible', animations.style({ opacity: 1, filter: 'blur(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
]),
animations.trigger('blurInUp', [
animations.state('hidden', animations.style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(20px)' })),
animations.state('visible', animations.style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
]),
animations.trigger('blurInDown', [
animations.state('hidden', animations.style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(-20px)' })),
animations.state('visible', animations.style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
]),
animations.trigger('slideUp', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateY(20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateY(-20px)' })))
]),
animations.trigger('slideDown', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateY(-20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateY(20px)' })))
]),
animations.trigger('slideLeft', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateX(20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateX(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateX(-20px)' })))
]),
animations.trigger('slideRight', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateX(-20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateX(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateX(20px)' })))
]),
animations.trigger('scaleUp', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'scale(0.5)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'scale(1)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'scale(0.5)' })))
]),
animations.trigger('scaleDown', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'scale(1.5)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'scale(1)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'scale(1.5)' })))
])
] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: AnimateTextComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-animate-text',
templateUrl: './animate-text.component.html',
styleUrls: ['./animate-text.component.less'],
animations: [
animations.trigger('fadeIn', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateY(20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateY(20px)' })))
]),
animations.trigger('blurIn', [
animations.state('hidden', animations.style({ opacity: 0, filter: 'blur(10px)' })),
animations.state('visible', animations.style({ opacity: 1, filter: 'blur(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
]),
animations.trigger('blurInUp', [
animations.state('hidden', animations.style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(20px)' })),
animations.state('visible', animations.style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
]),
animations.trigger('blurInDown', [
animations.state('hidden', animations.style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(-20px)' })),
animations.state('visible', animations.style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
]),
animations.trigger('slideUp', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateY(20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateY(-20px)' })))
]),
animations.trigger('slideDown', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateY(-20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateY(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateY(20px)' })))
]),
animations.trigger('slideLeft', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateX(20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateX(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateX(-20px)' })))
]),
animations.trigger('slideRight', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'translateX(-20px)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'translateX(0px)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'translateX(20px)' })))
]),
animations.trigger('scaleUp', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'scale(0.5)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'scale(1)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'scale(0.5)' })))
]),
animations.trigger('scaleDown', [
animations.state('hidden', animations.style({ opacity: 0, transform: 'scale(1.5)' })),
animations.state('visible', animations.style({ opacity: 1, transform: 'scale(1)' })),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms', animations.style({ opacity: 0, transform: 'scale(1.5)' })))
])
]
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { ncText: [{
type: i0.Input
}], ncDelay: [{
type: i0.Input
}], ncAnimation: [{
type: i0.Input
}], ncBy: [{
type: i0.Input
}], ncDuration: [{
type: i0.Input
}], ncDelayMultipleByText: [{
type: i0.Input
}], ncDelayMultipleByWord: [{
type: i0.Input
}], ncDelayMultipleByCharacter: [{
type: i0.Input
}], ncDelayMultipleByLine: [{
type: i0.Input
}], ncStartOnView: [{
type: i0.Input
}], ncOnce: [{
type: i0.Input
}] } });
var NcAnimateTextModule = /** @class */ (function () {
function NcAnimateTextModule() {
}
return NcAnimateTextModule;
}());
NcAnimateTextModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAnimateTextModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcAnimateTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAnimateTextModule, declarations: [AnimateTextComponent], imports: [i1.CommonModule], exports: [AnimateTextComponent] });
NcAnimateTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAnimateTextModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAnimateTextModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
AnimateTextComponent
],
imports: [
i1.CommonModule
],
exports: [
AnimateTextComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.AnimateTextComponent = AnimateTextComponent;
exports.NcAnimateTextModule = NcAnimateTextModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-animate-text.umd.js.map