135编辑器逐行显示样式学习笔记
1、原理展示
逐行显示样式.ID:90189
原理：文字一直存在，只不过每行文字盖了一个蒙层，蒙层填充色和文字的背景色一样，即白色。
当蒙层的opacity（不透明度）=1的时候，蒙层完全遮住文字，看不到文字。
当蒙层的opacity=0的时候，蒙层是透明的（想想一下透过玻璃看文字），完全能看到文字。
而opactiy的范围是0~1，所以当opacity从1-0变化时，文字就慢慢显示出来了。
下面我用PPT的蒙层的透明度变化来展示一下原理。
opacity演示.gif
二 、代码展示
诗歌文字内容，颜色，大小，速度都可以设置。
代码展示
如果你只是想更换文字，那么下面的代码解释可以不用看，直接把文字替换就行。
如果你想知道参数含义是什么，如何设置那么接着往下看。不会的英文单词，可以查字典，也可以查专业学习网站。
推荐菜鸟编程：https://www.runoob.com/svg/svg-reference.html
文字的参数
-
text-align 对齐方式
align 也是对齐方式，和text-align属性值相同。（具体的区别暂时不讨论）
image.png
- font-weight 字体粗细
font-weight:bold，意思就是粗体
image.png
蒙层的参数
- rect 是SVG中的矩形元素
其他形状元素
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
- 参数解释
width :矩形的宽度
height：矩形的高度
fill：填充颜色
opacity:蒙板（蒙层）的初始透明度（范围0-1）
opacity:the fact of being difficult to see through 直译就是事物难以看透的程度。
opacity=1，完全看不透。
opacity=0，可以看透。（就像通过玻璃看事物一样）
- animate
image.png
参数说明：
attributeName=待改变的目标属性名称
from：目标属性起始值
to：目标属性结束值
dur：属性变化持续时间
fill:规定动画结束之后的状态。有两个属性值：
（1）.freeze：动画结束以后，动画保持最后状态。
（2）.remove：动画结束之后，恢复到初始状态。
注意：rect元素的fill属性表示填充颜色，其他很多地方都是填充颜色。
repeatCount=在动画持续时间内重复的次数，属性值可以是数字，也可以indefinite
所以，逐行出现的的代码可以这样实现。
首先，文字是看不见的，矩形蒙层的opacity=1，即<rect opacity:1>
然后，蒙层的opacity属性开始变化。
attributeName=opacity （目标属性不透明度需要改变）
from：1 （不透明度起始值为1，看不见文字）
to：0 （不透明度结束值为0，蒙版透明，看见文字）
dur：1s (文字从看不见到看见，过程持续1秒）
fIll="freeze" （opacity最后保持结束后的状态，即0）
3、花样百出的显示
通过修改参数，也可以出现各种样式的文字表现形式。
- 文字消失-出现-消失
消失-出现-消失.gif
-
文字出现-依次消失
出现-逐行消失.gif
更多花样等你来发现！
4、注意事项
- 如果opacity的静态初始值，和变化初始值不一致，就会产生突变效果。
image.png
割裂感.gif
文字出现，然后突然消失，再慢慢出现。
- fill="remove"的时候，回到的是opcacity的静态初始值，而不是from后面的动态初始值。
上面的例子中，flll="remove",文字最后的状态是出现，所以opcaciy=0。
反推出最初的状态跟随opacity的静态初始值，而不是from后面的动态初始值。
- 关于每行、每段文字开始时间的设置。如何才能让文字出现/消失更加连贯。
如果文字上一段出现的文字是标题/短诗句，上句消失时间=下句开始时间。
例如：诗歌体裁
第一句诗begin=1s,dur=3s（第4秒结束）
第二句诗 begin= 4s,dur=3s（第4秒开始）
......
如果上一次文字是长段文字，begin可以提前1-2秒
例如：
标题 begin =1s ,dur= 1s（第2s结束）
第一段落 begin= 2s,dur= 5s （第2s开始，第7s结束）
第二段落 begin=6s，dur=5s（第6秒开始，第11s结束）
......
时间间隔.gif
ps:读过一本关于快速阅读的书，其中一个快速阅读方法，可以用逐行消失训练。
读一行，就遮住一行。让人专注眼下，不再回头去看。
那通过逐行消失，就能达到这种训练。
网友评论