吐温JS答案 - 爱码网

【问题标题】：TweenJS javascript吐温JS
【发布时间】：2017-03-21 02:19:08
【问题描述】：

我的第一个 Stackoverflow 问题。补间似乎在运行，因为它在最后调用了 brute 函数。但是，没有发生补间。

window.onload=init();
function init() {
    testImg = document.getElementById("testImg");
    createjs.Tween.get(testImg).wait(2000).to({alpha: 1}, 600).call(brute);
}
function brute() {
    // why this function get called if there's no visible tween?
    console.log("testImg alpha is " + testImg.alpha)
    testImg.style.opacity=1;
}

#testImg {
    opacity: .3;
    background: url("http://oyos.org/oyosbtn_466x621.jpg");
}

<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

<body>
    <div id="testImg">
        here is the div
    </div>
</body>

【问题讨论】：

标签： javascript createjs tween tween.js

【解决方案1】：

TweenJS 并没有真正针对 HTML 元素的补间样式进行优化，因为它是为直接在对象上补间属性而开发的。有一个CSS plugin 可以提供帮助，尤其是在处理具有后缀的属性时（例如宽度/高度上的“px”等）

但是，绝对可以做到。您的代码存在一些问题：

正如您在上面的评论中提到的，您必须改为以“不透明度”为目标。 alpha 属性是 EaselJS DisplayObjects 使用的。
您必须改为以testImg.style 为目标，因为不透明度存在于该元素上，而不是直接存在于testImg 上。在#testImg 上设置 opacity/alpha 将无济于事
不幸的是，TweenJS 不知道如何使用 CSS 类或选择器读取元素上设置的 CSS 属性。 getComputedStyle 的查找成本非常，并且需要确定元素的当前样式是什么。

你完全可以让你的演示工作，但你必须考虑这些事情。这是一个更新的 sn-p（来自 pen）：

createjs.Tween.get(testImg.style)     // Target the style
  .to({opacity:0.3})                  // Set the property initially
  .wait(2000)
  .to({opacity: 1}, 600)
  .call(brute); // Tween the opacity instead

您也可以使用change 事件自行更新不透明度：

createjs.Tween.get(testImg)
  .set({alpha:0}) // Still requires an initial set
  .wait(2000)
  .to({alpha:1})
  .call(brute)
  .on("change", function(event) {
    // Every time the tween is updated, set the opacity
    testImg.style.opacity = testImg.alpha;
  });

请注意，我上面提到的 CSS 插件现在可以处理 computedStyle 查找（最近添加的）。

希望能对这种行为有所启发。干杯，

【讨论】：