javascript - Flash/Animate CC 补间格式数字

Question

我正在使用 Animate CC(erstwhile Flash CC )制作一些以 HTML5 格式导出的广告(<canvas> 和 CreateJS 等内容)。他们总体上工作得很好。

我在静态文本框中有一个格式化的数字，如下所示:5,000,000我想将其调整为 20,000 ，在 30 帧的过程中。我想将相同的文本补间到 5,000和1,000,000等等在我的场景的整个过程中。

根据我有限的 Animate CC 经验，我已经设法避免使用任何 Javascript，但我想我现在需要这样做。所以，我的问题是:我该怎么做？

<小时/>

我对此的想法:

因为我使用的是 CreateJS，它有 TweenJS库作为它的一部分，也许我可以用它来补间？在我的时间线的不同点进行一些小行动？不确定这一切是如何工作的，网上的很多引用资料都是针对 ActionScript 3 甚至 AS2 的。示例代码将不胜感激。

如果我确实接触了 Javascript，就会出现如何进行数字格式化的问题。我可以将数字补间为 5000000 -> 20000并在每个帧更新上插入逗号，这是一种方法。但让事情变得更复杂的是，这些广告将被翻译，并且不同的地区也将混合在一起。所以用英语你会得到 5,000,000在德语中你会 5.000.000 ，当然。

由于我们在浏览器中讨论 Javascript，因此我知道该方法 Number.prototype.toLocaleString()它执行以下操作:

The toLocaleString() method returns a string with a language sensitive representation of this number.

这似乎可以解决问题，但是我必须担心浏览器兼容性以及如果我不指定区域设置会发生什么。理想情况下，由于德语广告只会向浏览器/操作系统上有德语区域设置的用户显示，因此我可以在不指定任何区域设置的情况下调用该方法，并且它会从用户的计算机上读取它。我想可能会出现这样的情况:德国人看到英文广告，但我对此并不担心。

但是，在MDN page上对于 toLocaleString()它对早期版本的 FF 默认使用西方阿拉伯数字有一个很大的警告，所以这让我完全怀疑该方法的使用。

<小时/>

最后，我有一个有趣的事实，翻译人员几乎肯定会采用 5,000,000并将其转换为5.000.000对于德语。因此可以避免使用 toLocaleString()因为我已经有了本地化的文本。因此，如果可以编写一个简单的 Javascript 函数来补间任意格式的数字，我认为这就能解决问题。也许:

• 取出起始编号并从中提取格式，然后保存
• 对数字进行补间
• 在每个帧更新时，将格式注入(inject)回其中

从 JS 的 Angular 来看，这可能并不难，但令我困惑的是我到底该如何在 Animate/Flash 和/或 CreateJS/TweenJS 中做到这一点？

Answer 1

就使用 TweenJS 补间格式化数字而言，您可以只补间非格式化数字，然后在“更改”时创建一个格式化版本来执行您需要的操作:

createjs.Tween.get(obj, {loop:true})
    .to({val:10000}, 4000)
  .to({val:0}, 4000)
  .on("change", formatNumber);

function formatNumber(event) {
    // Round and format
    var formattedNumber = (obj.val|0).toLocaleString();
}

这是一个简单的 fiddle :http://jsfiddle.net/m3req5g5/