幻灯片

1 概述

目前功能最强大的幻灯片格式是 Reveal.js， 除非你有特定的 Office 或 LaTeX 输出需求，否则强烈推荐使用它。需要注意的是 Reveal.js 演示文稿既可以直接以 HTML 幻灯片形式演示，也可以打印为 PDF 以便分发

2 创建幻灯

Reveal.js 用标题来分页， 下面是一个由两张幻灯片组成的简单文稿 ：

---
title: "生活习惯"
format: revealjs
---

## 起床

- 关闭闹钟
- 从床上爬起来

## 睡觉

- 躺床上
- 数绵羊

可以用一级标题(# )把演示文稿划分成多个章 :

---
title: "生活习惯"
format: revealjs
---

# 第一章, 早晨

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上

## 晚餐

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

还可以用 --- 来划分页幻灯片 ：

---
title: "生活习惯"
format: revealjs
---

- 关闭闹钟
- 从床上爬起来

---

- 躺床上
- 数绵羊

使用 --- 来划分页幻灯片， 还可以继续使用一级 # 来划分章节 ：

---
title: "生活习惯"
format: revealjs
---


# 第一章, 早晨

---

- 关掉闹钟
- 从床上起来

---

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上

---

- 吃意面
- 喝葡萄酒

---

- 上床
- 数羊

3 逐条显示列表

幻灯片里的列表会一次性全部显示, 可以用 incremental 选项让列表逐条显示 :

---
title: "生活习惯"
format: 
  revealjs: 
    incremental: true  
---

# 第一章, 早晨

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上

## 晚餐

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

也可以单独对某个列表进行设置 .incremental 或 .nonincremental ：

---
title: "生活习惯"
format: revealjs
---

# 第一章, 早晨

## 起床

- 关掉闹钟
- 从床上起来

## 早餐, 逐条显示

::: {.incremental}
- 吃鸡蛋
- 喝咖啡
:::

# 第二章, 晚上

## 晚餐

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

4 多列布局

要把页面分成多列放置内容， 使用 .columns 容器， 利用 width 设置各列宽度占比 :

---
title: "两篇古文"
format: revealjs
---

:::::::: {.columns}

::: {.column width="40%"}
君不见黄河之水天上来，奔流到海不复回   
君不见高堂明镜悲白发，朝如青丝暮成雪   
人生得意须尽欢，莫使金樽空对月   
天生我材必有用，千金散尽还复来   
烹羊宰牛且为乐，会须一饮三百杯   
岑夫子，丹丘生，将进酒，杯莫停   
与君歌一曲， 请君为我倾耳听   
钟鼓馔玉不足贵，但愿长醉不复醒   
古来圣贤皆寂寞，惟有饮者留其名   
陈王昔时宴平乐，斗酒十千恣欢谑   
主人何为言少钱，径须沽取对君酌   
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁   
:::

::: {.column width="5%"}

:::

::: {.column width="55%"}
豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊彩星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲。千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區。童子何知？躬逢勝餞   
時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿。臨帝子之長洲，得天人之舊館。層臺聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈廻；桂殿蘭宮，即崗巒之體勢    
披繡闥，俯琱甍。山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦弥津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；鴈陣驚寒，聲斷衡陽之浦 
:::

::::::::

5 综合范例

下面是一个综合范例 ：

6 内容溢出

如果某张幻灯片的内容太多一页放不下, 可以使用小尺寸字体 :

---
title: "小尺寸字体"
format: revealjs
---

## {.smaller}

:::::::: {.columns} 

::: {.column width="40%"}
君不见黄河之水天上来，奔流到海不复回   
君不见高堂明镜悲白发，朝如青丝暮成雪   
人生得意须尽欢，莫使金樽空对月   
天生我材必有用，千金散尽还复来   
烹羊宰牛且为乐，会须一饮三百杯   
岑夫子，丹丘生，将进酒，杯莫停   
与君歌一曲， 请君为我倾耳听   
钟鼓馔玉不足贵，但愿长醉不复醒   
古来圣贤皆寂寞，惟有饮者留其名   
陈王昔时宴平乐，斗酒十千恣欢谑   
主人何为言少钱，径须沽取对君酌   
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁   
:::

::: {.column width="5%"}

:::

::: {.column width="55%"}
豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊彩星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲。千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區。童子何知？躬逢勝餞   
時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿。臨帝子之長洲，得天人之舊館。層臺聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈廻；桂殿蘭宮，即崗巒之體勢    
披繡闥，俯琱甍。山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦弥津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；鴈陣驚寒，聲斷衡陽之浦 
:::

::::::::

如果小尺寸字体依然放不下， 可以使用页面滚动 ：

---
title: "滚动页面"
format: revealjs
---

## 古诗词两首 {.scrollable}

:::::::: {.columns} 

::: {.column width="40%"}
君不见黄河之水天上来，奔流到海不复回   
君不见高堂明镜悲白发，朝如青丝暮成雪   
人生得意须尽欢，莫使金樽空对月   
天生我材必有用，千金散尽还复来   
烹羊宰牛且为乐，会须一饮三百杯   
岑夫子，丹丘生，将进酒，杯莫停   
与君歌一曲， 请君为我倾耳听   
钟鼓馔玉不足贵，但愿长醉不复醒   
古来圣贤皆寂寞，惟有饮者留其名   
陈王昔时宴平乐，斗酒十千恣欢谑   
主人何为言少钱，径须沽取对君酌   
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁   
:::

::: {.column width="5%"}
:::

::: {.column width="55%"}
豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊彩星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲。千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區。童子何知？躬逢勝餞   
時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿。臨帝子之長洲，得天人之舊館。層臺聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈廻；桂殿蘭宮，即崗巒之體勢    
披繡闥，俯琱甍。山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦弥津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；鴈陣驚寒，聲斷衡陽之浦 
:::

::::::::

7 旁注

旁注和脚注包含的是相关性较低的内容， 显示在幻灯片底部， 字号更小、字体更浅 :

---
title: "旁注和脚注"
format: revealjs
---

## 古诗词两首 {.scrollable}

::: aside
这两首都是唐代著名的诗词（这是旁注内容）
:::

:::::::: {.columns} 

::: {.column width="40%"}
### 将进酒 ^[诗人李白的著名诗词（这是脚注内容）]

君不见黄河之水天上来，奔流到海不复回   
君不见高堂明镜悲白发，朝如青丝暮成雪   
人生得意须尽欢，莫使金樽空对月   
天生我材必有用，千金散尽还复来   
烹羊宰牛且为乐，会须一饮三百杯   
岑夫子，丹丘生，将进酒，杯莫停   
与君歌一曲， 请君为我倾耳听   
钟鼓馔玉不足贵，但愿长醉不复醒   
古来圣贤皆寂寞，惟有饮者留其名   
陈王昔时宴平乐，斗酒十千恣欢谑   
主人何为言少钱，径须沽取对君酌   
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁   
:::

::: {.column width="5%"}
:::

::: {.column width="55%"}
### 滕王阁序 ^[诗人王勃的著名骈文（这是脚注内容）]

豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊彩星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲。千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區。童子何知？躬逢勝餞   
時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿。臨帝子之長洲，得天人之舊館。層臺聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈廻；桂殿蘭宮，即崗巒之體勢    
披繡闥，俯琱甍。山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦弥津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；鴈陣驚寒，聲斷衡陽之浦 
:::

::::::::

还可以将脚注直接设置成气泡 reference-location: document， 所有的旁注依然汇聚到幻灯片最后 ：

---
title: "脚注成为气泡"
format: 
  revealjs: 
    reference-location: document
---

## 古诗词两首 {.scrollable}

::: aside
这两首都是唐代著名的诗词（这是旁注内容）
:::

:::::::: {.columns} 

::: {.column width="40%"}
### 将进酒 ^[诗人李白的著名诗词]

君不见黄河之水天上来，奔流到海不复回   
君不见高堂明镜悲白发，朝如青丝暮成雪   
人生得意须尽欢，莫使金樽空对月   
天生我材必有用，千金散尽还复来   
烹羊宰牛且为乐，会须一饮三百杯   
岑夫子，丹丘生，将进酒，杯莫停   
与君歌一曲， 请君为我倾耳听   
钟鼓馔玉不足贵，但愿长醉不复醒   
古来圣贤皆寂寞，惟有饮者留其名   
陈王昔时宴平乐，斗酒十千恣欢谑   
主人何为言少钱，径须沽取对君酌   
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁   
:::

::: {.column width="5%"}
:::

::: {.column width="55%"}
### 滕王阁序 ^[诗人王勃的著名骈文]

豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊彩星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲。千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區。童子何知？躬逢勝餞   
時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿。臨帝子之長洲，得天人之舊館。層臺聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈廻；桂殿蘭宮，即崗巒之體勢    
披繡闥，俯琱甍。山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦弥津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；鴈陣驚寒，聲斷衡陽之浦 
:::

::::::::

旁注和脚注的一个问题是， 如果页面不能滚动， 可能与正文重叠到一起 ：

---
title: "旁注和脚注与正文重叠"
format: revealjs
---

## 古诗词两首

::: aside
这两首都是唐代著名的诗词（这是旁注内容）
:::

:::::::: {.columns} 

::: {.column width="40%"}
### 将进酒 ^[诗人李白的著名诗词（这是脚注内容）]

君不见黄河之水天上来，奔流到海不复回   
君不见高堂明镜悲白发，朝如青丝暮成雪   
人生得意须尽欢，莫使金樽空对月   
天生我材必有用，千金散尽还复来   
烹羊宰牛且为乐，会须一饮三百杯   
岑夫子，丹丘生，将进酒，杯莫停   
与君歌一曲， 请君为我倾耳听   
钟鼓馔玉不足贵，但愿长醉不复醒   
古来圣贤皆寂寞，惟有饮者留其名   
陈王昔时宴平乐，斗酒十千恣欢谑   
主人何为言少钱，径须沽取对君酌   
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁   
:::

::: {.column width="5%"}
:::

::: {.column width="55%"}
### 滕王阁序 ^[诗人王勃的著名骈文（这是脚注内容）]

豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊彩星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲。千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區。童子何知？躬逢勝餞   
時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿。臨帝子之長洲，得天人之舊館。層臺聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈廻；桂殿蘭宮，即崗巒之體勢    
披繡闥，俯琱甍。山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦弥津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；鴈陣驚寒，聲斷衡陽之浦 
:::

::::::::

8 幻灯片尺寸

尽量告诉 Reveal.js 设计幻灯片时采用的分辨率，Reveal.js 帮你保证横纵比不变 ：

幻灯片尺寸入门

下面用 范例幻灯片 说明 Reveal.js 是如何计算 margin留白 的， 计算得到的 0.1 其实是留白占投影仪 10% 的尺寸。 可以拖拽窗口大小观察数值变化并验证计算公式 ：

Note注意
  1. 这里的计算验证了 margin = 0.0983 与设定 0.1 是一致的
  2. 按照 margin 设定的留白以后， Reveal.js 自动调整幻灯片的宽，高
  3. 并且保证了幻灯片的宽高比与设计一致， 不保证像素数一致

9 <img>限制

下面在比例为 1024 : 768 的幻灯片里中， 插入一张 1024x768 的图片。位置和大小与预期都不一致 ：

这是因为 Reveal.js 对 <img> 元素做了限制， 解除限制以后图片可以填充满整个幻灯片 ：

解除 <img> 限制是为了在 1024 : 768 的幻灯片插入 1024x768 的图片严丝合缝

10 图片嵌入

图片可以装入两种容器 r-stretch 与 .absolute ：

  • 两种容器都一直保持横纵比

  • 默认装入 r-stretch 容器中， 自动撑满容器

  • 装入到 .absolute 容器中， 指定绝对位置。 它保证图片的像素不变， 除非装不下以后才缩小

---
title: "图片嵌入"
format: 
  revealjs: 
    width: 1024 
    height: 768
    include-in-header:
      text: |
        <style>
          .reveal .slides { background: rgba(255,0,0,1); }
          .reveal section img.absolute { 
            margin : 0 !important ; 
            max-width : 100% !important ; 
            max-height : 100% !important ;}
        </style>
---

## 自动装入到 r-stretch 容器中

- 幻灯片的尺寸是 1024×768

- 所有图片里的圆都是 80×80， 完全不保证大小相同

- 使用类似这样的纯插入语法 `![](1024px-768px.svg)`

- 这些图片实际被放在了容器 `r-stretch` 中

- 图片被自动拓展到 `r-stretch` 可以装得下的最大，但是保证80x80的圆不会变成椭圆

## 

![](1024px-768px.svg)

## 

![](512px-384px.svg)

## 

![](256px-192px.svg)

## 

![](2048px-768px.svg)

## 装入到绝对容器 .absolute 中 {background-color="yellow"} 

- 图片都绝对插入到了 top="0" left="0" 

- 绝对插入后， 能放下就不缩放

- 所有图片里的圆都是 80×80， 尽量保证大小相同 

- 没有一张图片指定尺寸插入，都是自动尺寸

- 接下来这些图片被放在了容器 `.absolute` 中

## {background-color="yellow"} 

![](1024px-768px.svg){.absolute top="0" left="0"}

## {background-color="yellow"} 

![](512px-384px.svg){.absolute top="0" left="0"}

## {background-color="yellow"} 

![](256px-192px.svg){.absolute top="0" left="0"}

## {background-color="yellow"} 

![](2048px-768px.svg){.absolute top="0" left="0"}

11 文字绝对定位

因为文字是被放在了框中， 框又比文字大一些， 所以看起来感觉没有被对齐到指定位置， 实际上已经正确对齐了 ：

12 幻灯片背景

利用 background 属性，可以设置显示设备幕布的背景。 支持 纯色、渐变、图像、视频、 iframe

12.1 彩色背景

支持所有 CSS 颜色格式，包括十六进制值、颜色关键字、rgba() 或 hsl() ：

---
title: "彩色背景"
format: revealjs
---

##  {background-color="aquamarine"}

幻灯片, aquamarine

##  {background-color="#806040"}

幻灯片, #806040

12.2 渐变色背景

支持所有 CSS 渐变格式，包括 linear-gradient线性渐变、 radial-gradient径向渐变、 conic-gradient圆锥渐变 ：

---
title: "渐变背景色"
format: revealjs
---

## 线性渐变 {background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"}

Slide with linear-gradient


## 径向渐变 {background-gradient="radial-gradient(#283b95, #17b2c3)"}

Slide with linear-gradient


## 圆锥渐变 {background-gradient="conic-gradient(#283b95, #17b2c3, #283b95)"}

Slide with linear-gradient

渐变背景色也是幻灯片的幕布底色， 幻灯片本身的背景色依然可以设置 ：

---
title: "渐变背景色，幻灯片也加背景色"
format: 
  revealjs: 
    include-in-header:
      text: |
        <style>
          .reveal .slides { background: rgba(255,0,0, 0.2); }
        </style>
---

## 线性渐变 {background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"}

Slide with linear-gradient


## 径向渐变 {background-gradient="radial-gradient(#283b95, #17b2c3)"}

Slide with linear-gradient


## 圆锥渐变 {background-gradient="conic-gradient(#283b95, #17b2c3, #283b95)"}

Slide with linear-gradient

12.3 图片背景

默认情况下背景图像会被调整大小以覆盖整个页面 ：

属性 默认值 描述
background-image – 要显示的图像的 URL, GIF 会在幻灯片打开时重新播放
background-size cover 参见说明 background-size
background-position center 参见说明 background-position
background-repeat no-repeat 参见说明 background-repeat
background-opacity 1 背景图像的不透明度，范围为 0–1。0 表示完全透明，1 表示完全不透明。

下面动画展示了 background-size 不同参数的效果 ：

与图片一样也分 contain 和 cover 两种图片覆盖背景， 范例 在独立窗口投影， 可以更清晰的看到效果 ：

---
title: "背景图片的尺寸设置"
format: 
  revealjs: 
    width: 1024 
    height: 768
    include-in-header:
      text: |
        <style>
          .reveal .slides { background: rgba(255,0,0,0.1); }
        </style>
---

## 说明 {background-color="black" background-image="blackboard-2880-1800.jpg" background-size="contain"}

- 背景图片 contain

- 背景颜色 black， 间接导致文字白色

## 说明 {background-image="blackboard-2880-1800.jpg" background-size="contain"}

- 背景图片 contain

- 背景颜色 默认

## 说明 {background-image="blackboard-2880-1800.jpg" background-size="cover"}

- 背景图片 cover

- 背景颜色 默认

如果有类似于地板一样的小图案， 可以重复平铺到背景 ：

---
title: "平铺到背景"
format: 
  revealjs: 
    width: 1024 
    height: 768
    include-in-header:
      text: |
        <style>
          .reveal .slides { background: rgba(255,0,0,0.4); }
        </style>
---

## 说明 {.smaller background-image="Grunge.jpg" background-position="0% 0%" background-size="10%" background-repeat="repeat"}

|设定|说明|
|:---|:---|
| `background-size="10%"`       | 10% 的含义是图片的宽度伸缩到背景宽度的 10% ， 高度保持图片的横纵比 |
| `background-position="0% 0%"` | 设置图片在背景中的位置 |
| `background-repeat="repeat"`  | 图片重复铺满背景 |

12.4 视频背景

可以自动在背景播放视频

属性 默认值 说明
background-video – 单个视频源，或以逗号分隔的多个视频源列表
background-video-loop false 是否循环播放
background-video-muted false 音频是否静音
background-size cover cover 覆盖背景， contain 装入背景
background-opacity 1 背景视频的不透明度，取值范围 0–1 
---
title: "背景视频"
format: 
  revealjs: 
    width: 1024 
    height: 768
    include-in-header:
      text: |
        <style>
          .reveal .slides { background: rgba(255,0,0,0.4); }
        </style>
---

## 说明 {background-video="SpaceX.mp4" background-video-loop="true" background-video-muted="true" background-size="contain" background-color="black"}

- 利用 iframe 嵌入带视频的页面， 需要加入参数 `allow="autoplay; fullscreen"`

13 幻灯片放映

幻灯片放映的基本导航通过以下键盘快捷键完成 ：

操作 按键
下一张幻灯片
上一张幻灯片
跳过fragments片段导航 Alt -> Alt <-
跳到第一张 Shift ->
最后一张 Shift <-

13.1 换页声音

切换幻灯片时会播放一个轻微的提示音。该功能给盲人用户使用， 让演示者能够通过听觉信号感知自己在幻灯片中的进度。启用方式如下：

---
title: "幻灯片切换音"
format: 
  revealjs: 
    slide-tone: true
---

## 说明

切换页面时会有不同的声音

## 页面2

页面2

## 页面3

页面3

13.2 自动翻页

演示文稿可以配置为自动翻页， 左下有钟表动画图表 ：

---
title: "自动翻页入门"
format: 
  revealjs:
    auto-slide: 5000
    loop: true 
---

## 5000毫秒后，自动翻页

![](1024px-768px.svg)


## 自动翻页

![](512px-384px.svg)

## 自动翻页

![](256px-192px.svg)

## 这是最后一页， 将从第一页循环

![](2048px-768px.svg)

还可以禁用自动播放控件， 使得无法暂停自动播放 ：

---
title: "自动翻页无法暂停"
format: 
  revealjs:
    auto-slide: 5000
    loop: true    
    auto-slide-stoppable: false   
---


## 5000毫秒后，自动翻页

![](1024px-768px.svg)


## 自动翻页

![](512px-384px.svg)

## 自动翻页

![](256px-192px.svg)

## 这是最后一页， 将从第一页循环

![](2048px-768px.svg)

还可以为片段单独设置动画延迟时间 ：

---
title: "片段自动翻"
format: 
  revealjs:
    auto-slide: 5000
    loop: true 
---

## 本页含有片段， 5秒自动翻

:::{.fragment}
接下来被设置成 2 秒自动翻
:::

:::{.fragment autoslide=2000}
这一行2秒就被翻过了
:::

:::{.fragment}
这一行又自动恢复成5秒翻过
:::

## 5000毫秒后，自动翻页

![](1024px-768px.svg)

## 这是最后一页， 将从第一页循环

![](2048px-768px.svg)

14 预览

概览模式提供了一种替代视图，其中显示了每张幻灯片的缩略图 ：

15 滚动幻灯片

Reveal.js 可以通过 滚动视图 以垂直滚动的导航方式呈现。 这在手机上是默认选择， 使用特别方便 。 下面 范例 是一个内容丰富的幻灯片， 可以查看滚动幻灯片的各方面内容 ：

有几种方法进入滚动视图 ：

  • 按 R 键切换到滚动视图

  • 在分享的幻灯片链接后面加上 ?view=scroll

  • 在 M菜单 中 Tool > Scroll View Mode 切换

如果要将幻灯片默认播放设置成滚动， 需要下面设置 ：

format:
  revealjs:
    scroll-view: true

15.1 选项

下面范例设置滚动选项， 滚动条默认不隐藏 ：

---
title: "滚动条不隐藏"
format: 
  revealjs: 
    incremental: true  
    scroll-view:
      activate: true
      progress: true
---

# 第一章, 早晨

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上

## 晚餐

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

下面是一些可用的选项 ：

选项 说明
progress 显示滚动条， auto、 true 、 false
snap 吸附， mandatory 每页自动吸附，proximity 滚动到位再吸附， false 不吸附
layout 幻灯片尺寸，full 幻灯片与窗口一样大，compact 幻灯片较小紧凑
activation-width 滚动视图激活宽度， 0 则禁用
activate true 激活滚动条

将 snap 设置为 proximity 可以不整页滚动幻灯片， 需要的时候再让幻灯片去吸附 ：

---
title: "proximity 吸附"
format: 
  revealjs: 
    incremental: true  
    scroll-view:
      activate: true
      progress: true
      snap: proximity
---

# 第一章, 早晨

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上

## 晚餐

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

16 幻灯片编号

可以给幻灯片启动编号功能， 右下角会显示类似 3 / 7 的文字 ：

---
title: "章节加上编号"
format: 
  revealjs: 
    incremental: true  
    slide-number: true
---

# 第一章, 早晨

右下角有幻灯片的编号

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上

## 晚餐

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

17 导出 PDF

导出 PDF 是利用 Chrome 浏览器的打印功能 ：

  1. 播放幻灯片的时候， 按 E 进入幻灯片导出模式

  2. 在浏览器中按 CTRL + P 进行打印

  3. 打印设置见下图

还可以进行一些进一步的设置 ：

选项 说明
show-notes 是否包含演讲者备注（可选值：true、false 或 separate-page）
slide-number 是否包含幻灯片页码（可选值：true 或 false）
pdf-max-pages-per-slide 对高度过高、无法放进单页的幻灯片，会自动扩展到多页显示。该选项用来限制一张幻灯片最多可扩展到的页数。
pdf-separate-fragments 包含多个片段（fragment）的幻灯片默认打印在单页上；设为 true 则为每个片段单独生成一页。

18 预览链接

Reveal.js 可以把链接整合到演示文稿的播放流程中， 当点击一个带有 preview-links: true 的超链接时, 链接会在幻灯片的上方用 iframe 打开 ：

---
title: "预览链接"
format: revealjs
---

## 打开百度地图

直接在本页打开百度地图， 而不是跳转到其他页面 ： 

::: {style="text-align: center; margin-top: 1em"}
[让出行更简单](https://map.baidu.com/){preview-link="true" style="text-align: center"}
:::

注意： 并不是所有的链接都允许被 iframe 嵌入

preview-link 的可用值包括 ：

值 说明
auto 在全屏演示模式下预览链接（否则正常导航到链接）
true 始终预览链接
false 从不预览链接（默认值）

19 发布幻灯片

如果要将幻灯片以单一 .html 文件给其他用户使用， 需要进行设置。这样所有的外部资源（视频除外）都被嵌入到了单一 HTML 中 ：

20 黑板

Quarto 内置了一个黑板。 通过指定 chalkboard: true 选项即可启用， 它可以在幻灯片上直接绘图， 或者在反面黑板上绘图 ：

---
title: "启用黑板"
format: 
  revealjs:
    chalkboard: 
      src: chalkboard.json
---

## 试一试

- 左下有两个按钮， 一个是在背面黑板绘图

- 另外一个是在幻灯片直接做笔记 

- 鼠标左键画图， 右键是橡皮擦除

快捷键 c 快速打开和关闭画布， 快捷键 b 快速打开和关闭画布。 嵌入资源单页面发布 embed-resources: true 与黑板冲突。 下面是一些快捷表格 ：

操作 快捷键
切换备注画布 C
切换黑板 B
重置所有绘图 BACKSPACE
清除当前幻灯片上的绘图 DEL
向前循环颜色 X
向后循环颜色 Y
下载绘图 D

如果希望加载之前的笔迹， 需要 .json 文件并使用下面语法。 必须依赖 web 服务 file 协议不行 ：

---
title: "启用黑板"
format: 
  revealjs:
    chalkboard: 
      src: chalkboard.json
---

还可以做更多的黑板设置 ：

选项 说明
theme 可设置为 chalkboard（默认）或 whiteboard
boardmarker-width 白板笔的绘制宽度；数值越大线条越粗。默认为 3
chalk-width 粉笔的绘制宽度；数值越大线条越粗。默认为 7
chalk-effect 取值范围为 [0.0, 1.0] 的浮点数，表示黑板上粉笔效果的强度。完全效果（默认）为 1.0，无效果为 0.0
src 加载之前的绘图， 使用 D 键下载绘图
read-only 防止修改现有绘图的配置选项。true：不可更改；false（默认）：可以更改
buttons 在幻灯片底部添加黑板按钮（默认为 true）
transition 幻灯片切换的过渡持续时间（以毫秒为单位），以便在过渡完成后绘制备注画布 
---
title: "更多黑板设置"
format: 
  revealjs:
    chalkboard: 
      theme: whiteboard
      boardmarker-width: 6
      chalk-width: 14
---


## 设置了哪些

- theme: whiteboard      默认是 chalkboard

- boardmarker-width: 6   默认是 3

- chalk-width: 14        默认是 7


## 关闭按钮 {chalkboard-buttons="false"}


这一页关闭了黑板的按钮

使用的语法是 `{chalkboard-buttons="false"}`

但是快捷键 `c` 和 `b` 依然生效

21 主页

主页是第一张幻灯片， 其内容根据多个文档选项生成， 比如标题、副标题、日期、作者、机构等等

---
title: "主页"
format: 
  revealjs: 
    incremental: true  
    slide-number: true
title-slide-attributes:
  data-background-image: 1024px-768px.svg
  data-background-size: contain
  data-background-opacity: "0.2"    
---

## 说明

- 图片以 `contain` 模式插入到主页

- 透明度是 0.2

可以使用选项 template-partials 自定义 .html 主页。下面的 title-slide.html 是在 Quarto官方模板 基础上修改得到的 ：

---
title: "DIY主页"
author:
  name: Wilson Qin
  affiliation: China xiiot，标题被设置的偏左上
format: 
  revealjs: 
    template-partials:
      - title-slide.html
---


## 说明

- 这里使用的 `title-slide.html` 是从 Quarto 官方下载的， 不过做了修改

- 主页的标题被修改的偏向左上

- `title-slide.html` 利用了 yaml 中的选项

21.1 标题不居中

默认情况下， 主页的标题是垂直居中的， 通过设置可以让它顶部对齐 ：

---
title: "主页标题"
author:
  name: Wilson Qin
format: 
  revealjs: 
    center-title-slide: false
---

## 说明

通过设置 `center-title-slide` 为 false 让主页标题垂直顶部对齐

22 过渡

Reveal 为幻灯片切换和幻灯片背景切换提供多种动画过渡效果。默认情况没有任何过渡，但可以通过下面选项，在全局或单张幻灯片上启用 ：

过渡类型 说明
none 无过渡（瞬间切换）
fade 交叉淡入淡出
slide 上下或左右滑动切换
convex 以凸面角度滑动
concave 以凹面角度滑动
zoom 缩放新幻灯片，使其从屏幕中心放大进入

还可以控制过渡切换速度 ：

速度 说明
default 中速
fast 快速
slow 慢速

下面展示了给幻灯片增加了过渡效果 ：

---
title: "带过渡效果"
format: 
  revealjs:
    transition: slide
    transition-speed: fast
---

# 第一章, 早晨

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上

## 晚餐

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

还可以针对每页单独设置切换效果 ：

---
title: "每页单独增加过渡效果"
format: 
  revealjs:
    transition-speed: slow
---

# 第一章, 无过渡

本章没有任何过渡内容

## 无过渡

幻灯片切换无任何过渡，生硬直接切换

## 保持无过渡

幻灯片切换保持无任何过渡。但是下一页有 fade 进入的效果

# 第二章, fade过渡{transition="fade-in fade-out"}

全部采用 fade 过渡

## fade过渡{transition="fade-in fade-out"}

全部采用 fade 过渡

## 保持fade过渡{transition="fade-in fade-out"}

继续采用 fade 过渡


# 第三章, slide过渡{transition="slide-in slide-out"}

全部采用 slide 过渡

## slide过渡{transition="slide-in slide-out"}

全部采用 slide 过渡

## 保持slide过渡{transition="slide-in slide-out"}

继续采用 slide 过渡

# 第四章, convex过渡{transition="convex-in convex-out"}

全部采用 convex 过渡

## convex过渡{transition="convex-in convex-out"}

全部采用 convex 过渡

## 保持convexe过渡{transition="convex-in convex-out"}

继续采用 convex 过渡


# 第五章, concave过渡{transition="concave-in concavex-out"}

全部采用 concave 过渡

## concave过渡{transition="concave-in concave-out"}

全部采用 concave 过渡

## 保持concave过渡{transition="concave-in concave-out"}

继续采用 concave 过渡


# 第六章, zoom过渡{transition="zoom-in zoom-out"}

全部采用 zoom 过渡

## zoom过渡{transition="zoom-in zoom-out"}

全部采用 zoom 过渡

## 保持zoom过渡{transition="zoom-in zoom-out"}

继续采用 zoom 过渡


# 第七章, 每页都不同

## 从 fade 到 convex {transition="fade-in convex-out"}

进入 fade-in 关闭 convex-out   

淡入 -> 凸面

## 从 slide 到 concave {transition="slide-in concave-out"}

进入 slide-in 关闭 concave-out   

滑动 -> 凹面

## 从 zoom 到 fade {transition="zoom-in fade-out"}

进入 zoom-in 关闭 fade-out   

缩放 -> 淡入

## 从 slide 到 zoom {transition="slide-in zoom-out"}

进入 slide-in 关闭 zoom-out   

滑动 -> 缩放

## 从 convex 到 fade {transition="convex-in fade-out"}

进入 convex-in 关闭 fade-out   

凸面 -> 淡入

23 隐藏

在幻灯片标题上添加 visibility="hidden" 属性即可隐藏该幻灯片。 被隐藏的幻灯片也不会被编号 ：

---
title: "隐藏某页幻灯片"
format: 
  revealjs:
    slide-number: true
---

# 第一章, 早晨

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

# 第二章, 晚上 {visibility="hidden"}

## 晚餐{visibility="hidden"}

- 吃意面
- 喝葡萄酒

## 入睡

- 上床
- 数羊

有时多准备几张幻灯片， 现场如果时间充足再讲。 最简单的做法是在幻灯片末尾再加几页但不编号 ：

---
title: "某页幻灯片不编号"
format: 
  revealjs:
    slide-number: true
---

## 起床

- 关掉闹钟
- 从床上起来

## 早餐

- 吃鸡蛋
- 喝咖啡

## 午餐

- 米饭
- 羊肉

## 晚餐

- 吃意面
- 喝葡萄酒

后面还有额外 2 页， 时间充足就播放。 但是进度条和页码已经结束  


## 洗刷{visibility="uncounted"}

- 刷牙
- 洗脚

## 入睡{visibility="uncounted"}

- 上床
- 数羊

24 布局辅助类

Reveal.js 提供了一些辅助类，用于控制内容的布局

24.1 堆栈布局

r-stack 布局类可以将多个元素上下重叠在一起， 它通常与 fragments 配合使用，以逐步显示各个元素 ：

---
title: "堆栈布局"
format: revealjs
---


## 片段重叠在一起

:::::: {.r-stack}

::: {.fragment width="400"}   
两只小猫
:::

![](cat1.png){.fragment width="450" height="300"}

![](cat2.png){.fragment width="300"}

::::::

24.2 自适应字号

r-fit-text 类会让文字尽可能放大，同时又不溢出幻灯片。当你想要超大号文字 、又不想手动去试合适的字号时，这个类非常有用 ：

---
title: "自适应布局"
format: revealjs
---


## 占满屏幕的文字

下面文字会尽量占满屏幕其余空间   

::: {.r-fit-text}
Big Text
:::

24.3 垂直居中

center 会使幻灯片内容垂直居中。元素之间的垂直间距不会改变 ：

---
title: "垂直居中"
format: revealjs
---


## 正常页面

正文和标题都在左上角


## 垂直居中 {.center}

正文和标题都在左中   

元素之间的垂直间距不会改变

主页标题的居中可以参考

24.4 拉伸填充

r-stretch 布局辅助类可以让你调整元素的尺寸，使其填满幻灯片中剩余的垂直空间 。下面的图片会自动调整大小， 以填满幻灯片标题及其前后文字之外的剩余空间 ：

---
title: "拉伸填充"
format: revealjs
---

## 图片占满

一只可爱的小猫 :

![](cat1.png){.r-stretch}

图片占满了幻灯片的其余位置， 不用计算

对于只包含一张顶层图片 的幻灯片，.r-stretch 类会被自动应用到该图片上。你可以通过设置 auto-stretch: false 选项来禁用此行为 ：

---
title: "禁用自动拉伸填充"
format: revealjs
---

## 图片自动占满

如果包含一张顶层图片， 会被自动拉伸填充占满屏幕其他部分 ： 

![](cat1.png)


## 禁用自动占满 {.nostretch}

下面禁用了该功能 ： 

![](cat1.png)

还可以给整个幻灯片全部禁用自动拉伸填充功能 ：

---
title: "禁用整个幻灯片的自动拉伸填充功能"
format: 
  revealjs:
    auto-stretch: false
---

## 不再自动拉伸

禁用了自动拉伸， 仅仅一张图片也不自动拉伸 ： 

![](cat1.png)

拉伸填充只对非嵌套的图片生效，位于片段fragments、布局面板、分栏columns等功能块中的图片， 都不会被自动拉伸 ：

---
title: "功能块不会被自动拉伸"
format: revealjs
---

## 普通图片，自动拉伸

![](cat1.png)

## 片段 fragments， 不拉伸

::: {.fragment}
![](cat1.png)
:::

## 布局面板 panel-fill， 不拉伸

::: {.panel-fill}
![](cat1.png)
:::

## 分栏 columns， 不拉伸

::: columns
::: {.column width="50%"}
![](cat1.png)
:::

::: {.column width="50%"}
![](cat2.png)
:::
:::

可滚动的页面会与自动拉伸的图片冲突， 下面是解决方案 ：

---
title: "可滚动幻灯片与自动拉伸"
format:
  revealjs:
    scrollable: true  
---

## 说明

在 YAML 中， 设置了 `scrollable: true`。 当页面内容太多的时候， 自动加滚动条。 但是自动拉伸的图片无法显示


## 问题：可滚动页面 + 拉伸图

下面图片， 因为页面加上了自动滚动条， 并且图片自动拉伸， 导致图片不能正常显示 ：    

![](cat1.png)   

猫，通常也称为家猫，是一种小型肉食性哺乳动物，也是人类最早驯化的动物之一。大约在九千年前，猫就已经开始在人类聚居地附近活动，它们最初因捕鼠护粮的能力而被人类接纳，后来逐渐成为世界各地广受欢迎的伴侣动物。

猫的体型轻巧灵活，成年家猫的体重一般在 2.5 到 7 千克之间。它们的身体结构高度适应捕猎：柔韧的脊柱使猫能够在空中调整姿态，伸缩自如的爪子可以在奔跑和攀爬时伸出、安静行走时收起；猫的眼睛在低光环境下视力极佳，瞳孔可随光线强弱快速收缩成细缝或放大成圆形；耳朵能够转动约一百八十度，可以精准定位猎物的方位；胡须则是重要的触觉器官，能帮助猫判断狭窄空间是否能够通过。

猫的听觉、嗅觉和夜视能力都远超人类。它们能听到高达六万五千赫兹的超声波，这有助于捕捉老鼠等小型猎物发出的高频声音。猫的舌头表面布满倒刺状乳突，既方便梳理毛发，也能帮助它们从骨头上刮下碎肉。作为纯粹的肉食动物，猫需要从动物蛋白中获取牛磺酸等必需营养素，长期缺乏牛磺酸会导致视力下降和心脏疾病。

在行为习性上，猫是晨昏活动的动物，每天睡眠时间长达十二到十六个小时。它们通过叫声、肢体语言、尾巴姿态和气味标记进行交流，"呼噜呼噜"的声音通常表示放松和满足，但在疼痛或紧张时猫同样会发出呼噜声来安抚自己。猫有着强烈的领地意识，喜欢用脸颊摩擦物品来留下气味标记。

现代家猫的平均寿命为十二到十五年，在室内饲养的条件下甚至可以达到二十年以上。目前全球登记在册的家猫数量数以亿计，形成了波斯猫、暹罗猫、布偶猫、英国短毛猫等众多品种，但绝大多数家猫都属于没有特定血统的普通家养猫。无论血统如何，猫凭借其优雅的姿态、独立的个性和治愈的气质，成为人类生活中不可或缺的家庭成员。


## 解决 { .nostretch }

本页使用 `{ .nostretch }` 禁用了图片自动拉伸。 图片可以正常显示 ： 

![](cat1.png)   

猫，通常也称为家猫，是一种小型肉食性哺乳动物，也是人类最早驯化的动物之一。大约在九千年前，猫就已经开始在人类聚居地附近活动，它们最初因捕鼠护粮的能力而被人类接纳，后来逐渐成为世界各地广受欢迎的伴侣动物。

猫的体型轻巧灵活，成年家猫的体重一般在 2.5 到 7 千克之间。它们的身体结构高度适应捕猎：柔韧的脊柱使猫能够在空中调整姿态，伸缩自如的爪子可以在奔跑和攀爬时伸出、安静行走时收起；猫的眼睛在低光环境下视力极佳，瞳孔可随光线强弱快速收缩成细缝或放大成圆形；耳朵能够转动约一百八十度，可以精准定位猎物的方位；胡须则是重要的触觉器官，能帮助猫判断狭窄空间是否能够通过。

猫的听觉、嗅觉和夜视能力都远超人类。它们能听到高达六万五千赫兹的超声波，这有助于捕捉老鼠等小型猎物发出的高频声音。猫的舌头表面布满倒刺状乳突，既方便梳理毛发，也能帮助它们从骨头上刮下碎肉。作为纯粹的肉食动物，猫需要从动物蛋白中获取牛磺酸等必需营养素，长期缺乏牛磺酸会导致视力下降和心脏疾病。

在行为习性上，猫是晨昏活动的动物，每天睡眠时间长达十二到十六个小时。它们通过叫声、肢体语言、尾巴姿态和气味标记进行交流，"呼噜呼噜"的声音通常表示放松和满足，但在疼痛或紧张时猫同样会发出呼噜声来安抚自己。猫有着强烈的领地意识，喜欢用脸颊摩擦物品来留下气味标记。

现代家猫的平均寿命为十二到十五年，在室内饲养的条件下甚至可以达到二十年以上。目前全球登记在册的家猫数量数以亿计，形成了波斯猫、暹罗猫、布偶猫、英国短毛猫等众多品种，但绝大多数家猫都属于没有特定血统的普通家养猫。无论血统如何，猫凭借其优雅的姿态、独立的个性和治愈的气质，成为人类生活中不可或缺的家庭成员。

25 自动动画

Reveal.js 可以在幻灯片之间自动为元素添加动画效果。只需要在相邻的两张幻灯片上添加auto-animate 属性，Reveal.js 会为两张幻灯片之间所有匹配的元素自动生成动画。 下面在不变内容但是属性变化的内容上创建动画 ：

---
title: "自动动画简单范例"
format: revealjs
---

## 第 1 页：起始状态 {auto-animate=true}

::: {style="margin-top: 100px; font-size: 1em; color: black; line-height: 1.5; background-color: transparent; padding: 10px; margin-left: 0px;"}
Animating content
:::

## 第 2 页：位置 + 字号 + 颜色 {auto-animate=true}

::: {style="margin-top: 220px; margin-left: 100px; font-size: 3em; color: red; line-height: 1.5; background-color: transparent; padding: 10px;"}
Animating content
:::

## 第 3 页：行高 + 背景色 {auto-animate=true}

::: {style="margin-top: 220px; margin-left: 100px; font-size: 3em; color: white; line-height: 2.5; background-color: #2780e3; padding: 10px;"}
Animating content
:::

## 第 4 页：内边距 + 外边距 {auto-animate=true}

::: {style="margin-top: 80px; margin-left: 260px; font-size: 3em; color: white; line-height: 2.5; background-color: #3fb618; padding: 60px; border-radius: 20px;"}
Animating content
:::

25.1 代码动画

第 1 张幻灯片先包含部分代码， 第 2 张补全了所有代码。 新增的代码会以动画方式自然展开显示，而不是生硬地整块替换， 常适合用来演示 “代码逐步完善” 的教学场景 ：

---
title: "代码自动动画范例"
format: revealjs
---

## 代码动画 {auto-animate="true"}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
})
```

## 代码动画 {auto-animate=true}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
  barplot(WorldPhones[,input$region]*1000, 
          main=input$region,
          ylab="Number of Telephones",
          xlab="Year")
})
```

25.2 移动动画

当幻灯片上的内容被添加、删除或重新排列时，Auto-Animate 可以自动将元素移动到新位置 ：

---
title: "移动动画"
format: revealjs
---

## 移动动画 {auto-animate=true}

Animation

Implicit

## 移动动画 {auto-animate=true}

Implicit

Animation

## 移动动画 {auto-animate=true}

Animation

26 元素匹配

在两张启用了 auto-animate 的幻灯片之间切换时，Reveal.js 会尽力自动寻找两张幻灯片中相互匹配的元素 ：

  • 文本 ：只有当 文本内容 和 节点类型 都完全相同时，才视为匹配

  • 图片、视频和 iframe， 比较它们的 src 属性

  • 此外，还会考虑元素在 DOM 中出现的 先后顺序

在自动匹配无法奏效的情况下， 可以为想要做动画过渡的元素添加相同的 data-id 属性。data-id 的匹配优先级 高于自动匹配 ：

---
title: "元素匹配"
format: revealjs
---

## 利用 `data-id`  进行匹配 {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-hstack}
::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"}
:::
:::

## Element Matching with `data-id` {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-stack}
::: {data-id="box1" style="background: #2780e3; width: 350px; height: 350px; border-radius: 200px;"}
:::

::: {data-id="box2" style="background: #3fb618; width: 250px; height: 250px; border-radius: 200px;"}
:::

::: {data-id="box3" style="background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;"}
:::
:::

上面动画设置可以针对整个演示文稿 、 单张幻灯片 或 单个动画元素 来覆盖特定的动画设置。 以下配置属性可用于修改某张幻灯片或某个元素的动画设置 ：

属性 默认值 说明
auto-animate-easing ease 缓动函数
auto-animate-unmatched true 控制没有匹配目标的元素是否以淡入方式出现。设为 false 可使其立即出现。
auto-animate-duration 1.0 动画持续时间（秒）。
auto-animate-delay 0 动画延迟时间（秒）。只能针对单个元素设置，不能在幻灯片级别设置
auto-animate-id 未设置 用于将多张启用了 auto-animate 的幻灯片关联起来的 ID
auto-animate-restart 未设置 强制中断两张相邻的 auto-animate 幻灯片（即使它们具有相同的 auto-animate-id）

有些动画可以全局进行设置 ：

---
title: "My Slide"
format:
  revealjs:
    auto-animate-easing: ease-in-out
    auto-animate-unmatched: false
    auto-animate-duration: 0.8
---

27 片段

片段用于高亮显示或逐个渐进地揭示幻灯片上的各个元素。所有带有 fragment 类的元素，都会在切换到下一张幻灯片之前被逐步展示出来 ：

---
title: "片段简单范例"
format: revealjs
---

## 片段：淡入与淡出

::: {.fragment}
默认效果：淡入（Fade in）
:::

::: {.fragment .fade-out}
fade-out：淡出消失
:::

::: {.fragment .fade-up}
fade-up：淡入同时向上滑动
:::

::: {.fragment .fade-down}
fade-down：淡入同时向下滑动
:::

::: {.fragment .fade-left}
fade-left：淡入同时向左滑动
:::

::: {.fragment .fade-right}
fade-right：淡入同时向右滑动
:::

::: {.fragment .fade-in-then-out}
fade-in-then-out：先淡入，下一步再淡出
:::

::: {.fragment .fade-in-then-semi-out}
fade-in-then-semi-out：先淡入，下一步淡出至 50%
:::

::: {.fragment .semi-fade-out}
semi-fade-out：淡出至 50% 透明度
:::

## 片段：高亮效果

::: {.fragment .highlight-red}
highlight-red：文字变红
:::

::: {.fragment .highlight-green}
highlight-green：文字变绿
:::

::: {.fragment .highlight-blue}
highlight-blue：文字变蓝
:::

::: {.fragment .highlight-current-red}
highlight-current-red：文字变红，下一步恢复
:::

::: {.fragment .highlight-current-green}
highlight-current-green：文字变绿，下一步恢复
:::

::: {.fragment .highlight-current-blue}
highlight-current-blue：文字变蓝，下一步恢复
:::

## 片段：其他效果

::: {.fragment .grow}
grow：放大
:::

::: {.fragment .shrink}
shrink：缩小
:::

::: {.fragment .strike}
strike：删除线
:::

## 结束

感谢！

下面是这些效果的说明 ：

名称 效果
fade-out 初始可见，然后淡出消失
fade-up 淡入的同时向上滑动
fade-down 淡入的同时向下滑动
fade-left 淡入的同时向左滑动
fade-right 淡入的同时向右滑动
fade-in-then-out 先淡入，下一步再淡出
fade-in-then-semi-out 先淡入，下一步淡出至 50% 透明度
grow 放大
semi-fade-out 淡出至 50% 透明度
shrink 缩小
strike 添加删除线
highlight-red 文字变红
highlight-green 文字变绿
highlight-blue 文字变蓝
highlight-current-red 文字变红，下一步恢复原始颜色
highlight-current-green 文字变绿，下一步恢复原始颜色
highlight-current-blue 文字变蓝，下一步恢复原始颜色

片段还可以层层嵌套，从上到下逐条展示 ：

---
title: "层层嵌套范例"
format: revealjs
---

## 下面范例被三重嵌套 

::: {.fragment .fade-in}
::: {.fragment .highlight-red}
::: {.fragment .semi-fade-out}
Fade in > Turn red > Semi fade out
:::
:::
:::

默认情况下 fragments 按照它们在 DOM 中出现的先后顺序依次展示。你可以使用 fragment-index 属性来改变这个显示顺序 ：

---
title: "片段顺序范例"
format: revealjs
---

## 顺序自定义

::: {.fragment .fade-up fragment-index=3}
效果最后出现 ：向上滑入（index=3 + fade-up）
:::

::: {.fragment .highlight-red fragment-index=1}
效果最先出现 ：直接变红（index=1 + highlight-red）
:::

::: {.fragment .grow fragment-index=2}
效果第二个出现 ：放大（index=2 + grow）
:::

## 同组元素 + 各自效果

下面三个元素同组（index=1）同时触发，但各自动画不同：

::: {.fragment .fade-left fragment-index=1}
效果最先出现 ：向左滑入
:::

::: {.fragment .fade-right fragment-index=1}
效果最先出现 ：向右滑入
:::

::: {.fragment .highlight-blue fragment-index=1}
效果最先出现 ：文字变蓝
:::

::: {.fragment .semi-fade-out fragment-index=2}
效果最后出现 ：第二步：以上三个保持不动，只有我半透明淡出
:::

还可以 自定义片段， 下面片段最开始是模糊的， 播放以后展示出其效果 ：

---
title: "自定义片段"
format: revealjs
---

## 模糊

::: {.fragment .custom .blur}
First item to be unblurred
:::

::: {.fragment .custom .blur}
Second one to be revealed
:::

<style>
.reveal .slides section .fragment.blur {
  filter: blur(5px);
}

.reveal .slides section .fragment.blur.visible {
  filter: none
}
</style>

28 视差背景

下面幻灯片的内容详细描述了什么是视差背景， 由于支持的还不是很全面， 所以要使用视差滚动的背景效果， 需要像下面范例一样做必要的配置， 并且用 AI 分析照片调整文字颜色 ：

---
title: "视差背景"
resources:
  - qingming.jpg
format:
  revealjs:
    parallax-background-image: qingming.jpg
    parallax-background-size: "14400px 900px"
    parallax-background-horizontal: 1907
    parallax-background-vertical: 0
---
---
title: "视差背景"
resources:
  - qingming.jpg
format:
  revealjs:
    parallax-background-image: qingming.jpg
    parallax-background-size: "14400px 900px"
    parallax-background-horizontal: 1230
    parallax-background-vertical: 0
---

## 什么是视差背景? 

Parallax 视差 源自一个日常观察 ： 

> 坐车看向窗外时，近处的电线杆飞速掠过，远处的山峰却移动得很慢

- 这种 "近快远慢" 的角速度差，是大脑判断纵深距离的依据
- 应用到幻灯片上翻页时， 背景缓慢平移，幻灯片正常切换
- 平面的画面由此产生纵深感

## 工作原理：两层以不同速度移动

| 图层 | 移动方式 |
|---|---|
| **前景层，幻灯片** | 每翻一页，完整移动一个幻灯片宽度 |
| **背景层，背景图** | 只平移其中一小部分， 缓缓漂移 |

- 背景图必须比幻灯片大很多， 多出的部分就是留给平移的余量
- 本演示的背景图：14400 × 900 （约 16:1 的长卷）
- 幻灯片默认 1050 × 700，只显示长卷的一小段

## 在 Quarto 中配置

一共 7 次翻页，每次翻 1271 可以把画卷的宽度滚到头   

```yaml
---
title: "视差背景"
format:
  revealjs:
    parallax-background-image: qingming-parallax-photo.jpg
    parallax-background-size: "14400px 900px"
    parallax-background-horizontal: 1907
    parallax-background-vertical: 0
---
```

四个选项缺一不可：图片、尺寸、横向与纵向的漂移量

## 参数详解

| 选项 | 作用 | 建议 |
|---|---|---|
| parallax-background-image | 背景图路径 | 与 .qmd 同目录 |
| parallax-background-size | 背景图渲染尺寸， 宽 高 | 宽度 ≥ 幻灯片 2 倍 |
| parallax-background-horizontal | 横向漂移量 | 默认 200；长卷建议 800 起 |
| parallax-background-vertical | 纵向漂移量 | 设 0 可让地平线保持稳定 |

- 横向数值越大，"展卷"的感觉越强
- 页数多的演示可以继续调小横向漂移，让整幅画卷走完

## 背景图的选择

适合做视差背景的图 ：

- 空景 ：天空、山脉、水面、渐变纹理
- 宽高比大、横向延展性好的图
- 色调柔和，与文字对比明显

需要避免：

- 有明确视觉主体（会随平移分神）
- 色彩过于浓烈（盖过文字）
- 细节过密（翻页时画面杂乱）

## 文字可读性技巧

背景是照片时，建议给文字加一点浅色描边提高对比度

- 深色文字 + 浅色背景：加白色光晕
- 浅色文字 + 深色背景：改为深色阴影

## 总结

- 视差 = 近快远慢 的速度差 → 纵深感
- Quarto 只需 4 个 YAML 选项 即可启用
- 背景图要 足够宽、足够空
- 横向漂移量决定 "展卷" 节奏， 纵向设 0 更平稳


```{=html}
<style>
/* 导入宋体用于标题，提升古典展卷质感 */
@import url('https://googleapis.com');

/* 1. 修复背景平铺 */
.reveal .backgrounds,
.reveal .slide-background-content {
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* 2. 幻灯片卡片：半透明暗色、细边框、大阴影（收紧上下内边距留出空间） */
.reveal .slides section.slide {
  background: rgba(11, 19, 43, 0.75) !important; 
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  padding: 35px 45px !important; 
  box-sizing: border-box;
}

/* 3. 标题样式：减小字号 */
.reveal h1, .reveal h2 {
  font-family: 'Noto Serif SC', serif !important;
  font-weight: 900;
  font-size: 1.6em !important; 
  color: #ffffff !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(234, 179, 8, 0.2);
  margin-bottom: 20px !important;
}

/* 4. 通用正文与列表样式：全局缩减一号 */
.reveal p, .reveal li, .reveal span {
  font-size: 0.85em !important; 
  line-height: 1.5 !important;
  color: #e2e8f0 !important; 
}

/* 列表间距微调 */
.reveal ul, .reveal ol {
  margin-bottom: 12px !important;
}
.reveal li {
  margin-bottom: 5px !important;
}

/* 5. ⚡ 强力修复与紧凑化：表格样式 */
.reveal table,
.reveal table th,
.reveal table td {
  color: #e2e8f0 !important; 
  font-size: 0.75em !important; /* 表格文字比正文再小一号，确保完全容纳 */
}

.reveal table {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border-collapse: collapse;
}

/* 表头特殊高亮与紧凑内边距 */
.reveal table th {
  background: rgba(234, 179, 8, 0.15) !important; 
  color: #facc15 !important; 
  font-weight: bold !important;
  border-bottom: 2px solid #facc15 !important;
  padding: 8px 12px !important;
}

/* 单元格边框与紧凑内边距 */
.reveal table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 12px !important;
}

/* 6. 强调高亮词 */
.reveal strong {
  color: #facc15 !important; 
}

/* 7. 引用文本样式优化：紧凑尺寸 */
.reveal blockquote {
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #facc15 !important;
  box-shadow: none;
  font-style: normal;
  padding: 10px 20px;
  margin: 15px 0 !important;
}
.reveal blockquote p {
  font-size: 0.85em !important;
  color: #cbd5e1 !important;
}

/* 8. 代码块文字微调：防止超宽 */
.reveal pre {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.reveal pre code {
  font-size: 0.75em !important; 
  color: #f8fafc !important;
  background: #1e293b !important;
  padding: 10px !important;
}
</style>
```

说明 ：

  1. 因为存在一些 bug ， 所以要将背景图放到 resources 中

  2. 需要单独的样式， 否则缺少必要的设置. 详细可以参考上面源码

  3. 背景图使用 cover 覆盖掉视口， 宽度也就因此而限制

29 垂直幻灯片

Reveal.js 默认使用经典的线性导航模式，也就是所有幻灯片逐张切换。但是还提供了垂直切换模式， 左、右切换章， 上下切换节 ：

---
title: "垂直幻灯片范例"
format: 
  revealjs: 
    navigation-mode: vertical
---

# 第一章, 早晨

## 起床

关掉闹钟

从床上起来

## 早餐

吃鸡蛋

喝咖啡

# 第二章, 晚上

## 晚餐

吃意面

喝葡萄酒

## 入睡

上床

数羊

当启用 vertical 或 grid 导航时， 会出现切换方向提示按钮。 默认情况下这些按钮在幻灯片的四个边。也可以使用 controls-layout 将它们切换到右下角。还可以使用 controls-tutorial 提供额外的视觉效果 ：

---
title: "导航模式控制按钮"
format: 
  revealjs: 
    navigation-mode: vertical
    controls-layout: bottom-right
    controls-tutorial: false
---

# 第一章, 早晨

## 起床

关掉闹钟

从床上起来

## 早餐

吃鸡蛋

喝咖啡

# 第二章, 晚上

## 晚餐

吃意面

喝葡萄酒

## 入睡

上床

数羊

使用 controls-layout: bottom-right 与添加 logo 不兼容， 因为 logo 也会出现在右下角。可以使用controls: false 完全禁用控制按钮的显示 ：

---
title: "控制按钮与logo冲突"
format: 
  revealjs: 
    navigation-mode: vertical
    controls-layout: bottom-right
    controls-tutorial: false
    logo: logo.svg
---

# 第一章, 早晨

## 起床

关掉闹钟

从床上起来

# 第二章, 晚上

## 晚餐

吃意面

喝葡萄酒

30 链接