修改文字内容

template

<template>
  <div class="demo1content">
    <el-button @click="handleplay" type="primary" class="buttonplay"
      >播放</el-button
    >
  </div>

  <!--动画遮罩层-->
  <div class="mask" v-show="maskVisible">
    <div style="text-align: center; margin-top: 25px; color: white">
      要修改的文字:
    </div>
    <div>
      <input
        type="text"
        v-model="inputvalue"
        style="
                    height: 40px;
                    border: 1px solid #ccc;
                    width: 80px;
                    margin: 0 auto;
                    display: block;
                    margin-top: 25px;
                "
      />
    </div>
    <div>
      <el-button @click="handleupdate" type="primary" class="buttonplay"
        >修改</el-button
      >
    </div>
    <div>
      <el-button @click="closemask" type="primary" class="buttonplay"
        >关闭</el-button
      >
    </div>
    <div id="GE-Container"></div>
  </div>
  <!--动画遮罩层-->
</template>

<script setup>
// 引入动画需要的
import { useGe } from "./hooks/useGe.js";
const { init, handleplay, maskVisible, closemask, handleupdate, inputvalue } =
  useGe();
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
</style>

hooks

• hooks/useGe.js

// 引入控制器
import { Player, TextComponent } from "@galacean/effects";
export function useGe() {
  // 页面控制器
  const player = ref(null);
  // 初始化
  const init = () => {
    nextTick(() => {
      const container = document.getElementById("GE-Container");
      container.style.height = "800px";
      container.style.width = "800px";
      // container.style.backgroundColor = 'red';
      container.style.margin = "0 auto";
      container.style.marginTop = "100px";
      // 赋值动画容器
      player.value = new Player({ container, env: "PC" });
      player.value.loadScene("https://你自己的", {
        autoplay: false,
      });
    });
  };
  // 播放
  const handleplay = () => {
    maskVisible.value = true;
    player.value.play();
  };
  // 遮罩层
  const maskVisible = ref(false);
  // 关闭
  const closemask = () => {
    maskVisible.value = false;
    player.value.pause();
  };
  /* 修改文字 */
  const inputvalue = ref("");
  const handleupdate = () => {
    // 获取动画控制器
    const composition = player.value.getCompositionByName("demo1"); // 获取的是那个json也就是合成名字
    // 获取文本元素
    const titleTextItem = composition?.getItemByName("text_1"); // 你自己在动画里面设置的组件名
    if (!titleTextItem) {
      return;
    }
    // 获取文本组件
    const textComponent = titleTextItem.getComponent(TextComponent);
    // 设置输入框的值 我这里是设置end以后都不用修改了
    if (textComponent.text == "end") {
      return;
    } else {
      // 改变文字
      textComponent.setText(inputvalue.value);
    }
  };
  onMounted(() => {
    init();
    console.log("动画开始");
  });
  onUnmounted(() => {
    player.value.dispose(); // player销毁
    console.log("动画结束");
  });
  /* 修改文字结束 */
  return {
    init,
    handleplay,
    player,
    maskVisible,
    closemask,
    handleupdate,
    inputvalue,
  };
}