效果图：

描述说明：

            该文字动画特效使用anime.js来制作动画特效，字母的处理使用ming插件，共有10种非常炫酷的文字动画效果。不支持IE

实现的主要思想如下：我们为每个字母创建一个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'}
        ]
    }
})

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/465.html