简要教程
这是一款使用效果非常炫酷的html5 svg文字变形动画特效。该特效使用svg和anime.js，通过svg描边动画来完成各种漂亮的字母动画特效。
使用方法
html结构
第一个demo的html结构如下：
<svg width="100%" height="100%" viewbox="0 0 320 180" class="letters letters--effect-1">
<!--w-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer color-6" d="m25,39.7l22.4,51l7.9-32.2l76.2,84l1.3-61.2" />
<path class="letter__layer color-1" d="m25,39.7l22.4,51l7.9-32.2l76.2,84l1.3-61.2" />
<path class="letter__layer color-2" d="m25,39.7l22.4,51l7.9-32.2l76.2,84l1.3-61.2" />
</g>
</g>
<!--i-->
<g class="letter letter--2">
<g class="letter__part">
<path class="letter__layer color-6" d="m100,20.3l8.4,58.4" />
<path class="letter__layer color-2" d="m100,20.3l8.4,58.4" />
<path class="letter__layer color-3" d="m100,20.3l8.4,58.4" />
</g>
</g>
<!--l-->
<g class="letter letter--3">
<g class="letter__part">
<path class="letter__layer color-6" d="m126.4,70.8l27.6,0.5" />
<path class="letter__layer color-3" d="m126.4,70.8l27.6,0.5" />
<path class="letter__layer color-4" d="m126.4,70.8l27.6,0.5" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="m128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-3" d="m128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-4" d="m128.9,15.6l-2.3,60.2" />
</g>
</g>
<!-- ...and so on -->
</svg>
css样式
为svg文字添加一些样式：
/* main svg */
.letters {
position: relative;
display: block;
min-height: 400px;
max-height: 70vh;
margin: 0 auto;
}
/* letter path */
.letter__layer {
fill: none;
stroke-miterlimit: 3;
stroke-linecap: butt;
stroke-linejoin: bevel;
}
/* styles for effect 1 */
.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;
}
/* effect 1 colors */
.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'
},
// the animation settings for the ´in´ animation (when the letters appear again).
inanimation: {
properties: {
translatey: {
value: [-30, 0],
duration: 900,
elasticity: 600,
easing: 'easeoutelastic'
},
opacity: {
value: [0, 1],
duration: 500,
easing: 'linear'
},
},
delay: 40 // delay increment per letter.
},
// stroke animation settings
pathanimation: {
duration: 800,
easing: 'easeoutquint',
delay: 200 // delay increment per path.
}
};
以上就是炫酷html5 svg文字变形动画特效的内容。