如何使用 XUI 补间？答案

【问题标题】：how do I use XUI tween?如何使用 XUI 补间？
【发布时间】：2011-11-07 15:58:36
【问题描述】：

我不明白如何使用 XUI 补间。在 xui 网站上，他们给出了以下示例代码：

x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);

那应该怎么做？我创建了一个<div id="box"></div>，运行了上面这行js代码，但是什么也没发生。这是我的完整代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="xui.min.js"></script>
    <script type="text/javascript">
    x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
    </script>

</head> 
<body> 

<div id="box"></div>
</body>
</html>

什么都没有发生...

【问题讨论】：

标签： xui

【解决方案1】：

所以，XUI 的补间似乎正在进行中。其实在master branch code on GitHub你会发现：

// queued animations
/* wtf is this?
     if (props instanceof Array) {
     // animate each passing the next to the last callback to enqueue
         props.forEach(function(a){       
         });
      }
 */

因此，简而言之，基于数组的补间属性目前似乎被破坏了。此外，在处理当前未在 DOM 元素上设置的属性时，XUI 的tween 似乎有点不稳定。（例如，在透明元素上设置 background-color 会将其变为黑色......而不是预期的颜色。）

也就是说，单个 tween 和 callback 在之前设置的属性上运行良好。所以看看以下内容（并原谅内联 css）：

<html> 
    <head> 
    <script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>

    <script type="text/javascript">
    x$.ready(function(){
        setTimeout(function(){
                x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){
                x$('#box').tween({'left':'500px', duration:2000});
            });
        }, 500);
    });
    </script>
</head> 
<body style="position:relative;"> 
    <div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div>
</body>
</html>

因为#box 现在明确设置了css background-property 和left 位置，所以相对容易产生类似于所需效果的效果。

页面加载半秒后，#box 应该花费 2 秒时间从 left:500px 移动到 left:100px，同时将背景颜色从白色变为绿色。然后，使用回调，#box 回到原来的位置 left:500px——又需要 2 秒才能返回。

显然，这并不能回答您的确切问题，但对于那些（如我）偶然发现此问题的人来说，它暂时提供了一种解决方法。

【讨论】：