刘军连医生 http://nb.ifeng.com/c/89ILxhbI6w5一些装饰性的形状和字母动画根据我们在晚上的文字游戏，用的是我们的文字。今天我们想和大家一起分享一些有趣的字母动画。这个想法是基于Animography的Dribbble拍摄《我们的夜晚》，在那里，各种各样的小形状用一些字母组成动画。我们想用不同的字体和形状效果来探索一些类似的动画。我们使用动画。js为动画和迷人的文字工作。这个演示是由JazzCon赞助的。科技:音乐。食物。代码。年3月新奥尔良。如果你想成为一个演示赞助商，你可以在这里找到更多。注意:对于这个演示，我们正在使用一些新的CSS属性，请在最新的浏览器中查看。实现的主要思想如下:我们为每个单词创建一个SVG，然后将图形相对于每个字母的位置。通过几个选项，我们可以使用简单的形状创建有趣的效果。为了展示效果，我们创建了一个小幻灯片。这是一个初始化示例。在我们的例子中，元素是h2和类单词:constword=newWord(element,options);options:{ shapesOnTop:false,//shapesontoporbeneaththeletters totalShapes:10,//numbershapesperletter shapeTypes:[circle,rect,polygon],//typeofshapes shapeColors:[#e,#b5,#49c6ff,#8bc34a,#1e1e21],//pickrandomlyfromthesecolors shapeFill:true,//ifsettofalse,theresnofillandthestrokegetsappliedinstead shapeStrokeWidth:1//thestrokewidth}我们有以下两种方法来显示和隐藏单词:word.show(options)word.hide(options)下面是一个例子，我们可以在显示单词的时候定义字母和形状的效果:word.show({ lettersAnimationOpts:{ duration:, delay:(t,i)=i*60, easing:easeInExpo, opacity:[0,1], scale:[0,1] }, shapesAnimationOpts:{ duration:, delay:(t,i)=i*40, easing:easeOutExpo, translateX:()=[0,anime.random(-20,20)], translateY:()=[0,anime.random(-,)], scale:()=[randomBetween(0.2,0.6),randomBetween(0.2,0.6)], rotate:()=[0,anime.random(-16,16)], opacity:[ {value:1,duration:1,easing:linear}, {value:0,duration:,easing:easeOutQuad} ] }})这遵循了anime.js的语法。在他们的文档页面了解更多信息。看一些截图:我们希望您喜欢这个小项目，并发现它很有用。
转载请注明：http://www.aierlanlan.com/grrz/8851.html
