javascript - 如何使用 TweenMax 补间 div 上的字符串字符

Question

如何在 javascript 中使用 TweenMax 在 div 上补间字符串字符，例如：

h
he
hel
hell
hello

Answer 1

TweenMax 有一个 TextPlugin ，这使它变得非常简单：

TweenMax.to(element, 2, {text:"hello"});

这会将元素中的任何文本补间到“你好”。您甚至可以将补间或 seek() 反转（）到特定时间等。文档在这里：http ://api.greensock.com/js/com/greensock/plugins/TextPlugin.html

只要确保您加载了 TextPlugin，否则它将无法正常工作。

补间快乐！

Answer 2

function TweenDivText(element, str) {
     var string = { counter: 0, val: str };
     TweenMax.to(string, string.val.length * 0.05, {
          counter: string.val.length, onUpdate: function () {
               element.text(string.val.substring(0, Math.ceil(string.counter)));
           },
           ease: Linear.easeNone
      });
 }

该元素是一个 jquery 元素
，您可以通过更改 0.05 来更改写入时间。