跟苏苏一起
每天学点排版干货
【这是苏苏的第30篇文章】
最近有人私下问苏苏，版头的文字动效怎么做的，也想做个类似的动态。其实真的超级简单der～～～
今天苏苏就来讲几种和版头类似的，都是最基础的文字动态效果吧！
整行效果
01
整行文字移入/淡入
苏苏i排版?点击上方空白处查看【整行移入】效果
苏苏i排版?点击上方空白处查看【整行淡入】效果
Step1:添加svg布局
添加一个svg到编辑区，删除模板自带的文字。
Step2:设置文字内容及属性
移入和淡入的区别就是在设置动画类别时一个选移入+方向，一个直接选淡入。
Step3:保存预览
设置完后保存预览，如果效果不满意，继续重复第二步微调。
Tips
移入与直接淡入效果中的文字无法手动设置字间距和字体，只能调整位置、字号、颜色及粗细，且每次调整完都必须要保存预览后才可以看见，编辑区是看不见的。
单列文字移入效果无法实现。因为svg布局中的文字不能回车，也不能设置竖排属性。
02
整行/列逐渐出现
苏苏i排版
?点击上方空白处查看【整行依次出现】效果
苏苏i排版
?点击上方空白处查看【整列依次出现】效果
Step1:编辑文字内容
删掉svg模板文字，然后布局内输入文字。
Step2:设置动画属性
设置背景色与文章底色一致，【动画】里的文字内容全部删除，方向时长自定。
这个动态的原理是在文字上盖一层颜色，然后颜色移出，字就逐渐出现了～所以【动画】里的背景色一定要和文章背景色一致，否则就会很明显被盖了一块色块啦！
Tips
色块方向记得设置成需要文字出现的顺序相反哦～
逐字效果
逐字的设置比整行麻烦很多，而且限制条件也大，所以看情况用哦！
01
逐字移入/淡入
?逐字移入效果
?逐字淡入效果
Step1:添加svg布局
Step2:逐个添加文字
输入第一个字，设置好颜色、大小，把动画触发设置为自动，设置好移入/淡入的时间及方向。
然后点击中间灰色的➕号添加第二个字，其他不再动，只要修改文字内容和横向位置就好。
横向为50时是绝对居中。所以苏苏一般会把整行最中间的文字先设为50，然后向两侧递增/减设置。
Step3:保存预览
还是那句话，多预览多调整哦～
02
逐字逐渐出现
?逐字逐渐出现效果
这个就更要麻烦一点。
每个字都要设置成单列，然后修改延迟时间。
Step1:添加多列布局
有几个字，就添加几列的普通布局。
每列都加入一个svg布局，每个svg布局中逐个输入文字。
Step2:设置延迟时间
延迟时间一般是动画时间的倍数。
比如第一个“苏”设置的动画时长为1s，那么第二个“苏”则延迟1s，“i”延迟2s，以此类推。
Step3:保存预览
Tips
逐字出现效果的使用条件：
一般只能放在文章开头，而不能放在文章任何的中间位置。
因为秀米的svg触发有一个规则：
如果第一个【动画触发】是【点击】，那么后面的动画触发就只能全部是点击。如果想要后面的文字都是【自动触发】，那么第一个动画触发就只能是【自动】(不知道你们有没有被绕晕)。
总而言之，这个效果中所有文字的【动画触发】都只能设为【自动】，因为不可能每个文字都要点一下再出现。
自动触发的效果在读者进入文章的那一刻就开始计时。如果在文章中间，等读者滑到那动画早已触发完成，就没有动态效果了。
所以只有放在开头，读者才能一进去就看到动画被触发的效果。
点击查看今日作业
排版交流
群号：1140430886(q群)
进群暗号：你
推荐阅读
贴纸保存｜重叠规律2｜重叠规律1｜插入小图片｜一键排版｜竖排文字｜滑动布局｜固定布局背景｜普通布局背景｜多列图片｜同步
排版发光｜异形图片｜古风教程｜动态元素2｜动态元素1｜描边文字｜伸展布局｜一键点亮SVG｜万能标题｜文章配色
配色网站｜渐变色网站｜图片网站
苏苏i排版
每天学点排版干货～
球分享
球点赞
球在看
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
