环形进度条的demo,吉彤卡了两天。
逻辑本身不复杂,画一个SVG圆环,根据验证码倒计时填充弧长,再配一个居中的数字显示。问题出在动画的流畅度上。他在恒远科技的时候也做过类似组件,当时用requestAnimationFrame硬算每一帧的角度偏移,效果尚可,但代码写得粗糙,后期维护的人骂了三个月。这次他想做得干净一点,把动画封装成可复用的hook,结果在状态同步上反复踩坑——倒计时每秒钟触发一次更新,但动画需要每秒六十帧平滑过渡,两个频率对不上,弧长的填充要么跳帧要么滞后。
周三下午三点,沈瑶过来看了一眼他的屏幕:“怎么样了?”
“还在调。”吉彤让开一点,把浏览器里的效果给她看,“你看,数值更新和弧长变化不同步,用户感受上会觉得倒计时走完了圆环还没填满,反过来也一样。”
沈瑶俯身盯着屏幕看了十几秒,然后直起身:“你这个思路没问题,但驱动方式可以换一下。不用每一帧都去算倒计时剩余值,而是把开始时间和总时长存下来,每帧根据当前时间戳算进度。这样动画和数值共享同一个时间源,自然就同步了。”
吉彤愣了愣。他脑子里那团纠结的线忽然被抽出了一根头,顺着那个方向捋过去,很快就看见了出口。
“对……我干嘛非要把倒计时当成驱动源。”他自言自语着已经开始改代码,“用时间戳做唯一驱动,数值和弧长都是派生状态……”
“你慢慢改,改完跑一下边界情况,比如页面切后台再切回来,看看时间戳差值怎么处理。”沈瑶拍了拍他椅背,端着水杯走了。
吉彤埋头改了半个小时,demo终于流畅跑了起来。圆环从十二点钟方向开始顺时针填充,数字同步递减,平滑得像一条被匀速抽出的丝线。他盯着屏幕看了三遍,确认没有跳帧,然后打开项目文件夹新建了一个测试文件,专门用来模拟切后台再返回的场景。处理时间戳差值的时候,他想起之前林悦在需求会上说的“不能让用户更焦虑”,于是把后台切回时的逻辑改成了保持当前进度继续,不重置也不跳变。
改完他靠在椅背上伸了个懒腰,抬头发现已经五点半了。旁边赵宇正在收拾东西,见他抬头便说:“走了走了,今晚别搞了。你那个demo沈瑶说没问题就是没问题了,没必要再自我折磨。”
“行,就走。”
他存了代码,关电脑的时候看见企业微信群里弹出一条消息。hR发了一张分享会的报名表截图,目前已有八个人报名,按顺序排着,名字后面跟着分享主题——“和甲方沟通时我学会倾听”“第一次主持跨部门会议”“从工程师到产品经理,我换了一种看问题的角度”。
赵宇凑过来瞄了一眼:“你报名了吗?”
“没。”
“报一个呗,反正就是上去讲几分钟,不正式。上周有个姑娘上去讲她怎么从社恐变成能在二十人面前讲ppt的,底下全是鼓励的掌声,氛围特别放松。”
吉彤想了想:“我再看看。”
周四下午,环形进度条的demo通过了孙姐的预览。孙姐坐在他工位旁边看了两轮交互演示,重点测了切后台返回、弱网环境下的超时重试、以及连续点击重新获取的防抖处理。每测完一个场景她都点点头,最后说了一句:“代码结构不错,注释也清楚,可以直接合进开发分支。”
吉彤关掉演示页面的时候,心里升起一股微妙的满足。他在恒远写了三年代码,主管验收时只问两个问题——“功能跑通了吗”和“性能压测过了吗”,从没人在意过注释写得够不够清楚、变量命名规不规范。而沈瑶在代码审查时留的那些蓝色批注,像是一处处标注好的路标,他照着走了一遍,出来的东西自己看着都顺眼。
傍晚下班前,他在电梯口碰见了扎雾蓝色头发的前台姑娘。她正跟一个同事聊天,看见他便招了招手:“吉彤,明天分享会真的不来吗?我听说还有名额。”
“你也要讲?”
“我讲啊。”她眨眨眼,“讲我入职第一天把公司门禁卡刷反了,在玻璃门外面站了五分钟才被人发现放进来。你听听,这种糗事都能讲,你有什么不能讲的?”
吉彤笑了一下:“我再想想。”
当晚回到出租屋,他躺在床上翻手机。企业微信群里hR又在催报名,说还剩三个名额,先到先得。底下沈瑶跟了一句“吉彤要不要来”,林悦也发了个“新人不上来讲两句吗”的表情包。
他盯着屏幕看了很久,然后打开一个空白文档,开始打字。
第二天下午四点半,活动室。
四十来把折叠椅摆成半圆形,前面支了一块白板和投影幕。hR在角落放了茶歇台,小饼干和水果切成整齐的块。吉彤到的时候已经坐了大半的人,他找了个后排靠边的位置坐下,手里攥着手机,屏幕上是他昨晚打好的几行要点。
第一个上去的是测试组的圆框眼镜女生,讲她入职后第一次接到线上紧急bug,手抖得敲不对命令,最后是孙姐在旁边帮她一行一行念出来的。她说:“我当时觉得特别丢人,后来发现咱们组几乎每个人都有过被带着一步步查日志的经历。没人因为这个看不起你,反而之后你帮别人的时候更有耐心。”
底下响起一片轻轻的掌声。hR在旁边举着手机录像,有人递了杯水上去。
第二个是产品部的一个高个子姑娘,讲她跟一家银行客户对接需求时的经历。对方的技术负责人是个中年男人,一上来就说“你们蔚蓝科技的产品太花哨,我们只要功能不要体验”。她花了两周时间,每周去对方公司坐三天,面对面聊用户场景,最后把对方从“不要体验”说服到主动要求加两个体验优化点。“后来那个负责人跟我说,他以前觉得体验就是UI画好看点,没想到背后有这么多数据支撑。”
吉彤注意到林悦坐在前排,听到这里时微微点了点头。
第三个报名的人临时有事没来,hR看向台下:“还有谁想上?替补名额开放。”
吉彤感觉到自己的心跳快了一拍。他攥着手机的指节收紧,脑子里闪过几个念头——他准备的那几行话太短了,不够撑五分钟;而且他才来两周,有什么好讲的;再说在座的都是资深员工,他一个新人的故事能有什么意思。
但旁边的赵宇已经在起哄了,冲hR那边喊:“吉彤准备好了!让他上!”几个坐在前面的姑娘回头看了一眼,笑着拍了拍手。
吉彤深吸一口气,站了起来。
他走到白板前面,手机屏幕上是那几行要点,但他没有低头看。他清了清嗓子:“大家好,我是技术部新来的前端开发,吉彤。”
底下有人轻轻说了句“欢迎”,他看见沈瑶在第二排冲他竖了个大拇指。
“我其实想了很久要不要报名,因为我觉得自己才来两周,没什么值得分享的。但是……”他顿了顿,“但是我昨天在写环形进度条demo的时候,卡了两天,最后被沈瑶一句话点醒了。我当时就在想,如果我还在上一家公司,遇到同样的问题我会怎么做。”
他停了一下,把手机揣回兜里。
“我大概率会自己熬到夜里十二点,把各种笨办法试一遍,试到能跑通为止。因为之前公司的氛围是,你问问题就说明你能力不够,会被看不起。我刚来的头几天,遇到不懂的东西第一反应也是自己硬扛,怕开口显得蠢。”
台下安安静静的,有人托着腮看他。
“但这两周我发现,在这里问问题是正常的。沈瑶让我‘别怕问’,孙姐说‘问题不过夜’,我一开始不太信,后来发现她们是真的这么做的。我卡了两天的那个进度条,沈瑶过来看了十几秒就说出了关键,如果我自己闷头试,可能得试到下周。”
他吸了口气,声音平稳了些:“所以如果说我在蔚蓝学到的第一课是什么,那就是开口不丢人。先开口问,把事情做对,比硬扛着显得‘我能行’重要得多。就这样。”
他往后退了半步,不知道接下来该做什么。台下安静了两秒,然后响起了比之前更大一些的掌声。有人喊了句“说得好”,hR在旁边笑着朝他比了个oK的手势。
吉彤走回座位的时候,赵宇用胳膊肘碰了他一下:“你不是说不想讲吗,这不是讲得挺好。”
“被你架上去的。”
“架得好。回头你请我喝奶茶。”
分享会继续。后面又有两个人上去,一个讲了如何在跨部门协作中学会让步,一个讲了自己被客户拒绝七次之后第八次终于成功的经历。每个人讲完之后都有人举手问问题,气氛松散得像一场朋友间的聊天。
五点四十分,分享会结束。吉彤去茶歇台拿了一瓣橙子,孙姐不知道什么时候走到他身边。
“讲得不错。”她说。
“谢谢孙姐。”
孙姐端起杯子喝了一口水,目光落在前方正在收拾椅子的几个同事身上:“你来这两周,感觉到什么了?”
吉彤嚼着橙子想了想:“感觉到……她们把很多时间花在沟通上,但返工的时间少了。而且干活的时候情绪负担小。”
孙姐微微点头:“这就是我们想做到的。情绪负担小,效率反而高。”她转头看了吉彤一眼,“你有什么不舒服的地方也可以说,不用藏着。”
“目前没有。”
“那就好。下周有个跟外部合作方的联合开发,可能会跟对方的技术团队有比较密集的沟通,到时候你和沈瑶一起参与。对方是家传统软件公司,对接方式可能跟咱们这边不太一样。”
吉彤愣了一下:“怎么个不一样法?”
孙姐笑了笑:“你到时候就知道了。提前说一声,习惯就好。”
她把空杯子放进回收筐,朝门口走去,背影利落干练。吉彤站在原地,把那句“习惯就好”在脑子里转了两遍,没琢磨出什么具体的暗示。
六点钟,他从活动室出来,经过茶水间的时候看见沈瑶和林悦正并排坐在高脚凳上聊天,一人端着一杯茶。沈瑶看见他便说:“吉彤,你讲的那个‘开口不丢人’,我听完特别有共鸣。我入职头一个月也是这样,问题攒了一堆不敢问,后来发现根本没必要。”
“你说得对。”林悦接口,“不过我得坦白一件事——我当年刚转产品岗的时候,有一个月天天在厕所隔间里哭,因为怕被看出我不懂。后来被孙姐撞见了,她递了包纸巾,说‘不懂的记下来问我’,就这一句话。”
吉彤想象了一下林悦——那个在需求会上拿着触控笔侃侃而谈的林悦——蹲在厕所隔间里哭的样子,觉得有些割裂,又莫名觉得真实。
“所以你看,”沈瑶晃了晃茶杯,“咱们都是一步一步过来的。你才两周,慢慢来。”
吉彤点了点头。茶水间的窗户没关严,傍晚的风从缝隙里钻进来,带着外面街道上晚高峰的喧嚣和一丝初夏的潮气。红豆汤的锅已经洗过晾在架子上,旁边的一瓶桂花蜜只剩了个底,不知道是谁写了一张新便签贴在上面:“这个喝完了,明天我带一瓶新的来。”
他走出公司大门的时候,天还没暗透。手机震了一下,是企业微信群里hR发的分享会照片合集,他站在白板前面,表情认真,身后投影幕上的光在他脸上铺了淡淡一层。
他看了几秒,把照片存了下来,然后走进了地铁站。