Apple Hello 字体动效

AppleHello

最近产品又要实现苹果的经典的Hello打字动画，总结一下实现的思路。

大致搜了一下，有很多版本。基本都是以连体字母，一笔画的效果。

比如

但每个版本都会有一些差异，比如渐变、轮廓、阴影等。

比如这个apple version pro的版本

可以看到有光照、阴影、AO等效果。

实现目标

梳理下要实现的目标：

1. 字体是连体的，随时间变化，逐渐显示出来。
2. 依据长度采样渐变色
3. 开头结尾要有圆角
4. 线条粗细随时间变化，先出现的线条略微粗一些，随时间变细。
5. 消失时从头部开始消失，逐渐变细。
6. 阴影和AO暂时没想到好的实现方式，唯一想到的方式是在外部软件烘焙成贴图。

实现思路

首先用Spline构造网格

样条线与网格

因为要控制线条的宽度，所以用横向的UV，顺便给个边缘半透明当作抗锯齿，颜色就按长度采样个色带。

然后是起始和结束的圆角，利用纵向的UV，判断是否是起始或结束的点，显示半圆。

圆角

随时间变化，控制线条不同长度位置的宽度和透明度

宽度与抗锯齿

最后给个timeline去K一下各个时机的参数就完工了

最后在稍微加个Bloom看看效果。