酷炫的字母动画效果

一些有趣的装饰和字母动画效果，使用了 anime.js 。

实现该效果的主要思路如下：我们为每个单词（或字母）创建一个 SVG ，然后将一些形状相对于每个字母的位置进行放置。然后使用简单的形状创建有趣的效果。为了展示效果，我们创建了一个轮播（demo）。

下面是一个初始化的例子。在我们的例子中，h2 是一个带有 word 类名的元素：

const word = new Word(element, options);

options: {
	shapesOnTop: false, // 字母上方或下方的形状
	totalShapes: 10, // 每个字母的形状数目
	shapeTypes: ['circle', 'rect', 'polygon'], // 形状类型
	shapeColors: ['#e07272', '#0805b5', '#49c6ff', '#8bc34a', '#1e1e21'], // 从这些颜色随机挑选
	shapeFill: true, // 如果设置为false，则不会填充，而是应用笔触
	shapeStrokeWidth: 1 // 笔画宽度
}

我们有以下两种显示和隐藏单词（字母）的方法：

word.show(options)
word.hide(options)

以下是显示单词（字母）时可以为字母和形状的效果定义的选项示例：

word.show({
	lettersAnimationOpts: {
		duration: 400,
		delay: (t,i) => i*60,
		easing: 'easeInExpo',
		opacity: [0,1],
		scale: [0,1]
	},
	shapesAnimationOpts: {
		duration: 700,
		delay: (t,i) => i*40,
		easing: 'easeOutExpo',
		translateX: () => [0,anime.random(-20,20)],
		translateY: () => [0,anime.random(-400,400)],
		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: 700, easing: 'easeOutQuad'}
		]
	}
})

这遵循 anime.js 的语法。在文档页面上了解更多信息。

下面是一些示例截图：