mirrors/VTable
1
0
Fork 0
mirror of https://github.com/VisActor/VTable synced 2024-11-22 01:52:03 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: add animation in custom-layout

Browse Source
This commit is contained in:
Rui-Sun 2024-11-14 17:13:05 +08:00
parent 1091fa129a
commit 4517a7c1a5
2 changed files with 89 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
docs/assets/guide/en/custom_define/custom_layout.md
View File

@ -222,7 +222,7 @@ Using the percentCalc method to specify the width and height of a container in p
## JSX Primitives
For detailed instructions, please refer to the tutorial provided by VRender: [TODO]
For detailed instructions, please refer to the tutorial provided by VRender: [`VRender Primitive Configuration`](https://visactor.io/vrender/option/Group)
### Container Primitives
@ -415,19 +415,21 @@ label component
_- customLayout supports object creation syntax_
To create primitive objects using CustomLayout, you need to use `new VTable.CustomLayout.XXX` to create primitives. For specific configuration properties, refer to [`VRender Primitive Configuration`](https://visactor.io/vrender/option/Group)
To create primitive objects using CustomLayout, you need to use `createXXX` to create primitives. For specific configuration properties, refer to [`VRender Primitive Configuration`](https://visactor.io/vrender/option/Group)
For example:
```ts
const text1 = new VTable.CustomLayout.Text({
import { createText, createGroup } from '@visactor/vtable/es/vrender';
const text1 = new createText({
text: 'text',
fontSize: 28,
fontFamily: 'sans-serif',
fill: 'black'
});
const container = new VTable.CustomLayout.Container({
const container = new createGroup({
height,
width
});
@ -439,16 +441,43 @@ return {
};
```
The correspondence between CustomLayout common graphics elements and jsx graphics elements is as follows:
## Animation
| JSX graphic | CustomLayout graphic |
| :---------- | :-------------------- |
| VRect | CustomLayout.Rect |
| VCircle | CustomLayout.Circle |
| VText | CustomLayout.Text |
| VImage | CustomLayout.Image |
| VLine | CustomLayout.Line |
| VGroup | CustomLayout.Group |
| VTag | CustomLayout.Tag |
| VRadio | CustomLayout.Radio |
| VCheckbox | CustomLayout.Checkbox |
VTable provides animation support for custom layouts, you can refer to the [VRender animation tutorial](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Animate) for details. It should be noted that the animation needs to be configured as a timeline on the VTable instance to ensure the consistency of the animation.
If you create a primitive in JSX, you need to add the `animation` attribute and `timeline` to the primitive tag. The `animation` attribute is an array containing the operations in the VRender animation, which will be chained after the object is instantiated, for example:
```tsx
<VImage
attribute={{
id: 'icon',
width: 50,
height: 50,
src: record.bloggerAvatar,
shape: 'circle',
anchor: [25, 25]
}}
animation={[
['to', { angle: 2 * Math.PI }, 1000, 'linear'],
['loop', Infinity]
]}
timeline={table.animationManager.timeline}
></VImage>
```
If you create a primitive in an instantiated way, you need to call `animation.setTimeline(table.animationManager.timeline);` once, for example:
```ts
const icon = new VTable.CustomLayout.Image({
id: 'icon',
width: 50,
height: 50,
src: record.bloggerAvatar,
shape: 'circle',
anchor: [25, 25]
});
iconGroup.add(icon);
const animation = icon.animate();
animation.setTimeline(table.animationManager.timeline);
animation.to({ angle: 2 * Math.PI }, 1000, 'linear').loop(Infinity);
```

60
docs/assets/guide/zh/custom_define/custom_layout.md
View File

@ -222,7 +222,7 @@ customLayout 函数返回一个对象，该对象需要有：`rootContainer`来
## JSX 图元
详细说明请参考 VRender 提供的教程：[TODO]
详细说明请参考 VRender 提供的教程：[`VRender图元配置`](https://visactor.io/vrender/option/Group)
### 容器图元
@ -415,19 +415,21 @@ customLayout 函数返回一个对象，该对象需要有：`rootContainer`来
_- customLayout 支持对象创建的写法_
CustomLayout 创建图元对象的写法，需要通过`new VTable.CustomLayout.XXX`创建图元，具体创建时配置属性可以参考[`VRender图元配置`](https://visactor.io/vrender/option/Group)
CustomLayout 创建图元对象的写法，需要通过`createXXX`创建图元，具体创建时配置属性可以参考[`VRender图元配置`](https://visactor.io/vrender/option/Group)
例如：
```ts
const text1 = new VTable.CustomLayout.Text({
import { createText, createGroup } from '@visactor/vtable/es/vrender';
const text1 = new createText({
text: 'text',
fontSize: 28,
fontFamily: 'sans-serif',
fill: 'black'
});
const container = new VTable.CustomLayout.Container({
const container = new createGroup({
height,
width
});
@ -439,16 +441,42 @@ return {
};
```
CustomLayout 常用图元与 jsx 图元对应如下：
## 动画
| JSX 图元 | CustomLayout 图元 |
| :-------- | :-------------------- |
| VRect | CustomLayout.Rect |
| VCircle | CustomLayout.Circle |
| VText | CustomLayout.Text |
| VImage | CustomLayout.Image |
| VLine | CustomLayout.Line |
| VGroup | CustomLayout.Group |
| VTag | CustomLayout.Tag |
| VRadio | CustomLayout.Radio |
| VCheckbox | CustomLayout.Checkbox |
VTable支持在自定义布局中，使用VRender提供的动画能力，具体使用方法请参考[VRender动画](https://visactor.io/vrender/guide/asd/Basic_Tutorial/Animate)。需要注意的是动画需要配置为VTable实例上的timeline，以保证动画的一致性。
如果以JSX方式创建图元，需要在图元标签上添加`animation`属性和`timeline`。`animation`属性为一个数组，内是VRender动画中的操作，会在实例化对象后进行链式调用，例如：
```tsx
<VImage
attribute={{
id: 'icon',
width: 50,
height: 50,
src: record.bloggerAvatar,
shape: 'circle',
anchor: [25, 25]
}}
animation={[
['to', { angle: 2 * Math.PI }, 1000, 'linear'],
['loop', Infinity]
]}
timeline={table.animationManager.timeline}
></VImage>
```
如果以实例化的方式创建图元，需要注意需要调用一次`animation.setTimeline(table.animationManager.timeline);`，例如：
```ts
const icon = new VTable.CustomLayout.Image({
id: 'icon',
width: 50,
height: 50,
src: record.bloggerAvatar,
shape: 'circle',
anchor: [25, 25]
});
iconGroup.add(icon);
const animation = icon.animate();
animation.setTimeline(table.animationManager.timeline);
animation.to({ angle: 2 * Math.PI }, 1000, 'linear').loop(Infinity);
```