基于Anime.js和CSS3的炫酷文字动画特效

 查看演示  website  立即下载

实现的主要思想如下：我们为每个字母创建一个SVG，然后将图形点缀到每个字母的附近。

初始化：

const word = new Word(element, options);

options: {
	shapesOnTop: false, // 图形分布在字母的上方，否则在下方
	totalShapes: 10, // 字母附近图形的数量
	shapeTypes: ['circle', 'rect', 'polygon'], // 图形的类型
	shapeColors: ['#e07272', '#0805b5', '#49c6ff', '#8bc34a', '#1e1e21'], // 随机选取颜色的种类
	shapeFill: true, // 图形填充颜色，否则仅描边
	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'}
		]
	}
})

PREVIOUS:
NEXT:
基于jqueryrotate.js开发的大转盘抽奖
jQuery轮播图加时间轴插件