@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/component/animation/animators.md

@@ -0,0 +1,227 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 动画合集
+
+## 一、创建动画合集参数
+
+```js
+animationRef.value?.animatorSet(
+  'SequentiallyAnimatorsId',  //动画合集的id
+  -1,                         //动画合集执行的时长
+  false                       //是否监听动画合集执行状态
+);
+```
+
+* ### 动画合集的id
+
+动画合集通过自定义的`动画id`执行所有的操作。
+
+* ### 动画合集执行的时长
+  `Sets the length of each of the current child animations of this AnimatorSet. By default, each child animation will use its own duration. If the duration is set on the AnimatorSet, then each child animation inherits this duration.`
+
+* ### 监听动画合集执行状态
+
+## 二、动画合集执行顺序
+
+* `playSequentially`
+* `playTogether`
+* `with`
+* `before`
+* `after`
+
+### 1、playSequentially
+
+<img src="/component/animation/animators_play_sequentially.gif" />
+
+#### 第1步：创建动画合集
+
+```js
+//动画合集的id为：SequentiallyAnimatorsId
+animationRef.value?.animatorSet('SequentiallyAnimatorsId', -1, false);
+```
+
+#### 第2步：创建动画并加入到动画合集
+
+``` js
+animationRef.value?.animator('AlphaAnimationId');
+animationRef.value?.animator('ScaleAnimationId');
+animationRef.value?.animator('RotationAnimationId');
+animationRef.value?.animator('TranslationAnimationId');
+
+//playSequentially4
+animationRef.value?.playSequentially(
+    //动画合集的id
+    'SequentiallyAnimatorsId',
+    //动画的id
+    [
+      "AlphaAnimationId",
+      "ScaleAnimationId",
+      "RotationAnimationId",
+      "TranslationAnimationId"
+    ]
+);
+
+```
+
+#### 第3步：执行动画合集
+
+```js
+animationRef.value?.start('SequentiallyAnimatorsId');
+```
+
+### 2、playTogether
+
+<img src="/component/animation/animators_play_together.gif" />
+
+#### 第1步：创建动画合集
+
+```js
+//动画合集的id为：TogetherAnimatorsId
+animationRef.value?.animatorSet('TogetherAnimatorsId', -1, false);
+```
+
+#### 第2步：创建动画并加入到动画合集
+
+``` js
+animationRef.value?.animator('AlphaAnimationId');
+animationRef.value?.animator('ScaleAnimationId');
+animationRef.value?.animator('RotationAnimationId');
+animationRef.value?.animator('TranslationAnimationId');
+
+//playTogether4
+animationRef.value?.playTogether(
+    //动画合集的id
+    'TogetherAnimatorsId',
+    //动画的id
+    [
+      "AlphaAnimationId",
+      "ScaleAnimationId",
+      "RotationAnimationId",
+      "TranslationAnimationId"
+    ]
+);
+
+```
+
+#### 第3步：执行动画合集
+
+```js
+animationRef.value?.start('TogetherAnimatorsId');
+```
+
+### 3、with
+
+<img src="/component/animation/animators_play_with.gif" />
+
+#### 第1步：创建动画合集
+
+```js
+//动画合集的id为：WithAnimatorsId
+animationRef.value?.animatorSet('WithAnimatorsId', -1, false);
+```
+
+#### 第2步：创建动画并加入到动画合集
+
+```js
+animationRef.value?.animator('AlphaAnimationId');
+animationRef.value?.animator('ScaleAnimationId');
+
+//AlphaAnimationId
+animationRef.value?.play(
+  'WithAnimatorsId',
+  "AlphaAnimationId",
+);
+//ScaleAnimationId
+animationRef.value?.with(
+  'WithAnimatorsId',
+  "ScaleAnimationId",
+);
+
+```
+
+#### 第3步：执行动画合集
+
+```js
+animationRef.value?.start('WithAnimatorsId');
+```
+
+### 4、before
+
+<img src="/component/animation/animators_play_before.gif" />
+
+#### 第1步：创建动画合集
+
+```js
+//动画合集的id为：BeforeAnimatorsId
+animationRef.value?.animatorSet('BeforeAnimatorsId', -1, false);
+```
+
+#### 第2步：创建动画并加入到动画合集
+
+```js
+animationRef.value?.animator('AlphaAnimationId');
+animationRef.value?.animator('ScaleAnimationId');
+
+//AlphaAnimationId
+animationRef.value?.play(
+  'BeforeAnimatorsId',
+  "AlphaAnimationId",
+);
+//ScaleAnimationId
+animationRef.value?.before(
+  'BeforeAnimatorsId',
+  "ScaleAnimationId",
+);
+
+```
+
+#### 第3步：执行动画合集
+
+```js
+animationRef.value?.start('BeforeAnimatorsId');
+```
+
+### 5、after
+
+<img src="/component/animation/animators_play_after.gif" />
+
+#### 第1步：创建动画合集
+
+```js
+//动画合集的id为：AfterAnimatorsId
+animationRef.value?.animatorSet('AfterAnimatorsId', -1, false);
+```
+
+#### 第2步：创建动画并加入到动画合集
+
+```js
+animationRef.value?.animator('AlphaAnimationId');
+animationRef.value?.animator('ScaleAnimationId');
+
+//AlphaAnimationId
+animationRef.value?.play(
+  'AfterAnimatorsId',
+  "AlphaAnimationId",
+);
+//ScaleAnimationId
+animationRef.value?.after(
+  'AfterAnimatorsId',
+  "ScaleAnimationId",
+);
+
+```
+
+#### 第3步：执行动画合集
+
+```js
+animationRef.value?.start('AfterAnimatorsId');
+```
+
+:::demo ## 完整示例
+
+component/animation/animators
+
+:::

package/rules/.docs/zh-CN/component/animation/interpolator.md

@@ -0,0 +1,59 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 插值器
+
+## 属性动画动画插值器`QTAnimationInterpolatorType`分类
+
+* `QTAnimationInterpolatorType.QT_ACCELERATE_DECELERATE_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_ACCELERATE_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_ANTICIPATE_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_ANTICIPATE_OVERSHOOT_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_BOUNCE_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_CYCLE_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_DECELERATE_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_LINEAR_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_OVERSHOOT_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_FAST_OUT_LINEAR_IN_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_FAST_OUT_SLOW_IN_INTERPOLATOR`
+* `QTAnimationInterpolatorType.QT_PATH_INTERPOLATOR`
+
+***`QTAnimationInterpolator`类型声明如下：***
+
+```ts
+export interface QTAnimationInterpolator {
+  type: QTAnimationInterpolatorType;
+  params: Array<number>
+}
+```
+
+
+
+## 示例代码
+
+```js
+animationRef.value?.animator(
+  "AccelerateInterpolator",//自定义id
+  QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+  QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+  ["0", "500", '0'],
+  1500,
+  -1,
+  0,
+  false,
+  false,
+  //插值器参数对象
+  {
+    type: QTAnimationInterpolatorType.QT_LINEAR_INTERPOLATOR,
+    params: []
+  },
+);
+```
+
+:::demo ## 完整示例
+
+component/animation/interpolator
+
+:::

package/rules/.docs/zh-CN/component/animation/introduction.md

@@ -0,0 +1,101 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 简介
+
+## 一、 动画是执行的单一动画，动画合集是多个动画组成的执行合集，统称动画。
+
+## 二、 创建动画两种方式：
+
+* [使用属性创建](/zh-CN/component/animation/props)
+* [使用方法创建](/zh-CN/component/animation/method)
+
+## 三、 动画类型：
+
+* `alpha`透明度动画
+* `scale`变形动画
+* `translation`平移动画
+* `rotation`旋转动画
+
+***动画属性类型`QTAnimationPropertyName`的值定义***
+
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION_X`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION_Y`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ROTATION_Z`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_Y`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_Z`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_Y`
+* `QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_Z`
+
+## 四、 动画的操作：
+
+* 创建动画
+* 开始动画
+* 暂停动画
+* 恢复动画
+* 取消动画
+* 翻转动画
+
+## 五、 动画的值类型`QTAnimationValueType`：
+
+* `QT_ANIMATION_VALUE_TYPE_INT = "ofInt"`
+* `QT_ANIMATION_VALUE_TYPE_FLOAT = "ofFloat"`
+
+## API
+
+
+### Attributes
+
+| Name                        | Description       | Type                     | Default  |
+| --------------------------- | ----------------- | -----------------------  | -------- |
+| animator                    | 动画属性值     | ^[QTAnimator] \| ^[QTAnimatorSet]             | -        |
+| autoPlay                    | 自动播放     | ^[boolean]             | false        |
+| loop                    | 循环播放     | ^[boolean]            | false        |
+
+### Events
+
+| Name           | Description                          | Type                                                                |
+| ----------------- | --------------------------------- | ------------------------------------------------------------------- |
+| onAnimationEnd    | 动画结束事件                         | ^[Function]`(id: QTAnimatorId, isReverse: boolean) => void`                               |
+| onAnimationCancel | 动画取消事件                         | ^[Function]`(id: QTAnimatorId) => void`                               |
+| onAnimationStart  | 动画开始事件                         | ^[Function]`(id: QTAnimatorId, isReverse: boolean) => void`                               |
+| onAnimationRepeat | 动画重复执行事件                      | ^[Function]`(id: QTAnimatorId) => void`                               |
+| onAnimationPause  | 动画暂停事件                         | ^[Function]`(id: QTAnimatorId) => void`                               |
+| onAnimationResume | 动画恢复事件                         | ^[Function]`(id: QTAnimatorId) => void`                               |
+| onAnimationUpdate | 动画更新事件                         | ^[Function]`(id: QTAnimatorId, value: string) => void`                               |
+
+### Slots
+
+| Name    | Description               |
+| ------- | ------------------------- |
+| default | 需要执行动画的组件 |
+
+### Exposes
+
+| Name              | Description       | Type                                          |
+| ----------------- | ----------------- | --------------------------------------------- |
+| setPivotX    | 设置x轴方向的旋转点        | ^[Function]`(pivotX: number) => void`     |
+| setPivotY    | 设置y轴方向的旋转点        | ^[Function]`(pivotY: number) => void`     |
+| resetPivot    | 重置旋转点        | ^[Function]`() => void`     |
+| animator    | 创建动画        | ^[Function]`(id: QTAnimatorId, valueType: QTAnimationValueType, propertyName: QTAnimationPropertyName, values: number[], duration: number, repeatMode: QTAnimationRepeatMode, repeatCount: number, listenAnimator: boolean, listenAnimatorValue: boolean, interpolator?: QTAnimationInterpolator) => void`     |
+| animatorSet    | 创建动画集合        | ^[Function]`(animatorId: QTAnimatorId, duration: number, listenAnimator: boolean) => void`     |
+| reset    | 重置所有动画        | ^[Function]`() => void`     |
+| start    | 开始动画        | ^[Function]`(animatorId: QTAnimatorId) => void`     |
+| startDelay    | 延迟开始动画        | ^[Function]`(animatorId: QTAnimatorId, delay: number) => void`     |
+| pause    | 暂停动画        | ^[Function]`(animatorId: QTAnimatorId) => void`     |
+| resume    | 恢复动画        | ^[Function]`(animatorId: QTAnimatorId) => void`     |
+| cancel    | 取消动画        | ^[Function]`(animatorId: QTAnimatorId) => void`     |
+| reverse    | 逆转动画        | ^[Function]`(animatorId: QTAnimatorId) => void`     |
+| play    | 播放动画        | ^[Function]`(animatorSetId: QTAnimatorId, animatorId: QTAnimatorId) => void`     |
+| playWith    | 同时播放动画        | ^[Function]`(animatorSetId: QTAnimatorId, animatorId: QTAnimatorId) => void`     |
+| playBefore    | 在之前播放动画        | ^[Function]`(animatorSetId: QTAnimatorId, animatorId: QTAnimatorId) => void`     |
+| playAfter    | 在之后播放动画        | ^[Function]`(animatorSetId: QTAnimatorId, animatorId: QTAnimatorId) => void`     |
+| playAfterDelay    | 在之后延迟播放动画        | ^[Function]`(animatorSetId: QTAnimatorId, animatorId: QTAnimatorId) => void`     |
+| playSequentially    | 顺序播放动画        | ^[Function]`(animatorSetId: QTAnimatorId, animatorIds: QTAnimatorId[]) => void`     |
+| playTogether    | 同时播放动画        | ^[Function]`(animatorSetId: QTAnimatorId, animatorIds: QTAnimatorId[]) => void`     |

package/rules/.docs/zh-CN/component/animation/listener.md

@@ -0,0 +1,175 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 动画事件监听
+
+## 一、监听动画执行状态
+
+### 第1步：创建动画的时候需要设置是否监听动画状态变化
+
+```js
+animationRef.value?.animator(
+  "1",//自定义id
+  QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+  QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+  ["0", "1"],
+  1000,
+  -1,
+  0,
+  true,//监听动画执行状态
+  false,
+  null,
+);
+```
+
+### 第2步： `<qt-animation>`标签上监听动画执行状态
+
+* `onAnimationStart`：动画开始
+* `onAnimationEnd`：动画结束
+* `onAnimationCancel`：动画取消
+* `onAnimationRepeat`：动画重复执行
+* `onAnimationPause`：动画暂停
+* `onAnimationResume`：动画恢复
+
+```vue
+
+<template>
+  <qt-animation
+    class='animation-view-css'
+    @onAnimationCancel='onAnimationCancel'
+    @onAnimationEnd='onAnimationEnd'
+    @onAnimationStart='onAnimationStart'
+    @onAnimationRepeat='onAnimationRepeat'
+    @onAnimationPause='onAnimationPause'
+    @onAnimationResume='onAnimationResume'>
+    <div class='animation-inner-view-css' />
+  </qt-animation>
+</template>
+
+<script lang='ts'>
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+
+const TAG = 'Animation'
+
+export default defineComponent({
+  setup() {
+
+    const log = useESLog()
+
+    function onAnimationCancel(id) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, '-------onAnimationCancel------->>>>', id)
+      }
+    }
+
+    function onAnimationEnd(id, isReverse) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, '-------onAnimationEnd------->>>>', id, isReverse)
+      }
+    }
+
+    function onAnimationRepeat(id) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, '-------onAnimationRepeat------->>>>', id)
+      }
+    }
+
+    function onAnimationStart(id, isReverse) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, '-------onAnimationStart------->>>>', id, isReverse)
+      }
+    }
+
+    function onAnimationPause(id) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, '-------onAnimationPause------->>>>', id)
+      }
+    }
+
+    function onAnimationResume(id) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, '-------onAnimationResume------->>>>', id)
+      }
+    }
+
+    return {
+      onAnimationCancel,
+      onAnimationEnd,
+      onAnimationRepeat,
+      onAnimationStart,
+      onAnimationPause,
+      onAnimationResume,
+    }
+  },
+});
+
+</script>
+```
+
+## 二、监听动画属性值变化
+
+### 第1步： 创建动画的时候需要设置是否监听动画属性值变化
+
+```js
+animationViewRef.value?.animator(
+  "1",//自定义id
+  QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+  QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+  ["0", "1"],
+  1000,
+  -1,
+  0,
+  false,
+  true,//监听动画属性值变化
+  null,
+);
+```
+
+### 第2步： `<qt-animation>`标签上监听动画属性值变化
+
+* `onAnimationUpdate(id, value)`：`id`为动画的id，`value`为动画当前时刻的属性值
+
+```vue
+
+<template>
+  <qt-animation
+    class='animation-view-css'
+    @onAnimationUpdate='onAnimationUpdate'>
+    <div class='animation-inner-view-css' />
+  </qt-animation>
+</template>
+
+<script lang='ts'>
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+
+const TAG = 'Animation'
+
+export default defineComponent({
+  setup() {
+
+    const log = useESLog()
+
+    function onAnimationUpdate(id, value) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, '-------onAnimationUpdate------->>>>', id, value)
+      }
+    }
+
+    return {
+      onAnimationUpdate,
+    }
+  },
+});
+
+</script>
+```
+
+:::demo ## 完整示例
+
+component/animation/listener
+
+:::

package/rules/.docs/zh-CN/component/animation/method.md

@@ -0,0 +1,87 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 使用方法
+
+## 第一步、注册动画组件
+
+```vue
+
+<qt-animation
+  ref='animationRef'
+  class='animation-view-css'>
+<!-- 包裹需要执行动画的vue组件-->
+<div class='animation-inner-view-class' />
+</qt-animation>
+```
+
+## 第二步、创建动画
+
+创建单个动画和动画合集都需要自定义`不重复的id`，用来后续执行动画的各种操作。
+
+```ts
+animationRef.value?.animator(                                //创建属性值的动画
+  "1",                                                       //自定义id
+  QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,        //动画属性值类型
+  QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,  //动画属性类型
+  ["0", "1"],                                                //属性值
+  1000,                                                      //动画执行时间
+  -1,                                                        //动画重复执行模式
+  0,                                                         //动画重复执行次数
+  false,                                                     //是否监听动画执行状态变化
+  false,                                                     //是否监听动画执行属性值变化
+  {                                                          //插值器参数对象
+    type: QTAnimationInterpolatorType.QT_ACCELERATE_INTERPOLATOR,
+  }
+);
+```
+
+## 第三步、执行动画
+
+### 开始动画
+
+参数为创建的动画的`id`
+
+`animationViewRef.value?.start("1");`
+
+### 延迟开始动画
+
+参数为创建的动画的`id`
+
+`animationViewRef.value?.startDelay("1", 2000);`
+
+### 暂停动画
+
+参数为创建的动画的`id`
+
+`animationViewRef.value?.pause("1");`
+
+### 恢复动画
+
+参数为创建的动画的`id`
+
+`animationViewRef.value?.resume("1");`
+
+### 取消动画
+
+参数为创建的动画的`id`
+
+`animationViewRef.value?.cancel("1");`
+
+### 翻转动画
+
+参数为创建的动画的`id`
+
+`animationViewRef.value?.reverse("1");`
+
+### 重置所有动画
+
+`animationViewRef.value?.reset();`
+
+:::demo ## 完整示例
+
+component/animation/basic
+
+:::