文章/答案/技术大牛

发布

问TweenJS javascript
EN

Stack Overflow用户

提问于 2017-03-21 10:19:09

回答 1查看 207关注 0票数 2

我的第一个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

Stack Overflow用户

发布于 2017-03-21 23:20:30

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

然而，这绝对是可以做到的。你的代码有几个问题：

正如你在上面的评论中提到的，你必须以“不透明度”为目标。EaselJS DisplayObjects使用的是alpha属性。
您必须改为以testImg.style为目标，因为不透明度位于该元素上，而不是直接位于testImg上。在#testImg上设置不透明度/alpha可以做到nothing
Unfortunately，TweenJS不知道如何使用CSS类或选择器读取元素上设置的CSS属性。getComputedStyle的查找开销非常大，需要它来确定元素的当前样式。

你完全可以让你的演示工作，但你必须考虑这些事情。以下是更新后的代码片段(来自此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查找(最近添加的)。

希望这能让我们对这种行为有所了解。干杯,

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42917294

复制

相似问题

问TweenJS javascript
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TweenJS javascriptEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TweenJS javascript
EN