ScrambleTextPlugin 文档

优质

小牛编辑

131浏览

2023-12-01

TweenMax没有包含ScrambleTextPlugin。

ScrambleTextPlugin使用随机字符对DOM元素中的文本进行加密（默认情况下为大写英文字母，但可以定义小写或一组自定义字符），定期刷新新的随机字符，同时在页面中逐渐动画显示新文本（或原始文本）。在视觉上它看起来像是计算机在解码一串文本。

GreenSock 文件包中并没有包含ScrambleTextPlugin 插件，因此需要另外下载。

动画关键词：scrambleText

原文字原文字原文字原文字原文字原文字原文字原文字原文字原文字原文字原文字

#scramble{
  font-size:200%;
}
.class1{
  color:#6fb936;
}
.class2{
  color:#f38630;
}

var tl = new TimelineMax({repeat:-1});
tl.to("#scramble",10,{
    scrambleText:{
        text:"看起来像是计算机在解码一串文本。", 
        chars:"upperAndLowerCase", 
        revealDelay:0.5, 
        tweenLength:true, 
        newClass:"class2", 
        oldClass:"class1"
    }, 
    ease:Linear.easeNone
});

重播

//使用默认设置
TweenLite.to(element, 1, {scrambleText:"THIS IS NEW TEXT"}); 
 
//自定义
TweenLite.to(element, 1, {scrambleText:{text:"THIS IS NEW TEXT", chars:"upperAndLowerCase", revealDelay:0.5, speed:0.3, newClass:"myClass"}});

参数	类型	必填	说明
text	String	否	需要替换的新文本，留空（或填`"{original}"`）则显示原文本。
chars	String	否	加密的字符，可选择大写（默认）："upperCase"，小写："lowerCase"，大小写混合："upperAndLowerCase"。或自定义文字，如`"abc"`
tweenLength	Boolean	否	是否动画文字长度，默认true。当原文字与新文字长度不同时，ScrambleTextPlugin会将文字长度逐渐变成一致，如果你想立即变成新文字的长度，可以设置为false。
revealDelay	Number	否	新文字显示之前旧文字的停留时间，默认为0。
newClass	String	否	为新文字添加样式名
oldClass	String	否	为原文字添加样式名
speed	Number	否	控制刷新字符的刷新频率。默认值是1，但你可以通过使用例如0.2（或任何数字）减慢速度
delimiter	String	否	文字分隔符，默认是逐字显示，如果希望逐词（英文）显示，可以设置词句分隔符为空格符`" "`。Default: `""`
rightToLeft	Boolean	否	default:false，文字是否从右向左显示