2012-01-18 56 views
0

我有几个词,我想创建一个动画,基本上每个单词的几个字母将从原来的单词分离并生成一个新的单词与这些字母。例如,假设我有家庭普通服务,那么动画会从普通服务和服务服务中取得家庭的声音,然后在hgenser的原文中创建另一个词。图片动画与JavaScript,jquery

要jQuery或JavaScript是最好的事情做到这一点,或者它会更容易使用Photoshop和创建一个动画GIF?

感谢您的意见。

回答

0

这取决于你希望摆脱它。一个动画gif是相当有限的,你将不得不这样做你想要的每一个组合,因为只要你的方法被正确写入,js只需要基本的配置参数就可以知道如何处理任何字符串。

为了将来的缘故,我肯定会提出一个jQuery解决方案。但是,如果你只是为了一个单词组合而做这件事,并且从不计划添加更多的内容,那么js可能是矫枉过正的。

你可以创建一个jsfiddle来玩,然后如果你遇到困难,可以优化这个问题。

0

jQuery是不是跳到介意这样的任务的第一件事情,但如果我打算做它的步骤可能会是如下:

  1. 三全的显示图像在三个独立的div

  2. 改变这些div的宽度话,只显示字母,你想

  3. 在同一时间你正在改变宽度移动每个格到它现在的位置。

祝你好运!

0

我还没有机会玩它,但也许raphael将值得调查?我听过很多关于它的好消息,其中一些演示非常漂亮。

0

如果你只是想用GIF做它,那么如果你用jQuery制作它,那么它在存储方面会更便宜,更灵活和更高效。

比方说,你想用jQuery做到这一点:


您有以下元素:

<span id="word">Home General Services</span> 

使用jQuery得到你想要更改的元素内的值。

var word = $("#word").html(); 

将元素拆分为单独的字母,以便您可以将它们全部移动。

var letters = word.split(""); 
$("#word").html(""); 
for(var i = 0; i < letters.length; i++) { 
    $("#word").append("<span>"+letters[i]+"</span>"); 
} 

这应该重新创建您之前拥有的单词,只需将其拆分为组成字母。这些可以通过

$("#word").eq(index); 

其中index是原始单词中字母的位置。

如果您创建了一个函数,可以从上面提供一个单词和一个元素(如#word),那么它可以检查您要创建的单词是否可以用#word元素中的字母构造,然后您可以根据是否在最后一个单词中使用单独的字母来设置动画,以隐藏或移动它们。