果演示

横版

竖版

思路分析

1. 可以看到文字是一段一段的并且独占一行，使用段落标签p表示一行
2. 一段文字内，字是一个一个显示的，所以这里每一个字都用一个span标签装起来
3. 每一个字都是从透明到不透明的过渡效果，使用css3的过渡属性transition让每个字都从透明过渡到不透明

基本结构

HTML基本结构

<div id="container"></div>

这里只需要一个容器，其他的结构通过js动态生成

CSS

#container {
  /* 添加这行样式=>文字纵向从右往左显示 */
  /* 目前先不设置,后面可以取消注释 */
  /* writing-mode: vertical-rl; */
}
#container span {
  /* 这里opacity先设置为1，让其不透明，可以看到每一步的效果 */
  /* 写完js之后到回来改为0 */
  opacity: 1;
  transition: opacity 0.5s;
}

文本数据

const data=['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

使用数组存放文本数据，一个元素代表一段文字

创建p标签

使用for/of循环遍历数组创建对应个数的p标签，添加到html页面中

const data=['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']
// 获取dom元素
const container=document.querySelector('#container')
// for/of循环遍历数组
for (const item of data) {
  // 打印每一个item=> 数组的每一个元素
  console.log(item)
  // 创建p标签
  const p=document.createElement('p')
  // 将p标签插入到container
  container.append(p)
}

item代表数组的每一个元素，也就是每一段文字，所以会创建4个p标签

与数组元素数量对应的p标签就生成好了

接下来就是将每一个元素里面的文本添加到span标签中

创建span标签

为每一个字创建一个span标签，然后让span标签的内容等于对应的字，再将每一个生成的span插入到p标签

本节代码

// 遍历item的每一个字
for (let i=0; i < item.length; i++) {
  // 创建span
  let span=document.createElement('span')
  // span的内容等于item的每一个字
  span.innerHTML=item[i]
  // 将span插入到p标签中
  p.append(span)
}

合并后代码

const data=['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']
// 获取dom元素
const container=document.querySelector('#container')
// for/of循环遍历数组
for (const item of data) {
  // 打印每一个item=> 数组的每一个元素
  console.log(item)
  // 创建p标签
  const p=document.createElement('p')
  // 遍历item的每一个字
  for (let i=0; i < item.length; i++) {
    // 创建span
    let span=document.createElement('span')
    // span的内容等于item的每一个字
    span.innerHTML=item[i]
    // 将span插入到p标签中
    p.append(span)
  }
  // 将p标签插入到container
  container.append(p)
}

此时已经完成了渲染数组，并将数组的每一个元素的文字渲染到单独的span中

接下来就要让每一个文字做到从看不见到看的见的效果

添加透明度过渡效果

将css样式中的opacity由1改为0

因为每个字的出现时间不一样，所以不能直接在循环的时候直接添加过渡效果，添加以下代码，让span标签在添加到p标签前也添加到新数组中

const arr=[]
// 将span也添加到新数组中
arr.push(span)

最后遍历arr数组，为每一个元素添加一个过渡延迟效果

// 延时1毫秒等待上方循环渲染完成
setTimeout(()=> {
  // 遍历arr数组的每一个元素
  arr.forEach((item, index)=> {
    // 给每一个元素添加过渡延迟属性
    item.style.transitionDelay=`${index * 0.2}s`
    // 将透明度设置为不透明
    item.style.opacity=1
  })
}, 1)

最后的最后将css样式中的opacity改为0，让所有的字透明

#container span {
  opacity: 0;
  transition: opacity 0.5s;
}

完整js代码

const data=['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']
const arr=[]
// 获取dom元素
const container=document.querySelector('#container')
// for/of循环遍历数组
for (const item of data) {
  // 打印每一个item=> 数组的每一个元素
  console.log(item)
  // 创建p标签
  const p=document.createElement('p')
  // 遍历item的每一个字
  for (let i=0; i < item.length; i++) {
    // 创建span
    let span=document.createElement('span')
    // span的内容等于item的每一个字
    span.innerHTML=item[i]
    // 将span插入到p标签中
    p.append(span)
    // 将span也添加到新数组中
    arr.push(span)
  }
  // 将p标签插入到container
  container.append(p)
}
// 延时1毫秒等待上方循环渲染完成
setTimeout(()=> {
  // 遍历arr数组的每一个元素
  arr.forEach((item, index)=> {
    // 给每一个元素添加过渡延迟属性
    // 让每一个字都比前一个字延时0.2秒的时间
    item.style.transitionDelay=`${index * 0.2}s`
    // 将透明度设置为不透明
    item.style.opacity=1
  })
}, 1)

至此，已经完成了逐字显示的效果，最后介绍一个css属性

writing-mode

使用这个属性可以改变文字方向，实现纵向从左往右或从右往左显示

以下摘自mdn文档

writing-mode

术的发展很难阻挡，但风险也同样不可忽视。

视频化的趋势已经势不可挡了。从创作者群体到观众观看习惯都在进行着转移，各种便携拍摄设备出现，手机更是集拍摄、后期、分发为一体。剪辑 App 一天比一天强大，不仅支持多轨道，还具备很多专业软件没有的自动加字幕、自动卡点等功能。

最近，剪映推出了一个「图文成片」的功能，可以将文字内容直接转化成带配音、画面的视频，这是减轻了创作者负担，还是助推了营销号产量？

做视频的难度，降到了最低

我尝试用这个功能将之前写过的一些文章转成视频。目前它仅支持复制头条号链接，应该是为了避免版权风险，你也可以直接输入文字内容。剪映将字数限制在了 1500 字，标题 25 字以内，我以最多字数测试，所用时长大概在 1 分钟左右。

原文章：苹果之外，我们会看到什么样的 ARM PC？

剪映「图文成片」生成的视频：https://v.qq.com/x/page/x32417snf6d.html

「图文成片」生成的视频有配乐、有配音（带字幕）、有画面。我试了一下输入不同类型的文字，比如散文，配乐风格是会根据内容来变化的。配音是机器生成，可以在设置里改变音色，选择不少，但整体还是偏机械。

画面的话主要是静态图片，个别地方有动图、表情包。断句、卡点做得不错，但图片素材和文字内容的匹配度还有待加强。比如这里的苹果，根据整体内容应该不难判断出是指 Apple 公司。素材库的时效性也有待加强，一些新品评测的内容匹配的都是旧型号。

以上我们测试的主要是科技、数码类文章，评价也是基于直接生成的版本。实际上它提供的是一个工程文件，你可以在此基础上进一步对配乐、配音（音色）、字幕、画面素材进行修改。

数量上来了，质量呢？

从创作效率的角度，剪映的「图文成片」已经很强大。未来也许在的文章顶部就会有「以视频形式观看」的按钮，就像现在的文字转语音一样。

想要「有内容」的视频。在的创作者收益中，竖版小视频没有收益，而横版视频是有的。根据我个人观察，同样话题的视频内容比图文要更容易传播，这可能和人们观看内容的习惯有关，也或许是平台的推荐机制就有倾向。

类似的功能不止字节跳动（剪映）在做，知乎之前也推出过「图文转视频」的功能。双方平台类型不一样，但目的接近，那就是在视频内容盛行的大环境下，尽量为创作者降低创作难度，以丰富平台上的视频数量。

从目前状态看，用这个功能生成一些评论、资讯类文章是没问题的，算是达到了基本的观看标准，但它根本没什么观赏性。

营销号狂喜，但版权如何界定？

体验过后我的第一个想法是，这不是让营销号更容易生成垃圾视频了吗？其实现在各个平台，不管是 YouTube 还是 B 站，就已经有大量这类低质内容。它们大多时长偏短，要么紧跟时事热点，要么就刻意找容易引战、引起共鸣的话题。内容本身极其的水，于是就要在标题、封面上吸人眼球。大量这样的内容的确能给平台带来短期数据上的增长，但长远来看对生态是有害的。

另一个不得不关注的问题就是版权。前段时间「知识类视频」大火，平台疯狂争夺头部资源，也有不少创作者看到机会，大量制作「所谓的」知识类视频。有些文章本身质量不高，或者根本不适合视频化呈现，但只要加上画面流量就暴增。有人炒冷饭，直接把旧文章用粗劣的剪辑做成视频，收割名利，更有甚者是拿别人的文章拼凑。

这种侵犯版权的视频很难甄别。现在各大平台的机器审查，最多做到识别同样视频源的内容。如果是把别人的图文转成视频，那已经是改头换面，更别说把多篇文章缝缝补补的「视频裁缝」，这种视频靠人力甄别难度都很高。除非是「巫师财经」这样的头部账号，否则大量的普通账号即使有侵权，也很少被关注到。

工具好坏，是由使用者决定的

低质内容换成视频依旧是低质的，它不会对真正优秀的头部内容产生影响，甚至会让其更有价值。之前微信公众号、自媒体兴起，有人就说「纸媒要亡」，但实际上如果转型成功，好的内容品牌会更上一层楼，比如 GQ 就是很好的例子。不少领域一些新的自媒体账号，如果你去了解一下他们的创始团队，会发现很多都是来自传统媒体，比如游研社、之前的好奇心日报。

有人说抖音式的竖屏短视频兴起，会对深度长内容造成冲击，但其实 B 站的出圈就是在其之后才爆发。

工具终究是工具，关键看用的人如何。你完全可以用自动化的「图文转视频」工具进行粗剪，然后再精细化剪辑，机器所配的画面也许还能启发创作者的思路。就像臭名昭著的 Deepfake，在电影中也有类似技术还原已故演员的形象。

技术的发展很难阻挡，但风险也同样不可忽视。很多技术的初衷并不是出于「毁灭」，但如何规范使用技术，这是人类永恒的话题。

封面来源：《无间道》官方剧照

本文作者：刘丢丢

本文首发于极客之选，转载请联系极客君（ID：geekparker）。

更多阅读：

把任意移动设备变成电脑外接屏幕，这个软件可以帮你做到