插件描述：这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js，通过SVG描边动画来完成各种漂亮的字母动画特效。
简要教程
这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js，通过SVG描边动画来完成各种漂亮的字母动画特效。
使用方法
HTML结构
第一个DEMO的HTML结构如下：
CSS样式
为SVG文字添加一些样式：/*MainSVG*/
.letters{
position:relative;
display:block;
min-height:400px;
max-height:70vh;
margin:0auto;
}
/*Letterpath*/
.letter__layer{
fill:none;
stroke-miterlimit:3;
stroke-linecap:butt;
stroke-linejoin:bevel;
}
/*Stylesforeffect1*/
.letters--effect-1.letter__layer:first-child{
stroke-width:9px;
}
.letters--effect-1.letter__layer:nth-child(2){
stroke-width:9.5px;
}
.letters--effect-1.letter__layer:nth-child(3){
stroke-width:10px;
}
/*Effect1colors*/
.color-1{stroke:#dea521;}
.color-2{stroke:#f84242;}
.color-3{stroke:#3758a7;}
.color-4{stroke:#f79c8c;}
.color-5{stroke:#84b5bd;}
.color-6{stroke:#feefde;}
JavaScript
SVG文字的动画通过anime.js来驱动。anime.js动画库插件允许我们设置动画的不同属性，以及处理不同类型的动画。该特效主要有两种类型的动画：第一是各个字母的运动，第二是描边动画。描边动画使用stroke-dasharray和stroke-dashoffset来完成。Phrase.prototype.options={
outAnimation:{
translateY:[0,15],
opacity:[1,0],
duration:250,
easing:'easeInOutQuad'
},
//Theanimationsettingsforthe′in′animation(whenthelettersappearagain).
inAnimation:{
properties:{
translateY:{
value:[-30,0],
duration:900,
elasticity:600,
easing:'easeOutElastic'
},
opacity:{
value:[0,1],
duration:500,
easing:'linear'
},
},
delay:40//delayincrementperletter.
},
//Strokeanimationsettings
pathAnimation:{
duration:800,
easing:'easeOutQuint',
delay:200//delayincrementperpath.
}
};
