gpt4 book ai didi

javascript - TweenJS 脚本

转载 作者:行者123 更新时间:2023-11-29 23:50:16 25 4
gpt4 key购买 nike

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

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>

最佳答案

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

不过,这绝对是可以做到的。您的代码存在一些问题:

  1. 正如您在上面的评论中提到的,您必须改用“不透明度”作为目标。 alpha 属性是 EaselJS DisplayObjects 使用的属性。
  2. 您必须改为以 testImg.style 为目标,因为不透明度存在于该元素上,而不是直接存在于 testImg 上。在#testImg 上设置不透明度/alpha 不会执行任何操作
  3. 不幸的是,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 查找(最近才添加)。

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

关于javascript - TweenJS 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42917294/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com