4

我正在尝试使用 TweenJS 做一些非常简单的事情，在使用 GSAP 之后我发现它不太直观。只是想补间一个 div - 已经设置为包含一个图像 - 使用 CSS/HTML：

<script type="text/javascript" src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

<script>

function init() {

        stage = new createjs.Stage("canvas1");

        var txt1 = document.getElementById("Div_txt1");  
        createjs.Tween.get(txt1).to({opacity: 0}, 1000);

}      

</script>    

<body onload="init();">
<canvas id="canvas1" width="300" height="250"></canvas>
</body>
</html>

但这不起作用并且不会引发错误。

4

1 回答 1

2

TweenJS 并不真正知道如何对 DIV 的属性进行补间，因为它们不直接存在于元素上，而是存在于 CSS 样式对象上，并且使用字符串值（例如“2px”）而不是数字。您可以安装 TweenJS CSSPlugin，它使许多 CSS 属性变得可补间，包括位置、旋转和不透明度。

<script src="https://rawgit.com/CreateJS/TweenJS/master/src/tweenjs/CSSPlugin.js"></script>

// Sample code
createjs.Tween.get(div).to({opacity: 0}, 1000);

这个插件是为了展示插件如何工作而创建的，所以它非常简单，因此它只理解直接在元素上的补间属性，而不是在 CSS 类中定义。这意味着您必须添加一个内联样式才能使其工作：

<div id="div" style="opacity:1">Text</div>

这是一个工作小提琴：http: //jsfiddle.net/xc3pt2b8/

编辑TweenJS 1.0.0 中更新的 CSSPlugin 将在compute打开标志时使用计算样式。它的性能较差，但功能更强大。https://createjs.com/docs/tweenjs/classes/CSSPlugin.html

于 2016-06-23T15:20:20.630 回答