#39 TextFiledのテキストアニメーション用のプロパティーを追加

Next2D · Sep 1, 2023 · 300e8e7 · 300e8e7
1 parent 4edcc7a
commit 300e8e7
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 34 deletions.
diff --git a/next2d.js b/next2d.js
diff --git a/packages/display/src/Graphics.ts b/packages/display/src/Graphics.ts
@@ -101,7 +101,7 @@ export class Graphics
     private _$lines: any[] | null;
     private _$uniqueKey: string;
     private _$cacheKeys: string[];
-    private _$cacheParams: number[];
+    private readonly _$cacheParams: number[];
     public _$bitmapId: number;
     public _$mode: ShapeModeImpl;
     public _$posted: boolean;

diff --git a/packages/display/src/TextField.ts b/packages/display/src/TextField.ts
@@ -130,7 +130,8 @@ export class TextField extends InteractiveObject
     private _$thicknessColor: number;
     private _$verticalAlign: TextFormatVerticalAlignImpl;
     private _$cacheKeys: string[];
-    private _$cacheParams: number[];
+    private readonly _$cacheParams: number[];
+    private _$stopIndex: number;
 
     /**
      * @constructor
@@ -217,6 +218,13 @@ export class TextField extends InteractiveObject
          */
         this._$maxChars = 0;
 
+        /**
+         * @type {number}
+         * @default -1
+         * @private
+         */
+        this._$stopIndex = -1;
+
         // TextFormat
         const textFormat: TextFormat = new TextFormat();
         textFormat._$setDefault();
@@ -564,6 +572,29 @@ export class TextField extends InteractiveObject
         }
     }
 
+    /**
+     * @description テキストの任意の表示終了位置の設定
+     *              Setting an arbitrary display end position for text.
+     *
+     * @member {number}
+     * @default -1
+     * @public
+     */
+    get stopIndex (): number
+    {
+        return this._$stopIndex;
+    }
+    set stopIndex (index: number)
+    {
+        index |= 0;
+        if (this._$stopIndex === index) {
+            return ;
+        }
+
+        this._$stopIndex = index;
+        this._$doChanged();
+    }
+
     /**
      * @description テキストに適用するフォーマットを指定します。
      *              Specifies the formatting to be applied to the text.
@@ -835,12 +866,13 @@ export class TextField extends InteractiveObject
                 const parent: ParentImpl<any> = this._$parent;
                 if (parent) {
 
+                    // start animation
+                    if (this._$xScrollShape.hasLocalVariable("job")) {
+                        this._$xScrollShape.getLocalVariable("job").stop();
+                    }
+
                     // view start
-                    Tween.add(this._$xScrollShape,
-                        { "alpha" : 0 },
-                        { "alpha" : 0.8 },
-                        0, 0.3, Easing.outQuad
-                    );
+                    this._$xScrollShape.alpha = 0.9;
 
                     // set position
                     this._$xScrollShape.x = this.x + 1
@@ -855,15 +887,10 @@ export class TextField extends InteractiveObject
                         parent.getChildIndex(this) + 1
                     );
 
-                    // start animation
-                    if (this._$xScrollShape.hasLocalVariable("job")) {
-                        this._$xScrollShape.getLocalVariable("job").stop();
-                    }
-
                     const job: Job = Tween.add(this._$xScrollShape,
-                        { "alpha" : 0.8 },
+                        { "alpha" : 0.9 },
                         { "alpha" : 0 },
-                        0.2, 0.6, Easing.outQuad
+                        2, 0.2, Easing.outQuad
                     );
 
                     job.addEventListener(Next2DEvent.COMPLETE, (event: Next2DEvent) =>
@@ -928,12 +955,13 @@ export class TextField extends InteractiveObject
                 const parent: ParentImpl<any> = this._$parent;
                 if (parent) {
 
+                    // start animation
+                    if (this._$yScrollShape.hasLocalVariable("job")) {
+                        this._$yScrollShape.getLocalVariable("job").stop();
+                    }
+
                     // view start
-                    Tween.add(this._$yScrollShape,
-                        { "alpha" : 0 },
-                        { "alpha" : 0.8 },
-                        0, 0.3, Easing.outQuad
-                    );
+                    this._$yScrollShape.alpha = 0.9;
 
                     // set position
                     this._$yScrollShape.x = this.x + this.width - this._$yScrollShape.width - 0.5;
@@ -948,15 +976,10 @@ export class TextField extends InteractiveObject
                         parent.getChildIndex(this) + 1
                     );
 
-                    // start animation
-                    if (this._$yScrollShape.hasLocalVariable("job")) {
-                        this._$yScrollShape.getLocalVariable("job").stop();
-                    }
-
                     const job: Job = Tween.add(this._$yScrollShape,
-                        { "alpha" : 0.8 },
+                        { "alpha" : 0.9 },
                         { "alpha" : 0 },
-                        0.2, 0.6, Easing.outQuad
+                        2, 0.2, Easing.outQuad
                     );
 
                     job.addEventListener(Next2DEvent.COMPLETE, (event: Next2DEvent) =>
@@ -2177,11 +2200,19 @@ export class TextField extends InteractiveObject
         let verticalAlign: number = 0;
 
         let skip = false;
+        let currentIndex = 0;
         for (let idx: number = 0; idx < textData.textTable.length; ++idx) {
 
             const textObject: TextObjectImpl = textData.textTable[idx];
-            if (skip && textObject.mode === "text") {
-                continue;
+            if (textObject.mode === "text") {
+                currentIndex++;
+                if (skip) {
+                    continue;
+                }
+
+                if (this._$stopIndex > -1 && currentIndex > this._$stopIndex) {
+                    break;
+                }
             }
 
             const textFormat: TextFormat = textObject.textFormat;

diff --git a/packages/media/src/Video.ts b/packages/media/src/Video.ts
@@ -70,13 +70,13 @@ export class Video extends DisplayObject
     private _$bytesLoaded: number;
     private _$bytesTotal: number;
     private _$timerId: number;
-    public _$video: HTMLVideoElement|null;
+    public _$video: HTMLVideoElement | null;
     private _$stop: boolean;
     private _$volume: number;
     private _$ready: boolean;
-    private _$context: OffscreenCanvasRenderingContext2D|null;
+    private _$context: OffscreenCanvasRenderingContext2D | null;
     private _$cacheKeys: string[];
-    private _$cacheParams: number[];
+    private readonly _$cacheParams: number[];
 
     /**
      * @param {number} [width = 0]

diff --git a/packages/text/src/TextParser.ts b/packages/text/src/TextParser.ts
@@ -162,6 +162,13 @@ const _$parseText = (
                     text_data.ascentTable[prevLine] = Math.max(text_data.ascentTable[prevLine], textObject.y);
                 }
 
+                // reset
+                $currentWidth = 0;
+                for (let idx: number = insertIdx + 1; idx < text_data.textTable.length; ++idx) {
+                    const textObject: TextObjectImpl = text_data.textTable[idx];
+                    $currentWidth += textObject.w;
+                }
+
             } else {
                 text_data.textTable.push(wrapObject);
                 text_data.lineTable.push(wrapObject);

diff --git a/packages/ui/src/Job.ts b/packages/ui/src/Job.ts
@@ -345,7 +345,7 @@ export class Job extends EventDispatcher
      * @method
      * @public
      */
-    stop ()
+    stop (): void
     {
         if (this.hasEventListener(Event.STOP)) {
             this.dispatchEvent(new Event(Event.STOP));
@@ -430,7 +430,7 @@ export class Job extends EventDispatcher
                 continue;
             }
 
-            if (!target.hasOwnProperty(name)) {
+            if (!(name in target)) {
                 continue;
             }