xmseekshine/typemonkey.js

typeMonkey.js。抖音字说很火的文字动画。

typeMonkey.js

Demo

在线预览：Demo

图文配乐版 - 通过mp3音乐文件和lrc歌词文件

歌曲配歌词配动画版 - 情人节给女朋友的礼物

介绍

起步

# 开发模式。使用gulp。源文件位于/src目录下
npm run dev

# 打包模式。打包后文件位于/dist目录下
npm run build

前言

首先必须声明。我不喜欢抖音。不喜欢快手。

但这个世界不是你不喜欢就能改变的。所以我偶尔看看土味。

抖音快手中有一种视频。人声在念笑话或者鸡汤。视频里会跟随跳动出现一句一句话。如果你玩肯定见到过。

我查了一下。最初是用AE的typeMonkey制作的。后来字说APP做了个易用版。都挺不错的。

于是。机缘巧合之下。我也搜了一下好像没有web端实现的。那么。我来试试。

制作

构思

说起来产生这个想法已经很久了。我都忘记是从什么时候开始的。大概是发现身边的人都盯着抖音开始的吧。

功能大概就是：

• 文字一行一行跟随音频出现在页面水平垂直中心。
• 每行文字宽度始终固定为一个长度。超出缩小。不够则放大。过程中有动画。
• 每行文字出现也有或没有动画。
• 段落与段落之间切换会有翻转动画。
• 之后的段落中每行出现的时候。之前的所有段落所有行也会随之放大缩小上下移动
• 文字会有特定的颜色。
• 等等。。。

简易版

要说其中的最难点。就是整体放大缩小/段落翻转引发整体翻转/在前两者的情况下当前行居中的问题。

整体放大缩小：代表放大缩小的设置需要配置给所有段落外层的父级。

段落翻转引发整体翻转：代表翻转也必须配置给所有段落外层的父级。但翻转时候的中心点origin需要根据具体内容来设置。向左翻转时候中心点是最后一行文字的左下角。向右翻转则是最后一行文字的右下角。注意：是文字的左/右下角。

上前两者情况下当前行居中。就是计算呗。。。

music版

通过lrc中的时间戳来控制typeMonkey的每一行出现