ng-cw-v12
Version:
Angular UI component library
364 lines (359 loc) • 21.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class AnimateTextComponent {
constructor(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 = {};
}
set ncText(value) {
this._text = value;
setTimeout(() => {
this.start();
});
}
get ncText() {
return this._text;
}
set ncStartOnView(val) {
this._startOnView = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncStartOnView() {
return this._startOnView;
}
set ncOnce(val) {
this._once = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncOnce() {
return this._once;
}
ngOnInit() {
this.staggerTimings = {
text: this.ncDelayMultipleByText,
word: this.ncDelayMultipleByWord,
character: this.ncDelayMultipleByCharacter,
line: this.ncDelayMultipleByLine
};
}
ngOnDestroy() {
this.clear();
}
start() {
this.clear();
this.splitText();
// 初始所有段落都隐藏
this.segmentStates = this.segments.map(() => 'hidden');
if (this.ncStartOnView) {
this.setupIntersectionObserver();
}
else {
this.timeout = setTimeout(() => {
this.animateIn();
}, this.ncDelay);
}
}
clear() {
if (this.observer) {
this.observer.disconnect();
}
if (this.timeout) {
clearTimeout(this.timeout);
}
}
splitText() {
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;
}
}
setupIntersectionObserver() {
const options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
this.observer = new IntersectionObserver((entries) => {
var _a;
if (entries[0].isIntersecting) {
this.timeout = setTimeout(() => {
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);
}
// 计算每个段落的延迟时间
getSegmentDelay(index) {
const staggerDelay = this.staggerTimings[this.ncBy] || 50;
return index * staggerDelay;
}
// 根据索引获取段落的动画状态
getSegmentState(index) {
return this.segmentStates[index] || 'hidden';
}
// 获取段落类名
getSegmentClass(index) {
let classes = 'animate-text-segment';
if (this.ncBy === 'line') {
classes += ' block';
}
else {
classes += ' inline-block whitespace-pre';
}
if (this.ncBy === 'character') {
classes += ' character';
}
return classes;
}
// 获取动画参数
getAnimationParams(index) {
return {
duration: this.ncDuration,
delay: this.getSegmentDelay(index)
};
}
// 执行进入动画
animateIn() {
this.segmentStates.forEach((state, index) => {
this.segmentStates[index] = 'visible';
});
}
// 执行退出动画
animateOut() {
//若存在ncDelay，离开视图后，进入动画（animateIn）可能还未执行，则需要清除timeout
if (this.timeout) {
clearTimeout(this.timeout);
}
//隐藏显示的文本
this.segmentStates.forEach((state, index) => {
this.segmentStates[index] = 'hidden';
});
}
}
AnimateTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AnimateTextComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
AnimateTextComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
trigger('fadeIn', [
state('hidden', style({ opacity: 0, transform: 'translateY(20px)' })),
state('visible', style({ opacity: 1, transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateY(20px)' })))
]),
trigger('blurIn', [
state('hidden', style({ opacity: 0, filter: 'blur(10px)' })),
state('visible', style({ opacity: 1, filter: 'blur(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms'))
]),
trigger('blurInUp', [
state('hidden', style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(20px)' })),
state('visible', style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms'))
]),
trigger('blurInDown', [
state('hidden', style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(-20px)' })),
state('visible', style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms'))
]),
trigger('slideUp', [
state('hidden', style({ opacity: 0, transform: 'translateY(20px)' })),
state('visible', style({ opacity: 1, transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateY(-20px)' })))
]),
trigger('slideDown', [
state('hidden', style({ opacity: 0, transform: 'translateY(-20px)' })),
state('visible', style({ opacity: 1, transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateY(20px)' })))
]),
trigger('slideLeft', [
state('hidden', style({ opacity: 0, transform: 'translateX(20px)' })),
state('visible', style({ opacity: 1, transform: 'translateX(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateX(-20px)' })))
]),
trigger('slideRight', [
state('hidden', style({ opacity: 0, transform: 'translateX(-20px)' })),
state('visible', style({ opacity: 1, transform: 'translateX(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateX(20px)' })))
]),
trigger('scaleUp', [
state('hidden', style({ opacity: 0, transform: 'scale(0.5)' })),
state('visible', style({ opacity: 1, transform: 'scale(1)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'scale(0.5)' })))
]),
trigger('scaleDown', [
state('hidden', style({ opacity: 0, transform: 'scale(1.5)' })),
state('visible', style({ opacity: 1, transform: 'scale(1)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'scale(1.5)' })))
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AnimateTextComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-animate-text',
templateUrl: './animate-text.component.html',
styleUrls: ['./animate-text.component.less'],
animations: [
trigger('fadeIn', [
state('hidden', style({ opacity: 0, transform: 'translateY(20px)' })),
state('visible', style({ opacity: 1, transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateY(20px)' })))
]),
trigger('blurIn', [
state('hidden', style({ opacity: 0, filter: 'blur(10px)' })),
state('visible', style({ opacity: 1, filter: 'blur(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms'))
]),
trigger('blurInUp', [
state('hidden', style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(20px)' })),
state('visible', style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms'))
]),
trigger('blurInDown', [
state('hidden', style({ opacity: 0, filter: 'blur(10px)', transform: 'translateY(-20px)' })),
state('visible', style({ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms'))
]),
trigger('slideUp', [
state('hidden', style({ opacity: 0, transform: 'translateY(20px)' })),
state('visible', style({ opacity: 1, transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateY(-20px)' })))
]),
trigger('slideDown', [
state('hidden', style({ opacity: 0, transform: 'translateY(-20px)' })),
state('visible', style({ opacity: 1, transform: 'translateY(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateY(20px)' })))
]),
trigger('slideLeft', [
state('hidden', style({ opacity: 0, transform: 'translateX(20px)' })),
state('visible', style({ opacity: 1, transform: 'translateX(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateX(-20px)' })))
]),
trigger('slideRight', [
state('hidden', style({ opacity: 0, transform: 'translateX(-20px)' })),
state('visible', style({ opacity: 1, transform: 'translateX(0px)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'translateX(20px)' })))
]),
trigger('scaleUp', [
state('hidden', style({ opacity: 0, transform: 'scale(0.5)' })),
state('visible', style({ opacity: 1, transform: 'scale(1)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'scale(0.5)' })))
]),
trigger('scaleDown', [
state('hidden', style({ opacity: 0, transform: 'scale(1.5)' })),
state('visible', style({ opacity: 1, transform: 'scale(1)' })),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
transition('visible => hidden', animate('{{duration}}ms', style({ opacity: 0, transform: 'scale(1.5)' })))
])
]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncText: [{
type: Input
}], ncDelay: [{
type: Input
}], ncAnimation: [{
type: Input
}], ncBy: [{
type: Input
}], ncDuration: [{
type: Input
}], ncDelayMultipleByText: [{
type: Input
}], ncDelayMultipleByWord: [{
type: Input
}], ncDelayMultipleByCharacter: [{
type: Input
}], ncDelayMultipleByLine: [{
type: Input
}], ncStartOnView: [{
type: Input
}], ncOnce: [{
type: Input
}] } });
class NcAnimateTextModule {
}
NcAnimateTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAnimateTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcAnimateTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAnimateTextModule, declarations: [AnimateTextComponent], imports: [CommonModule], exports: [AnimateTextComponent] });
NcAnimateTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAnimateTextModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAnimateTextModule, decorators: [{
type: NgModule,
args: [{
declarations: [
AnimateTextComponent
],
imports: [
CommonModule
],
exports: [
AnimateTextComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AnimateTextComponent, NcAnimateTextModule };
//# sourceMappingURL=ng-cw-v12-animate-text.js.map