好的SVG交互图文,一定是交互和设计的巧妙结合。有时候不知道图片怎么做的,你也就制作不出同款效果。
比如APPLE《换 IPHONE 12 的理由,一个个展开说。》这篇,点击下拉的效果是如何与切分的素材结合的?
比如宝马中国《马上有礼》这篇,开头的双层前景左滑效果,左滑图片,你会看到一只老虎驾驶着汽车向前疾驰,很是有趣,这个素材是怎么做的?
再比如GQ实验室《JDM又是什么流行的缩写梗啊?》这篇,使用了点击弹出图片的效果,但首先吸引眼球的还是刚打开时的一段动画,这段动画色彩丰富但依然清晰流畅,是怎么做到的?
想要弄清上面的问题,最简单直接的方法就是下载原文的素材看一看。
还有一个一举两得的方法,那就是去「品牌时光机」SVG案例库搜一搜,如果恰好这个案例支持一键还原,你不仅能看到素材长啥样,还能知道使用了什么组件的交互效果。
目前APPLE、宝马中国、GQ实验室等品牌都有部分案例支持一键还原啦,整个案例库支持一键还原的案例总数达6000多,陆续会有更多品牌和案例加入进来。