ICanvas - 动画系统

注意

动画的添加一定要在图形被添加到render后再执行动画的创建。

创建动画实例

uts

import { ICanvas } from '@/uni_modules/tmx-ui/core/canvas/ICanvas.uts';
import { CanvasEventType, ICanvasEvent } from '@/uni_modules/tmx-ui/core/canvas/interface.uts';
// 导入动画库
import { Tween } from '@/uni_modules/tmx-ui/core/canvas/lib/animation/tween.uts';
// 导入一个矩形图形
import { IRect } from '@/uni_modules/tmx-ui/core/canvas/lib/rect.uts';

const proxy = getCurrentInstance()?.proxy ?? null;
const canvasId = "xCanvas-" + Math.random().toString(16).substring(4)
// render 就是画布实例
const render = ref<ICanvas>(new ICanvas({ canvasId: canvasId,component: proxy as any | null }));

// 创建矩形
const rect = new IRect({
	draggable: true,
	x: 100, y: 100, width: 100, height: 50, fill: "#572cff", rotation: 45, opacity: 0.6,rotateCenter:'center'
}, render)

render.addShape(rect)

// 为矩形添加一个圆角循环变动的动画。
// tw就是动画实例
const tw = new Tween(rect, render)
	.to({ radius: 24 })
	.setYoyo(true)
	.setLoop(-1)
	.start()

vue

<canvas :id="canvasId"  style="width: 100%;height: 350px;" ref="canvasDom">
</canvas>