推荐适合奥运会的SVG模版

宝藏模版

往期推荐（点击阅读）：

趣味效果｜高大上｜可爱风｜年终总结（一）｜年终总结（二）｜循环特效｜情人节（一）｜情人节（二）｜妇女节｜儿童节（一）｜儿童节（二）｜618｜父亲节｜丝滑动画｜端午节｜滑动妙用｜图片轮播｜又红又专｜中秋节（一）｜双十一｜世界杯｜圣诞节｜新年｜兔年春节｜元宵节｜愚人节｜杂志范儿｜520/521（一）｜五一旅游（一）｜五一旅游（二）｜母亲节｜多巴胺｜微博｜夏日氛围｜大唐国风｜反诈宣传｜七夕节｜CityWalk｜开学季｜揭露丑恶真相｜运动会（一）｜中秋节（二）｜十一｜万圣节｜冬季氛围｜新闻宣传｜春节红包｜龙年春节｜开工新品｜地球日

各位黑科技编辑器的会员，编辑器内的 SVG 组件你们都用过吗？本期我们聚焦竞技场，来聊聊适合体育赛事展示、传播的巧妙 SVG 模版应用思路！

倾斜跑道滑动（倾斜盒子）

这是一种模拟田径赛场倾斜跑道的排版特效，在业内有诸多精彩案例应用。包括 GQ 实验室《95后开始精神退休了》、E2平台《 欢 迎 来 到「 SVG 鬼 市 」 》、Coco《16周年｜1.6亿杯鲜！百！香！双！响！炮！ 》等，滑动下方画面体验局部：

可以参考下方教学视频，尝试基于「黑科技编辑器｜倾斜跑道滑动」组件实现。

还有更为进阶的「黑科技编辑器｜倾斜错层滑动（倾斜盒子）」，能实现前景与背景交错，人物从中穿梭的滑动特效：

巴黎奥运会是首届完全实现男女运动员参赛平等（名额 1:1）的奥运会，而局部气候调查组的《一份「女性」的奥运史》为中国网友进一步梳理了奥运会中男女平权的发展历程，巧妙的渐变着色效果令阅读体验心潮澎湃：

这种交互从技术层讲非常简单，仅需要「顶层滑动」与「纵向滑动」结合即可。重点在于设计师的制图功力——需要通过表层的大量镂空设计巧妙构思的它的着色过程。同类案例可参考包括 GQ 实验室《如何不露声色地要到crush微信号？》、小鹏汽车《黑色为什么会发光？》等。关于它的具体设计思路与排版布局，可观看 Ceep 老师特别录制的 SVG 专题视频课。

一颗球的场景穿越（错层滑动）

在 GQ 实验室公众号经典错层滑动作品《“滚！”》中，足球居于画面中央，随着手指的滑动在层层场景中穿越飞行：

可以通过 Ceep 老师的案例分析一起来了解它的排版布局方式。

一颗球的连续飞行（任意伸长+浮层）

前不久，我们发布了一期 SVG + AI 交互漫画图文《“好球！！！”》，向大家介绍了黑科技编辑器平台赞助某校园女足队并获得赛事亚军的故事：

其实，这是「浮层」组件的一种典型创作应用——当其紧跟任意伸长图文时就会产生伴随动画同步向下飞行的效果，参考尊美醇公众号图文《空瓶回收｜一起打造尊美醇圣诞树》的案例视频解析。

打靶伸长

首金一如既往诞生于射击项目中，而通过 SVG 交互用户也可以感受运动打靶的紧张感，正如百适通公众号《追逐冠军，快来参加百适通®金牌挑战》中的应用，尝试击中下方枪靶体验：

在黑科技编辑器的组件搜索功能内查找「打靶伸长」组件即可使用！应注意这里的运动枪靶属于局部元素，素材使用时应导出它本身，而非按照整体画板范围。具体的编辑器操作流程可参考《黑科技编辑器｜打靶伸长SVG教程》。

抛球伸长/落地弹跳伸长

如果你想进一步表现球类的运动特性，可以依托 SVG 模版「抛球伸长」作为开屏 SVG 动画，点击下方篮球体验：

还可以在黑科技编辑器中使用「落地弹跳伸长」模拟弹性球体的下落表现，点击下方篮球体验：

在黑科技编辑器的组件搜索功能内查找「抛球伸长」和「落地弹跳伸长」件即可使用！应注意这里的篮球属于局部元素，素材使用时应导出它本身，而非按照整体画板范围。具体的编辑器操作流程可参考《黑科技编辑器｜抛球伸长SVG教程》和《黑科技编辑器｜落地弹跳伸长SVG教程（更新）》。

除此以外我们还推荐阅读：

1）黑科技编辑器｜撞线伸长SVG教程

2）黑科技编辑器｜跳水伸长SVG教程
3）黑科技编辑器｜蹦床伸长SVG教程

它们都在一定程度上巧妙模拟了特定运动项目交互效果，均由黑科技编辑器原创设计提供正版技术支持。

视频播报条幅

根据设计素材样式，实现在视频内任意高度位置放置信息条幅，并在用户点击视频后开始同步滚动播放，适用于优化体育赛事新闻报道的视频设计。

在黑科技编辑器的组件搜索功能内查找「视频播报条幅」组件即可使用！建议基于 16:9 尺寸设计透明画面，以准确控制其视觉所在位置。

点击下拉信息框

点击初始画面，下拉出现新的信息框画面（如排名情况等）；停顿片刻后，信息框画面将自行收回消失。

在黑科技编辑器的组件搜索功能内查找「点击下拉信息框」组件即可使用！建议使用该组件时，素材尺寸保持一致。

宿命对决

展现体育赛事中对决的参赛者/团队信息，通过倾斜的相向位移突出两者的竞争关系。

在黑科技编辑器的组件搜索功能内查找「宿命对决」组件即可使用！其素材设计原则与排版方法应参考《黑科技编辑器｜宿命对决教程》中的具体要求。

黑科技编辑器秉持着让行业“人均 SVG”的生态理念，由多位黑科技排版设计的头部资深开发者共同打造，帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议，也欢迎通过客服向我们提出，编辑器将竭诚思考代码转化的可行性。