如何用HTML5画布用Leon动画化文本权重

Question

使用字体利昂·桑斯 (允许通过画布进行动态动画)，当每个字母变得更厚时，我如何才能动画给定的文本字符串的重量，就像这样：

​

​

(在自述文件中，在“权重更改”列表项目上方的“什么是特殊的”部分中，可以看到所需效果的动画gif。)

工作起动器代码

我有一个字符串，它正确地用建议的初学者代码绘制：

let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'animate this text',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

(针对故障的工作代码定制示例)

失败尝试

字体的创建者给我提供了使用以下代码片段的这一建议：

this.leons_ = [];
this.text_ = String('animate this text').split('');
this.leonTotal_ = this.text_.length;
for (let i = 0; i < this.leonTotal_; i++) {
  const ls = new LeonSans({
    text: this.text_[i],
    color: ['blue'],
    size: 100,
    weight: 200
  });
  this.leons_.push(ls);
}

但我还是不能让它起作用。当我尝试以这种方式将其合并时，屏幕上根本没有任何文本：

let leon, canvas, ctx;
let leons_, text_, leonTotal_;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leons_ = [];
    text_ = String('animate this text').split('');
    leonTotal_ = text_.length;
    for (let i = 0; i < leonTotal_; i++) {
      const ls = new LeonSans({
        text: text_[i],
        color: ['blue'],
        size: 100,
        weight: 200
      });
      leons_.push(ls);
    }

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

我得到控制台错误：

leon.js:5316 Uncaught TypeError: Cannot read property 'rect' of undefined

关于这一行：

const x = (sw - leon.rect.w) / 2;

但我怀疑，在具体调试该错误之前，我需要修复我的方法。

有什么想法吗？(请随意重新组合与上述问题相关的故障项目。)

谢谢。

Answer 1

对任何感兴趣的人来说，我都想通了。

从上面失败的尝试开始，我能够使用我创建的数组leons_和TweenMax.staggerFromTo循环遍历数组中的每个字母：

TweenMax.staggerFromTo(
  leons_,
  1,
  {
    weight: minWeight,
    size: sw * leonHeightRatio
  },                    
  {
    weight: maxWeight,
    size: sw * leonHeightRatioLarge,
    repeat: -1,
    yoyo: true,
    ease: Power2.easeInOut
  },
0.1);

在这里查看工作代码示例：https://leon-sans-staggered-weight-size-animations.glitch.me/