ng-cw-v12/fesm2015/ng-cw-v12-number-ticker.js

Angular UI component library

import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

class NumberTickerComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
        /** 要显示的数字 */
        this._value = 0;
        /** 起始数值 */
        this.ncStartValue = 0;
        /** 开始前的延迟 */
        this.ncDelay = 0;
        /** 小数位数 */
        this.ncDecimalPlaces = 0;
        /** 动画持续时间（毫秒） */
        this.ncDuration = 3000;
        /** 是否在视图可见时才开始动画 */
        this._startOnView = false;
        /** 是否只执行一次动画 */
        this._once = false;
        this.observer = null;
        this.animationFrame = null;
        this.timeout = null;
        this.currentValue = 0;
        this.displayValue = '0';
    }
    set ncValue(value) {
        this._value = value;
        setTimeout(() => {
            this.start();
        });
    }
    get ncValue() {
        return this._value;
    }
    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() { }
    ngOnDestroy() {
        this.clear();
    }
    start() {
        this.clear();
        // 初始值：无论什么方向，都从startValue开始
        this.currentValue = this.ncStartValue;
        this.updateDisplayValue();
        if (!this.ncStartOnView) {
            this.timeout = setTimeout(() => {
                this.startAnimation();
            }, this.ncDelay);
        }
        else {
            this.setupIntersectionObserver();
        }
    }
    clear() {
        if (this.observer) {
            this.observer.disconnect();
        }
        if (this.animationFrame) {
            cancelAnimationFrame(this.animationFrame);
        }
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
    }
    setupIntersectionObserver() {
        this.observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                this.timeout = setTimeout(() => {
                    this.startAnimation();
                }, this.ncDelay);
                if (this.ncOnce) {
                    if (this.observer) {
                        this.observer.disconnect();
                    }
                }
            }
            else if (!this.ncOnce) {
                this.resetAnimation();
            }
        }, { threshold: 0.1 });
        this.observer.observe(this.elementRef.nativeElement);
    }
    startAnimation() {
        this.animate();
    }
    resetAnimation() {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        if (this.animationFrame) {
            cancelAnimationFrame(this.animationFrame);
        }
        this.currentValue = this.ncStartValue;
        this.updateDisplayValue();
    }
    animate() {
        const startTime = performance.now();
        const startVal = this.currentValue;
        // 目标值：无论什么方向，都动画到value
        const targetVal = this.ncValue;
        const difference = targetVal - startVal;
        const animateStep = (currentTime) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / this.ncDuration, 1);
            // 使用缓动函数（ease-out）
            const easedProgress = 1 - Math.pow(1 - progress, 3);
            this.currentValue = startVal + (difference * easedProgress);
            this.updateDisplayValue();
            if (progress < 1) {
                this.animationFrame = requestAnimationFrame(animateStep);
            }
        };
        this.animationFrame = requestAnimationFrame(animateStep);
    }
    updateDisplayValue() {
        this.displayValue = this.currentValue.toFixed(this.ncDecimalPlaces);
    }
}
NumberTickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NumberTickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
NumberTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NumberTickerComponent, selector: "nc-number-ticker", inputs: { ncValue: "ncValue", ncStartValue: "ncStartValue", ncDelay: "ncDelay", ncDecimalPlaces: "ncDecimalPlaces", ncDuration: "ncDuration", ncStartOnView: "ncStartOnView", ncOnce: "ncOnce" }, ngImport: i0, template: "<span class=\"number-ticker\">{{displayValue}}</span>", styles: [":host{display:inline-block}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NumberTickerComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nc-number-ticker',
                    templateUrl: './number-ticker.component.html',
                    styleUrls: ['./number-ticker.component.less']
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncValue: [{
                type: Input
            }], ncStartValue: [{
                type: Input
            }], ncDelay: [{
                type: Input
            }], ncDecimalPlaces: [{
                type: Input
            }], ncDuration: [{
                type: Input
            }], ncStartOnView: [{
                type: Input
            }], ncOnce: [{
                type: Input
            }] } });

class NcNumberTickerModule {
}
NcNumberTickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcNumberTickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcNumberTickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcNumberTickerModule, declarations: [NumberTickerComponent], imports: [CommonModule], exports: [NumberTickerComponent] });
NcNumberTickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcNumberTickerModule, imports: [[
            CommonModule
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcNumberTickerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NumberTickerComponent
                    ],
                    imports: [
                        CommonModule
                    ],
                    exports: [
                        NumberTickerComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { NcNumberTickerModule, NumberTickerComponent };
//# sourceMappingURL=ng-cw-v12-number-ticker.js.map