• 涨姿势!腾讯设计师夸上天的SVG 都有哪些酷炫的玩法? - 优设网 - UISDC

    涨姿势!腾讯设计师夸上天的SVG 都有哪些酷炫的玩法?

    2019/04/10 12230评论 5

    SVG概述

    随着浏览器对矢量图形的支持越来越好。在这两年的 web设计中,可以发现矢量图形即 SVG 应用的越来越广泛,使用 SVG 可以大大地提升视觉设计的表现力和设计体验。

    这篇文章就来讲讲 SVG 在 web设计中的一些应用场景,希望可以给大家带来一些灵感。

    SVG 意为可缩放矢量图形(Scalable Vector Graphics)。它是由万维网联盟(W3C)开发并进?#24418;?#25252;的。

    SVG 对于 Web 来说有着其它图片格式无可比拟的优势,尤其是现在,因为它不必考虑屏幕分辨率的问题。不论你新入手的智能手机的像素如何密集(分辨?#35270;?#22810;高),矢量始终显?#38236;?#22914;同刚下的雪一样清晰。

    时?#20004;?#26085;,无论是设计工具还是浏览器对 SVG 的支持越来越好,可以放心大胆地使用它来使设计更出彩。

    ?#28909;?#35774;计工具就有强大的 Sketch 和 Adobe Illustrator。

    浏览器几乎?#24425;?#19968;片绿的,?#27604;?#36825;里指的移动端。PC端的话,还是要注意下 IE。

    总结下 SVG 的一些优势:

    • 跟分辨率无关,完美显示,一图可以适配各种尺寸;
    • 强大的设计工具支持;
    • 方便交互,方便编写动效。

    ICON应用

    ICON 是 SVG 的一个典型应用场景,由于它是矢量图形的关系,所以不需要考虑像以前一样要切各?#30452;?#25968;的图来适配高清设备,直接一张图就可以搞定所有的设备。

    可以体验下下面这个 demo,只需要一个 SVG,无论多么变态的分辨率都可以完美地高清显示:

    1. icon换肤

    由于 SVG 是一种 XML格式来描述的矢量图形,?#28304;?#20102;很多的属性来定制它的表现。?#28909;?#22635;充颜色,使用 SVG 可以很方便改变图形的填充颜色,这对于一些需要换肤的场景就派上用场了。?#28909;?#19979;面这个demo:

    扫码体验:

    仅仅只需要改变一句代码,就可以随心所欲地改变icon的颜色。

    2. ICON Morphing动画

    所谓 Morphing 动画是表示,同一个模型,从一个形状变到另一个形状。这两年来,这种微动效在 web 应用的越来越多,特别是一些按钮的交互操作上,?#28909;?youtube 上播放器的按钮交互就使用了 morphing 动画:

    可以扫码来感受下这种微动画,使用在一些按钮的交互上,可以使交互更加细腻。而不是像以前那样硬生生的直接切换图片。

    具体怎么实现 morphing 动画,敬请期待后面的教程。

    SVG在文字中的应用

    在web世界中,文字占据了一个重要的位置。在之前,文字一般是通过不同的字体来提高它的表现力和美感。

    最近这两年随着 W3C标准不断地发展,通过 CSS 和 SVG 的一些属性,可以实现以前只能靠 Photoshop 等设计软件才能实现的效果。下面就来说说 SVG 在文字中的应用,?#27604;?#26377;些效果使用 CSS ?#26448;?#23454;现。

    1. 渐变文?#20013;?#26524;

    渐变文字,顾名?#23478;?#23601;是使用渐变的颜色来填充文字。以前这种文字的效果只能靠 photoshop 等设计工具来实现,限制大,不灵活。而使用 SVG 的话,则可以非常的灵活使用它,一句代码就可以搞定(现在使用CSS也可以使用这个效果)。

    简单?#24863;?#20195;码就可以搞定渐变文字的效果,文字可以自定义。

    扫码体验:

    这里不只是可以填充渐变,也可以使用图片来填充文字,来实现你想要的文?#20013;?#26524;。

    2. 动态文?#20013;?#26524;

    除了颜色的填充,还可以使用视频或者是 gif动图来填充文字,可以实现各种?#36828;?#22823;开的文?#20013;?#26524;。

    ?#28909;?#19979;面这个火焰在燃烧的文?#20013;?#26524;,就是使用 gif图来填充的。

    上面是 gif图填充的动态效果,同样可以使用视频来填充文字实现动态效果。扫码来体验下:

    SVG蒙版的应用

    蒙版,一直是各种设计工具中一个强大的功能,利用它可以实现各种特殊的图形效果。以前,要想在 web 中实现特殊的图形效果,只能靠设计师先设计好效果,然后切图利用图片在网?#25345;?#23454;现。

    而使用 SVG 中的蒙版属性则可以轻松实现各?#25351;?#26679;的特殊图形效果。?#28909;?#19979;面这样的图形效果:

    以前只能靠切图来实现,而现在也只需要?#24863;?#20195;码就可以实现。

    1. SVG镂空文?#20013;?#26524;

    同样蒙版也可以应用到文字中,来实现一些镂空透明的文字视觉效果:

    扫码体验:

    除了实现一些静态的特殊图片效果,使用蒙版配合其它的元素还可以实现一些动画效果。

    2. 蒙版动画效果

    利用SVG蒙版,我们可以制作下面这样类似霓虹灯的文字动画效果。

    扫码体验:

    还可?#36234;?#21512;视频实现特殊形状的动态效果:

    具体效果可以去这里体验:http://dspolitical.com/

    使用蒙版实现下面这样的聚光灯的动画效果,也非常简单:

    SVG动画应用

    动画?#24425;?SVG 的一个典型应用,特别是最近这两年,应用的特别多。下面就来看看 SVG 动画的一些应用。

    1. 描边动画

    描边动画是什么,看个图就知道了。

    看完图是不是感觉熟悉,这种使用 SVG 来实现的描边动画,这两年在 web 上大行其?#39304;?#38543;时随地都可以看见它的使用,以及变着各种法子来使用。

    ?#28909;?#24120;见的表单也可以使用描边动画来实现有趣的交互动画效果:

    这种描边动画使用SVG来实现成本极低,基本?#29616;?#38656;要设计师是导出矢量图形的 SVG 格式再加上几句代码就可以轻松实现。

    2. Morphing动画

    morphing 动画在上面 icon 那部分已经介绍过了,在 icon 上使用只是小试牛刀。它的用处远不止如此。?#28909;紓?/p>

    有了 SVG,实现这样的形变动画,都变得非常的轻松简单。剩下的就是你的想象力了。

    ?#28909;紓?#25105;想做?#36824;?#20844;司产?#20998;?#38388;的一个演变,就可以使用 SVG 来实现产?#20998;?#38388;的演变的动画,扫码体验下:

    借助SVG,可以充分发挥?#36828;矗?#26469;实现各种有意思的 morphing动画。

    3. 转场动画

    结合上面说的 morphing动画和描边动画,我们可以实现一些酷炫的转场动画,即不同页面之间的转场效果。

    或者是下面这种:

    体验地址:https://lmgonzalves.github.io/splash-transition/

    4. 滤镜动画

    说到 SVG动画,那 SVG滤镜动画是不得不提的了,使用 SVG 的滤镜,我们可以实现一些非常强大的动画效果。

    ?#28909;紓?#31867;似下图所示的 gooey效果,使用 SVG 滤镜就可以轻松实现:

    或者是这种炫酷的图片动效,使用 SVG 滤?#30331;?#36731;松松可以实现:

    这里?#24425;?#20030;了些常见的应用,只要发挥想象力,用好 SVG 滤镜,可以实现更多有趣的动画效果。

    总结

    随着浏览器对 web标准支持的越来越好,现在完全可以放心大胆的使用 SVG。本文总结一些 SVG典型的应用场景,?#28909;鏸con、文?#20013;?#26524;以及动画等应用。大家在进行视觉设计或者一些动画设计的时候,可?#36234;?#21512;具体项目的特点来应用 SVG,也可以翻翻本文,来找找灵感。

    欢迎关注「腾讯ISUX」的公众?#29275;?/p>

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/tencent-svg-play-set

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    版式设计 设计师 扁?#20132;?#35774;计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码