时间戳

首页 > 解决方案 > Pixi.js - 如何为线条制作动画

pixi.js - Pixi.js - 如何为线条制作动画

问题描述

我一直在到处寻找，但找不到在 Pixi.js 中为线条设置动画的方法。

鉴于此代码：

var line = new PIXI.Graphics();
line.lineStyle(1, 0xff0000);
line.moveTo(0,window.innerHeight/2);
line.lineTo(window.innerWidth/2, 0);
line.lineTo(window.innerWidth, window.innerHeight/2);
app.stage.addChild(line);

它画了这个宏伟的jsfiddle

我想实现这个非常简单的线条动画：

第1步

第1步

第2步

在此处输入图像描述

当然我猜这不应该很复杂，但我不知道我错过了什么......
任何帮助将不胜感激！

标签： pixi.js

解决方案

在 API 术语中，在图形对象内部绘图与在没有 Pixi 的情况下绘制到 Canvas 非常相似。

需要一个渲染循环，在每个循环中清除和重绘画布。Pixi 提供了一个有用的 Ticker，可用于在循环中运行函数。

这是一个示例（在本例中为无限动画）和一个jsfiddle 示例：

var line = new PIXI.Graphics(),
  centerY = 0,
  increment = 2;

app.stage.addChild(line);   

app.ticker.add(() => {
  // clear the graphics object ('wipe the blackboard')
  line.clear(); 

   // redraw a new line
  drawLine(centerY);

  // calculate the next position
  centerY = (centerY < window.innerHeight) ? centerY = centerY + increment : 0; 
});

function drawLine(centerY) {
    line.lineStyle(1, 0xff0000);
    line.moveTo(0,window.innerHeight/2);
    line.lineTo(window.innerWidth/2, centerY);
    line.lineTo(window.innerWidth, window.innerHeight/2);
}

推荐阅读