@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/animation/animator-props.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="true">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div
+      class="es-sdk-content-column-css"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="开始动画" @onButtonClicked="startAnimator" />
+        <s-text-button text="反转动画" @onButtonClicked="reverseAnimator" />
+        <s-text-button text="暂停动画" @onButtonClicked="pauseAnimator" />
+        <s-text-button text="恢复动画" @onButtonClicked="resumeAnimator" />
+        <s-text-button text="取消动画" @onButtonClicked="cancelAnimator" />
+      </div>
+      <qt-animation
+        ref="animationView"
+        class="animation-view-css"
+        :animator="animator"
+      >
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import { QTAnimationType, QTAnimationValueType } from "@quicktvui/quicktvui3";
+import type { QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "AnimatorProps",
+  emits: [],
+  setup() {
+    const animationView = ref<QTIAnimation>();
+    const router = useESRouter();
+    const animator = {
+      id: "n", //默认可缺省
+      valueType: QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT, //默认可缺省
+      type: QTAnimationType.TRANSLATION_X,
+      values: [0, 300, 60, -60, 60, 0, 800, 60, -600, 60],
+      duration: 10000,
+      repeatMode: -1, //默认可缺省
+      repeatCount: 0, //默认可缺省
+      listenAnimator: false, //默认可缺省
+      listenAnimatorValue: false, //默认可缺省
+      interpolator: {
+        //默认可缺省
+        type: 11,
+      },
+    };
+
+    function startAnimator() {
+      animationView.value?.start();
+    }
+
+    function reverseAnimator() {
+      animationView.value?.reverse();
+    }
+
+    function pauseAnimator() {
+      animationView.value?.pause();
+    }
+
+    function resumeAnimator() {
+      animationView.value?.resume();
+    }
+
+    function cancelAnimator() {
+      animationView.value?.cancel();
+    }
+
+    function resetAnimators() {
+      animationView.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationView,
+      animator,
+      startAnimator,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>

package/rules/.docs/examples/component/animation/animators-props.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="true">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div
+      class="es-sdk-content-column-css"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="开始动画" @onButtonClicked="startAnimator" />
+        <s-text-button text="反转动画" @onButtonClicked="reverseAnimator" />
+        <s-text-button text="暂停动画" @onButtonClicked="pauseAnimator" />
+        <s-text-button text="恢复动画" @onButtonClicked="resumeAnimator" />
+        <s-text-button text="取消动画" @onButtonClicked="cancelAnimator" />
+      </div>
+      <qt-animation
+        ref="animationView"
+        class="animation-view-css"
+        :animator="animator"
+      >
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  QTAnimationType,
+  QTAnimationValueType,
+  QTAnimator,
+  QTAnimatorId,
+  QTAnimatorRelationType,
+} from "@quicktvui/quicktvui3";
+import type { QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "AnimatorsProps",
+  emits: [],
+  setup() {
+    const animationView = ref<QTIAnimation>();
+    const router = useESRouter();
+    const animator = {
+      id: "AnimatorSet", //默认可缺省
+      duration: 10000, //默认可缺省
+      listenAnimator: false, //默认可缺省
+      relationType: QTAnimatorRelationType.TOGETHER, //默认可缺省
+      animators: [
+        {
+          id: "animator_1", //默认可缺省
+          valueType: QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT, //默认可缺省
+          type: QTAnimationType.TRANSLATION_X,
+          values: [0, 300, 60, -60, 60, 0, 800, 60, -600, 60],
+          duration: 10000,
+          repeatMode: -1, //默认可缺省
+          repeatCount: 0, //默认可缺省
+          listenAnimator: false, //默认可缺省
+          listenAnimatorValue: false, //默认可缺省
+          interpolator: {
+            //默认可缺省
+            type: 11,
+          },
+        },
+        {
+          id: "animator_2", //默认可缺省
+          valueType: QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT, //默认可缺省
+          type: QTAnimationType.SCALE_X,
+          values: [0, 2.5],
+          duration: 2000,
+          repeatMode: -1, //默认可缺省
+          repeatCount: 0, //默认可缺省
+          listenAnimator: false, //默认可缺省
+          listenAnimatorValue: false, //默认可缺省
+          interpolator: {
+            //默认可缺省
+            type: 11,
+          },
+        },
+        {
+          id: "animator_3", //默认可缺省
+          valueType: QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT, //默认可缺省
+          type: QTAnimationType.ALPHA,
+          values: [0, 1],
+          duration: 2000,
+          repeatMode: -1, //默认可缺省
+          repeatCount: 0, //默认可缺省
+          listenAnimator: false, //默认可缺省
+          listenAnimatorValue: false, //默认可缺省
+          interpolator: {
+            //默认可缺省
+            type: 11,
+          },
+        },
+      ],
+    };
+
+    function startAnimator() {
+      animationView.value?.start();
+    }
+
+    function reverseAnimator() {
+      animationView.value?.reverse();
+    }
+
+    function pauseAnimator() {
+      animationView.value?.pause();
+    }
+
+    function resumeAnimator() {
+      animationView.value?.resume();
+    }
+
+    function cancelAnimator() {
+      animationView.value?.cancel();
+    }
+
+    function resetAnimators() {
+      animationView.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationView,
+      animator,
+      startAnimator,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>

package/rules/.docs/examples/component/animation/animators.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div
+      class="es-sdk-content-column-css"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <s-text-view text="Animators执行顺序" />
+      <div class="es-sdk-content-row-css">
+        <s-text-button
+          text="playSequentially"
+          @onButtonClicked="playSequentially"
+        />
+        <s-text-button text="playTogether" @onButtonClicked="playTogether" />
+        <s-text-button text="with" @onButtonClicked="playWith" />
+        <s-text-button text="before" @onButtonClicked="playBefore" />
+        <s-text-button text="after" @onButtonClicked="playAfter" />
+      </div>
+      <div class="es-sdk-content-divider-css" />
+      <s-text-view
+        text="以为Sequentially动画为例，操作Animators，首先点击'playSequentially'按钮，然后再执行以下按钮操作"
+      />
+      <div class="es-sdk-content-row-css">
+        <s-text-button
+          text="延迟2s开始Sequentially动画"
+          @onButtonClicked="startAnimatorDelay"
+        />
+        <s-text-button
+          text="反转Sequentially动画"
+          @onButtonClicked="reverseAnimator"
+        />
+        <s-text-button
+          text="暂停Sequentially动画"
+          @onButtonClicked="pauseAnimator"
+        />
+        <s-text-button
+          text="恢复Sequentially动画"
+          @onButtonClicked="resumeAnimator"
+        />
+        <s-text-button
+          text="取消Sequentially动画"
+          @onButtonClicked="cancelAnimator"
+        />
+      </div>
+      <div class="es-sdk-content-divider-css" />
+      <qt-animation ref="animationRef" class="animation-view-css">
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  QTAnimationPropertyName,
+  QTAnimationValueType,
+} from "@quicktvui/quicktvui3";
+import type { QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "Animators",
+  emits: [],
+  setup() {
+    const animationRef = ref<QTIAnimation>();
+    const router = useESRouter();
+
+    function playSequentially() {
+      //1.
+      animationRef.value?.animatorSet("SequentiallyAnimatorsId", -1, false);
+      animationRef.value?.animator(
+        "AlphaAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+        [0, 1],
+        2000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "ScaleAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 2.5],
+        2000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "RotationAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION,
+        [0, 300],
+        2000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "TranslationAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300],
+        2000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.playSequentially("SequentiallyAnimatorsId", [
+        "AlphaAnimationId",
+        "ScaleAnimationId",
+        "RotationAnimationId",
+        "TranslationAnimationId",
+      ]);
+      animationRef.value?.start("SequentiallyAnimatorsId");
+    }
+
+    function playTogether() {
+      //1.
+      animationRef.value?.animatorSet("TogetherAnimatorsId", -1, false);
+      animationRef.value?.animator(
+        "AlphaAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+        [0, 1],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "ScaleAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "RotationAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION,
+        [0, 30],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "TranslationAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.playTogether("TogetherAnimatorsId", [
+        "AlphaAnimationId",
+        "ScaleAnimationId",
+        "RotationAnimationId",
+        "TranslationAnimationId",
+      ]);
+      animationRef.value?.start("TogetherAnimatorsId");
+    }
+
+    function playWith() {
+      //1.
+      animationRef.value?.animatorSet("WithAnimatorsId", -1, false);
+      animationRef.value?.animator(
+        "AlphaAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+        [0, 1],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "ScaleAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.play("WithAnimatorsId", "AlphaAnimationId");
+      animationRef.value?.playWith("WithAnimatorsId", "ScaleAnimationId");
+      animationRef.value?.start("WithAnimatorsId");
+    }
+
+    function playBefore() {
+      //1.
+      animationRef.value?.animatorSet("BeforeAnimatorsId", -1, false);
+      animationRef.value?.animator(
+        "TranslationAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "ScaleAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.play("BeforeAnimatorsId", "TranslationAnimationId");
+      animationRef.value?.playBefore("BeforeAnimatorsId", "ScaleAnimationId");
+      animationRef.value?.start("BeforeAnimatorsId");
+    }
+
+    function playAfter() {
+      //1.
+      animationRef.value?.animatorSet("WidthAnimatorsId", -1, false);
+      animationRef.value?.animator(
+        "TranslationAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.animator(
+        "ScaleAnimationId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.play("WidthAnimatorsId", "TranslationAnimationId");
+      animationRef.value?.playAfter("WidthAnimatorsId", "ScaleAnimationId");
+      animationRef.value?.start("WidthAnimatorsId");
+    }
+
+    function startAnimatorDelay() {
+      animationRef.value?.startDelay("SequentiallyAnimatorsId", 2000);
+    }
+
+    function reverseAnimator() {
+      animationRef.value?.reverse("SequentiallyAnimatorsId");
+    }
+
+    function pauseAnimator() {
+      animationRef.value?.pause("SequentiallyAnimatorsId");
+    }
+
+    function resumeAnimator() {
+      animationRef.value?.resume("SequentiallyAnimatorsId");
+    }
+
+    function cancelAnimator() {
+      animationRef.value?.cancel("SequentiallyAnimatorsId");
+    }
+
+    function resetAnimators() {
+      animationRef.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationRef,
+      playSequentially,
+      playTogether,
+      playWith,
+      playBefore,
+      playAfter,
+      startAnimatorDelay,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>

package/rules/.docs/examples/component/animation/basic.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div
+      class="es-sdk-content-column-css"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始动画" @onButtonClicked="initAnimator" />
+        <s-text-button text="反转动画" @onButtonClicked="reverseAnimator" />
+        <s-text-button text="暂停动画" @onButtonClicked="pauseAnimator" />
+        <s-text-button text="恢复动画" @onButtonClicked="resumeAnimator" />
+        <s-text-button text="取消动画" @onButtonClicked="cancelAnimator" />
+        <s-text-button text="重置所有动画" @onButtonClicked="resetAnimators" />
+      </div>
+      <qt-animation ref="animationRef" class="animation-view-css">
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  QTAnimationPropertyName,
+  QTAnimationValueType,
+} from "@quicktvui/quicktvui3";
+import type { QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "基础用法",
+  emits: [],
+  setup() {
+    const animationRef = ref<QTIAnimation>();
+    const router = useESRouter();
+
+    function initAnimator() {
+      animationRef.value?.animator(
+        "AnimatorId", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
+        10000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationRef.value?.start("AnimatorId");
+    }
+
+    function reverseAnimator() {
+      animationRef.value?.reverse("AnimatorId");
+    }
+
+    function pauseAnimator() {
+      animationRef.value?.pause("AnimatorId");
+    }
+
+    function resumeAnimator() {
+      animationRef.value?.resume("AnimatorId");
+    }
+
+    function cancelAnimator() {
+      animationRef.value?.cancel("AnimatorId");
+    }
+
+    function resetAnimators() {
+      animationRef.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationRef,
+      initAnimator,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>