字体变形html,SVG文字变形动画特效

插件描述：这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js，通过SVG描边动画来完成各种漂亮的字母动画特效。

简要教程

这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js，通过SVG描边动画来完成各种漂亮的字母动画特效。

使用方法

HTML结构

第一个DEMO的HTML结构如下：

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.

}

};