[译]制作有趣的“装饰字母”动画

今天给大家带来的是有趣的字母动画效果,希望大家喜欢!这个想法是来源于Animography 的 Dribbble 作品“Us By Night”,很多小方块和字母动画。

同样我们想探索一下类似字体和块动画的更多可能性。这次我们使用 amime.js 制作动画,这个动画库让文字变得更有魅力!

注意:这个 demo 使用了新的 CSS 特性,为了保证浏览体验请升级浏览器。

主要的想法实现如下:我们讲每一个文字转换成 SVG,然后将方块放到每一个文字的相对位置。完成这两个操作,我们可以使用简单的方块制作有趣的动画,为了展示这些效果,我们做了一些 Demo 供大家欣赏。

这是一个初始化的演示,在我们的实例中,该元素由 h2 包裹着标签。

const word = new Word(element, options);

options: {
	shapesOnTop: false, // shapes on top or beneath the letters
	totalShapes: 10, // number shapes per letter
	shapeTypes: ['circle', 'rect', 'polygon'], // type of shapes
	shapeColors: ['#e07272', '#0805b5', '#49c6ff', '#8bc34a', '#1e1e21'], // pick randomly from these colors
	shapeFill: true, // if set to false, there's no fill and the stroke gets applied instead
	shapeStrokeWidth: 1 // the stroke width
}

使用以下两个方法来展示和隐藏单词

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 ,如果你要学习 anime.js 可以戳这个文档documentation page

来看看实现的效果!

DecorativeLetterEffects_06

评论

linmi

Created by Linmi · 皖ICP备15002807号-6
All rights reserved