!!!###!!!title=表格轮播动画——VisActor/VTable 教程文档!!!###!!!!!!###!!!description=VTable 提供表格轮播动画插件,支持表格的行或列的轮播动画。效果如下:<div style="display: flex; justify-content: center;"> <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif" style="flex: 0 0 50%; padding: 10px;"></div>!!!###!!!

表格轮播动画插件

VTable 提供表格轮播动画插件,支持表格的行或列的轮播动画。

效果如下:

使用示例

const tableCarouselAnimationPlugin = new TableCarouselAnimationPlugin({
  rowCount: 10,
  colCount: 10,
  animationDuration: 1000,
  animationDelay: 0,
  animationEasing: 'linear',
  autoPlay: true,
  autoPlayDelay: 1000,
});

const option: VTable.ListTableConstructorOptions = {
  records,
  columns,
  plugins: [tableCarouselAnimationPlugin],
};

如果并不期望表格初始化后马上进行播放的话,可以配置autoPlayfalse,然后手动调用play方法进行播放。

tableCarouselAnimationPlugin.play();

插件参数说明

插件提供个性化配置,可以配置以下参数:

参数类型说明
rowCountnumber每次动画滚动行数
colCountnumber每次动画滚动列数
animationDurationnumber动画时长
animationDelaynumber动画延迟
animationEasingstring动画缓动函数
autoPlayboolean是否自动播放
autoPlayDelaynumber自动播放延迟
customDistRowFunction(row: number, table: BaseTableAPI) => { distRow: number; animation?: boolean }自定义动画距离
customDistColFunction(col: number, table: BaseTableAPI) => { distCol: number; animation?: boolean }自定义动画距离

运行示例