Quick Start for Events and Animations

In this section, we will learn how to use the scene tree to describe a scene, as well as how to use it in cross-platform environments.

Our scene is very simple, consisting of a circular "drum." When the "drum" is clicked, it will trigger an animation, launching many small circles.

Create a Canvas

import { createBrowserVRenderApp } from '@visactor/vrender';

const app = createBrowserVRenderApp();

// Create a stage with a default initial layer.
const stage = app.createStage({
  canvas: 'main',
  autoRender: true
});

Create Nodes

import { createCircle, createGroup, defaultTicker } from '@visactor/vrender';

const c1 = createCircle({
    radius: 60,
    x: 300,
    y: 300,
    fill: 'orange',
    stroke: '#ccc',
    lineWidth: 6,
    innerBorder: {
      distance: 10,
      lineWidth: 2,
      stroke: '#eee'
    }
 });

const group = createGroup({});

group.add(c1);

// Start the animation ticker when the application is ready.
defaultTicker.start();

stage.defaultLayer.add(group);

Add Events and Animations

// 监听click事件
c1.addEventListener('click', () => {
    c1.animate()
      .to({radius: 70}, 300, 'elasticOut')
      .to({radius: 60}, 600, 'linear');
    // 创建60个circle然后进行动画，完成后销毁
    for (let i = 0; i < 60; i++) {
      const angle = Math.random() * Math.PI * 2;
      const dir = [Math.cos(angle), Math.sin(angle)];
      const c = createCircle({
        x: 300,
        y: 300,
        radius: 8,
        fill: colors[Math.floor(Math.random() * colors.length)]
      });
      group.add(c);
      c.animate({
        onEnd() {
          // 动画结束后从将节点场景树中删除
          group.removeChild(c);
        }
      }).to({ dx: dir[0] * 200, dy: dir[1] * 200, opacity: 0 }, 2000, 'cubicOut');
    }
  });