hq-eduction-vr/components/xr-ar-2dmarker/index.js

Component({
  behaviors: [require('../common/share-behavior').default],
  properties: {
    markerImg: {
      type: String
    },
  },
  data: {
    loaded: false,
    arReady: false,
    isStartPlay1: false,
    adlScale: '0 0 0',
    adlPos: '-0.1 -0.5 -0.05'
  },
  lifetimes: {
    attached() {
    }
  },
  methods: {
    handleReady({
      detail
    }) {
      const xrScene = this.scene = detail.value;
      // console.log('xr-scene', xrScene);
    },
    handleAssetsProgress: function ({
      detail
    }) {
      // console.log('assets progress', detail.value);
    },
    handleAssetsLoaded: function ({
      detail
    }) {
      console.log('assets loaded', detail.value);
      this.setData({
        loaded: true
      });
    },
    handleARReady: function ({
      detail
    }) {
      console.log('arReady');
      this.setData({
        arReady: true
      })
    },
    handleItem1Loaded({ detail }) {
      const el = detail.value.target;
      const animator = el.getComponent("animator");
      this.animator1 = animator
      console.log('animator1', animator)
    },
    handleItem2Loaded({ detail }) {
      const el = detail.value.target;
      const animator = el.getComponent("animator");
      this.animator2 = animator;
    },
    handleARTrackerState1({
      detail
    }) {
      // 事件的值即为`ARTracker`实例
      const tracker = detail.value;
      // 获取当前状态和错误信息
      console.log('tracker', tracker)

      const {
        state,
      } = tracker;
      if (state == 2) {
        this.play()
      } else {
        this.pause()
      }
    },
    play() {
      if (!this.data.loaded) return

      if (!this.data.isStartPlay1) {
        this.setData({
          isStartPlay1: true
        }, () => {
          this.playitem1Action()
        })
      }
    },
    pause() {

    },
    playitem1Action() {
      if (!this.animator1 || !this.animator2) return;

      console.log('start animator1');
      this.animator1.play('All Animations', {
        loop: 0
      });

      setTimeout(() => {
        console.log('start animator2');
        this.animator2.pause();

          const duration = 1500;
          const startTime = Date.now();
          const startScale = 0;
          const endScale = 0.38;
          const startPX = -0.1
          const endPX = 0
          const startPY = -0.5
          const endPY = 0
          const startPZ = -0.05
          const endPZ = 0

          const step = () => {
            const now = Date.now();
            let t = (now - startTime) / duration;
            if (t > 1) t = 1;

            const s = startScale + (endScale - startScale) * t;
            const scaleStr = `${s} ${s} ${s}`;
            const p = `${startPX + (endPX - startPX) * t} ${startPY + (endPY - startPY) * t} ${startPZ + (endPZ - startPZ) * t}`;

            if (t >= 0.5 && !this.isStartPlay2) {
              this.isStartPlay2 = true;
              this.animator2.play('All Animations', {
                loop: 0
              });
            }

            this.setData({
              adlScale: scaleStr,
              adlPos: p
            });

            if (t < 1) {
              setTimeout(step, 16); // 60fps
            } else {
              const audioUrl = 'https://houseoss.4dkankan.com/project/hq-eduction-vr/public/%E5%AE%89%E5%BE%B7%E7%83%88.mp3';
              if (!this.audioCtx) {
                const audioCtx = wx.createInnerAudioContext();
                audioCtx.src = audioUrl;
                audioCtx.play();
                audioCtx.onEnded(() => {
                  const hideDuration = 1000;
                  const hideStartTime = Date.now();
                  const startScaleHide = 0.38;
                  const endScaleHide = 0;

                  const hideStep = () => {
                    const now = Date.now();
                    let t = (now - hideStartTime) / hideDuration;
                    if (t > 1) t = 1;

                    const s = startScaleHide + (endScaleHide - startScaleHide) * t;
                    const scaleStr = `${s} ${s} ${s}`;
                    this.setData({
                      adlScale: scaleStr
                    });

                    if (t < 1) {
                      setTimeout(hideStep, 16);
                    } else {
                      this.animator2 = null;
                      if (this.audioCtx) {
                        this.audioCtx.destroy();
                        this.audioCtx = null;
                      }
                    }
                  };

                  hideStep();
                });
              }
            }
          };

          this.setData({
            adlScale: '0 0 0'
          });
          step();
      }, 1500);
    }
  }
})