chaussen

摘自Codrops:字母动画装饰效果

原文链接: tympanus.net

字母动画装饰效果

根据Animography项目小组Dribbble网站上的图片作品"夜晚做回自己(Us By Night)"制作的形状与字母动画装饰效果。

DecorativeLetterEffects_featured

观看演示 下载源代码

今天我们想与大家分享一些有趣的字母动画效果。这个创意的基础是Animography小组在Dribbble网站上的图片作品“夜晚做回自己(Us By Night)”,其中运用了多种形状,与字母形成动画效果。我们想探究一下如何使用不同印刷样式与形状效果来制作些类似的动画。我们用anime.js库做动画,用Charming库来处理文字。

DecorativeLetterEffects_featured

此演示由JazzCon.Tech2018年3月即将在新奥尔良举办的音乐、美食与代码(Music. Food. Code.)活动友情赞助。. _如果你也想提供演示,可以看这里。_

注意: 在这个演示里我们用了些新的CSS属性,请在较新的浏览器上观看。

实现这个效果的主要思路如下:我们为每个词都制作一个SVG图,然后把形状放在和每个字母相对的位置上。为了展示这些效果,我们制作了一个小幻灯片演示。

这是一个初始化的例子。在这里,元素(element)参数是一个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, // 如果值为假,就不进行颜色填充,而是线条上色
  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的句法。想了解更多,请看文档页面

看一下一些截屏:

DecorativeLetterEffects_05

DecorativeLetterEffects_01

DecorativeLetterEffects_03

DecorativeLetterEffects_04

DecorativeLetterEffects_06

希望大家喜欢这个小项目,并能用得上。

参考与致谢