Question

我尝试使用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>

但是这不起作用并且没有错误。

Answer 1

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/

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

简单的TweenJS：补间div

1 个答案: