feat: update effects to the lasted

galacean · Aug 30, 2024 · 9004c61 · 9004c61
1 parent 9cd0473
commit 9004c61
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 71 deletions.
diff --git a/components/swiper/demo/index.ts b/components/swiper/demo/index.ts
@@ -1,46 +1,31 @@
-import { AbstractPlugin, Player, VFXItem, registerPlugin } from '@galacean/effects';
+import { Player } from '@galacean/effects';
 import { Swiper } from '@galacean/effects-components';
 
-class MockPlugin extends AbstractPlugin { }
-class MockVFXItem extends VFXItem<any> { }
-registerPlugin('spine', MockPlugin, MockVFXItem);
-registerPlugin('orientation-transformer', MockPlugin, MockVFXItem);
-
-const mainJSON = 'https://mdn.alipayobjects.com/mars/afts/file/A*opZMTKzsq4oAAAAAAAAAAAAADlB4AQ';
+const mainJSON = 'https://mdn.alipayobjects.com/mars/afts/file/A*MNAsR7ftcu4AAAAAAAAAAAAADlB4AQ';
 const container = document.getElementById('J-container');
 const renderLevel = /render-level=(A|B|S)/i.test(location.search) ? RegExp.$1 : 'S';
-const cardIdList = ['sports', 'shake', 'scan', 'draw', 'forest', 'tab3'];
+const cardIdList = ['tab3', 'forest', 'farm', 'fu', 'scan', 'shake'];
 const cardDataList = [{
   begin: true, // true 为红色按钮，false 为黄色按钮
   btn: '扫福得福卡',
-  bubble: '文案最多八个字', // 汽泡文案
 }, {
   begin: false,
   btn: '找能量得福卡',
-  bubble: '这是汽泡~',
 }, {
   begin: true,
   btn: '摇一摇得福卡',
-  bubble: '气泡气泡气泡',
 }, {
   begin: false,
   btn: '画年画得福卡',
-  bubble: '',
 }, {
   begin: false,
   btn: '走99步得福卡',
-  bubble: '这是汽泡~',
 }, {
   begin: true,
   btn: '送福气得福卡',
 }];
 const buttonConfig = {
-  images: [
-    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*O4HKSpQRovYAAAAAAAAAAAAADoB5AQ/original', // 开始带tip
-    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*pf_aRJ3Oz3oAAAAAAAAAAAAADoB5AQ/original', // 开始不带tip
-    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*fg6cTKmc-WwAAAAAAAAAAAAADoB5AQ/original', // 未开始不带tip
-    'https://mdn.alipayobjects.com/huamei_p0cigc/afts/img/A*nqToSpH8va4AAAAAAAAAAAAADoB5AQ/original', // 未开始带tip
-  ],
+  image_disable: 'https://mdn.alipayobjects.com/huamei_klifp9/afts/img/A*8JGASK4kWkAAAAAAAAAAAAAADvV6AQ/original',
 };
 let initCardIndex = 2;
 let timer;
@@ -57,8 +42,6 @@ let timer;
     const variables = updateVariables();
     const composition = await player.loadScene(mainJSON, {
       variables,
-      // renderLevel,
-      templateScale: 2,
       // 最长等待加载时间，超过则使用降级
       // timeout: 10,
     });
@@ -73,7 +56,6 @@ let timer;
 
     swiper.run(composition);
 
-    // 注意：此处便于演示，如有类似使用，请记得 clearInterval
     timer = setInterval(() => {
       swiper.gotoCardIndex(++initCardIndex % cardIdList.length);
     }, 2000);
@@ -89,24 +71,17 @@ let timer;
 
 /**
  * 更新数据模板变量
- * 注意：使用文本元素可不用关心 text 和 tip 的设置
  * @returns
  */
 function updateVariables () {
   const variables: Record<string, string> = {};
-  const { images } = buttonConfig;
 
   cardDataList.forEach((data, index) => {
     const prefix = cardIdList[index];
 
-    variables[`${prefix}_text`] = data.btn;
-
-    if (data.bubble) {
-      variables[`${prefix}_tip`] = data.bubble;
-      variables[`${prefix}_btn`] = data.begin ? images[0] : images[3];
-    } else {
-      variables[`${prefix}_tip`] = '';
-      variables[`${prefix}_btn`] = data.begin ? images[1] : images[2];
+    variables[`${prefix}_btn_txt`] = data.btn;
+    if (data.begin) {
+      variables[`${prefix}_btn`] = buttonConfig.image_disable;
     }
   });
 

diff --git a/components/swiper/index.ts b/components/swiper/index.ts
@@ -1,6 +1,4 @@
-import type {
-  Player, Disposable, SpriteVFXItem, VFXItem, VFXItemContent, CalculateVFXItem, Composition,
-} from '@galacean/effects';
+import type { Player, Disposable, VFXItem, Composition } from '@galacean/effects';
 import { math } from '@galacean/effects';
 import BezierEasing from 'bezier-easing';
 import { toRotate, toDegree, getValOnCubicBezier } from './utils';
@@ -70,7 +68,7 @@ export class Swiper implements Disposable {
    * 卡片数组
    * @internal
    */
-  private readonly cardItems: VFXItem<VFXItemContent>[] = [];
+  private readonly cardItems: VFXItem[] = [];
   private cardCount = 0;
   /**
    * degree 对应的弧度
@@ -125,11 +123,6 @@ export class Swiper implements Disposable {
    * @internal
    */
   private maxDragRotate: [number, number];
-  /**
-   * 是否被销毁
-   * @internal
-   */
-  private destroyed = false;
 
   /**
    *
@@ -170,9 +163,9 @@ export class Swiper implements Disposable {
       const index = items.findIndex(item => item.name === name);
 
       if (index < 0) {
-        throw new Error('DataError: node name can not match cardIdList, check json or cardIdList');
+        throw new Error('DataError: node name can not match cardIdList, check json or cardIdList.');
       } else {
-        const cardItem = items[index] as CalculateVFXItem;
+        const cardItem = items[index];
         const cardName = cardItem.name;
 
         // 未计算好位置之前先隐藏元素
@@ -201,7 +194,7 @@ export class Swiper implements Disposable {
    */
   gotoCardIndex (index: number) {
     if (index < 0 || index > this.cardCount - 1) {
-      console.error(`goCardError: Card index out of range, must in [0, ${this.cardCount - 1}]`);
+      console.error(`goCardError: Card index out of range, must in [0, ${this.cardCount - 1}].`);
 
       return;
     }
@@ -217,7 +210,7 @@ export class Swiper implements Disposable {
       return;
     }
     if (!this.cardCount) {
-      console.error('goCardError: data not ready');
+      console.error('goCardError: data not ready.');
 
       return;
     }
@@ -259,9 +252,9 @@ export class Swiper implements Disposable {
     for (let i = 0; i < this.cardItems.length; i++) {
       const item = this.cardItems[i];
 
-      if (!item.content) {
+      if (item.components.length === 0) {
         this.player.dispose();
-        throw new Error('DataError: item.content error');
+        throw new Error('DataError: item.content error.');
       }
     }
   }
@@ -289,16 +282,16 @@ export class Swiper implements Disposable {
 
   private updateTransform (transformList: ReturnType<typeof this.getTransform>) {
     if (!this.cardCount) {
-      console.error('this.cardItems is empty, ignore');
+      console.error('this.cardItems is empty, ignore.');
 
       return;
     }
 
     for (let i = 0; i < this.cardCount; i++) {
-      const item = this.cardItems[i] as SpriteVFXItem;
+      const item = this.cardItems[i];
 
-      if (!item.content) {
-        console.error('item.content not found, ignore');
+      if (item.components.length === 0) {
+        console.error('Components not found, ignore.');
 
         return;
       } else {
@@ -508,7 +501,6 @@ export class Swiper implements Disposable {
    * @param disposePlayer
    */
   dispose (disposePlayer = true): void {
-    this.destroyed = true;
     if (disposePlayer) {
       this.player?.dispose();
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-components",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Galacean Effects components",
   "module": "./es/index/index.mjs",
   "main": "./dist/index.js",
@@ -29,7 +29,7 @@
     "iOS 9"
   ],
   "dependencies": {
-    "@galacean/effects": "1.6.2",
+    "@galacean/effects": "^2.0.4",
     "bezier-easing": "^2.1.0"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml