经典永不过时,由 GL 制作开发的本篇采用优美的描边动画将小鹏汽车的发展历程娓娓道来,仿佛一条时间线串联起品牌技术的发展。该结构也可在编辑器中使用「轨迹动画」和「渐现」等相关组件编排而成。
GL 出品的每篇文章都十分讲究标新立异,配合优秀的创意设计往往能将基础的组件焕然一新,本篇基于连续切换放大结构打造出一镜到底的视觉特效,辅以高斯模糊、镜头遮罩等方法使画面之间衔接连贯。虽是在不断重复同一操作,但每一次点击都能带来全新的体验。
同样为新品发布,开发者小杨交付至红米的此篇采用了多段伸长逐级显示信息,配合横版视差滑动,将精致做到了极致。最值得一提的是错层滑动结构的巧妙应用,CSS 结构打造 4 层错层效果,使用渐变蒙版让其过渡自然不生硬,信息游刃有余的穿梭其中,生动形象地展示了产品的关键卖点。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「等分容器滑动」、「置顶图片」等实现。
新品发布自然少不了高级炫酷的 SVG 交互来作加持,大疆此次发布运动相机 Action 2 采用了全自动动画加载,开屏图片快闪,切换流畅的序列帧动画,继而自动伸长伸展出产品介绍,产品恰时的淡入淡出增加了几分高级感,全文行云流水一气呵成,由 yutu studio 操刀开发。
本文是典型的二叉树逻辑测试题,由 GL 制作开发。通过严密嵌套的编组行为实现每一个选项都参与了最终结果的选择,在此模型的基础上,还可推衍出「伪无限选择器」,或是「多选项测试题」等模型,如生成专属测试题结果、剧本杀等。
翻牌游戏、限时点击的射击游戏、逻辑嵌套的找不同游戏等,开发者小杨为我们展示了游戏类 SVG 的更多创新玩法。为了追求更高精度的画面,利用序列帧动画替换 GIF 动画,保证画面清晰度的统一性,体现了开发者精益求精的态度。
鱿鱼游戏风靡全球,无疑是新媒体的一大热点,将其数字化的游戏也是层出不穷,且来看看 JZ 是如何打造指尖版鱿鱼游戏的。还原度最高也最出彩的莫过于第一关「一二三木头人」,计老师灵活地组合限时触发和双序列帧结构,守门人在时间的控制下自动旋转,参与者通过手动点击控制序列帧瞬发。
一镜到底技术由 JZ 的计老师首创开发,并发布于艺术家张赢系列画作《● 一 ● 镜 ● 到 ● 底 ●》。本次在 GQ 实验室中首次商业应用,配合位移、旋转等多组动画复合而成,更需要开发者对空间和时间的精准把控。