fozmo-3d-preview - npm Package Compare versions

Comparing version 1.0.73 to 1.0.74

lib/scenes/MainScene.d.ts

@@ -46,2 +46,4 @@ import { BaseScene, BaseSceneConfig } from '../Base/BaseScene';
     private makeGuideAnim;
+    private _fingerElement;
+    private initGuideFinger;
     private setExtraEffects;
@@ -48,0 +50,0 @@ private setExtraParams;

lib/scenes/MainScene.js

@@ -384,2 +384,3 @@ import { EEncryptExt, ENormalExt, ResLoaderManager } from './../manager/ResLoaderManager';
         this.renderer.domElement.addEventListener('pointerdown', this.pointerdown.bind(this));
+        this.initGuideFinger();
         this.beginGuide();
@@ -415,30 +416,76 @@ return true;
         const past = now - this._beginGuideTime;
-        HHConsole.info('past', past);
+        // HHConsole.info('past', past)
         if (past >= 30000) {
-            this._beginGuideTime = now;
+            this._beginGuideTime = now + 4000;
             HHConsole.info('开启指引');
             // 记录原始旋转角度
             const originalRotation = this._model.rotation.y;
+            // 显示手指元素
+            this._fingerElement.style.display = 'block';
+            this._fingerElement.style.opacity = '0';
             // 创建动画序列
-            gsap.timeline()
-                // 向左旋转30度
+            const tl = gsap.timeline();
+            // 手指渐显
+            tl.to(this._fingerElement, {
+                opacity: 1,
+                duration: 0.3
+            })
+                // 同时执行模型旋转和手指移动
                 .to(this._model.rotation, {
-                y: originalRotation - Math.PI / 6, // 30度 = π/6
-                duration: 2,
+                y: originalRotation - Math.PI / 6,
+                duration: 1,
                 ease: "power2.inOut"
-            })
-                // 向右旋转60度
+            }, ">") // ">" 表示在上一个动画结束后立即开始
+                .to(this._fingerElement, {
+                transform: 'translate(calc(-50% - 50px), -50%)', // 向左移动50px
+                duration: 1,
+                ease: "power2.inOut"
+            }, "<") // "<" 表示与上一个动画同时开始
+                // 向右旋转和移动
                 .to(this._model.rotation, {
                 y: originalRotation + Math.PI / 6,
-                duration: 4,
+                duration: 2,
                 ease: "power2.inOut"
-            })
-                // 恢复原始角度
+            }, ">")
+                .to(this._fingerElement, {
+                transform: 'translate(calc(-50% + 50px), -50%)', // 向右移动50px
+                duration: 2,
+                ease: "power2.inOut"
+            }, "<")
+                // 恢复原位
                 .to(this._model.rotation, {
                 y: originalRotation,
-                duration: 2,
+                duration: 1,
                 ease: "power2.inOut"
+            }, ">")
+                .to(this._fingerElement, {
+                transform: 'translate(-50%, -50%)', // 回到原位
+                duration: 1,
+                ease: "power2.inOut"
+            }, "<")
+                // 手指渐隐
+                .to(this._fingerElement, {
+                opacity: 0,
+                duration: 0.3,
+                onComplete: () => {
+                    this._fingerElement.style.display = 'none';
+                }
             });
         }
     }
+    _fingerElement;
+    initGuideFinger() {
+        this._fingerElement = document.createElement('img');
+        this._fingerElement.src = 'https://f.fozmoly.com/WebAssets/finger.png';
+        this._fingerElement.style.position = 'absolute';
+        this._fingerElement.style.width = '50px';
+        this._fingerElement.style.height = '50px';
+        this._fingerElement.style.left = '50%';
+        this._fingerElement.style.top = '50%';
+        this._fingerElement.style.transform = 'translate(-50%, -50%)';
+        this._fingerElement.style.pointerEvents = 'none'; // 防止图标影响交互
+        this._fingerElement.style.zIndex = '1000';
+        this._fingerElement.style.display = 'none'; // 默认隐藏
+        this.container.appendChild(this._fingerElement);
+    }
     setExtraEffects() {
@@ -445,0 +492,0 @@ this.createTextureImageContainer();

package.json

 {
   "name": "fozmo-3d-preview",
-  "version": "1.0.73",
+  "version": "1.0.74",
   "description": "风之末 3D作品预览",
@@ -5,0 +5,0 @@ "main": "lib/Fozmo3DPreview.js",

No alert changes

Improved metrics

Total package byte prevSize

217222

increased by1.01%

Lines of code

6416

increased by0.77%

No dependency changes