UI 设计师 SVG 动画高级篇--遮罩动画(上)
蒙版对于UI设计师来说,太熟悉不过了,当然了,可能PS里面用的多一些,AI里面用的少一些,SVG同样支持蒙版,而且借助蒙版,能完成很多神奇的效果。我喜欢称蒙版动画为一种魔术,这是真正的“障眼法”,它只让你看到想要看到的部分。
前面SVG的动画效果里,有两次用过了蒙版,一个是在路径动画中(juejin.cn/post/684490… 这篇文章的结尾),利用蒙版的路径描边动画,逐渐画出白色的螺旋线,从而动态显示底部的小豆豆组成的路径,达到飞机撒播小豆的效果。
还有一次是在路径变形动画中(juejin.cn/post/684490… 第9部分的内容),利用蒙版的路径变形动画来实现镂空图形的变形动画。这还只是蒙版动画的冰山一角,下面会介绍几个有代表性的应用,掌握了蒙版动画之后,嗯,你会打开一扇全新的门。
1.SVG蒙版基本语法
先简单说一下SVG蒙版的基本语法,给没有SVG基础的UI设计师入入门。
<mask id="shade"><circle cx="50" cy="50" r="30" /></mask>
<rect mask="url(#shade)"/>
表示我定义了一个半径30的圆形蒙版shade,矩形使用这个shade蒙版。蒙版如果里面不定义任何形状,则默认为全黑蒙版,也就是说,使用蒙版的形状完全被遮罩了,蒙版里定义的任何形状都是在这个黑色画布上进行绘制的。至于使用过程中,那自然是各种变化多多,下面由浅入深,慢慢来讲。
2.静态SVG蒙版
这个严格来说不是蒙版动画,而是蒙版下的动画,还记得冯老板的新电影《我不是潘金莲》里面独特的表现手法吧,所有画面集中于一个圆形的视窗里,那用蒙版来实现的话,就是黑色底上放一个白色的圆形。下面就来模拟一下这种效果。这是我做的一个水波纹的动态效果
(实现方法可以参考以前发过的路径变形动画)。
一开始说过默认的蒙版是全黑的,这样我们只需要加白色一个圆形就可以实现圆形的视窗了。
简化代码及注释如下:
<svg>
<style>
@keyframes deform1{0% {d:path('');} 100%{d:path('');}}/*第一个路径变形动画*/
@keyframes deform1{0% {d:path('');} 100%{d:path('');}}/*第二个路径变形动画*/
#animate1 {animation: deform1 2s alternate infinite ;fill:#71CFD1;opacity:0.5}/*设定透明度*/
#animate2 {animation: deform2 2s alternate infinite;fill:#71CFD1;opacity:0.3}
</style>
<mask id="shade"><circle fill="#ffffff" cx=" " cy=" " r="200"/></mask><!--定义蒙版-->
<g mask="url(#shade)"><!--把变形动画放到一个组里,再调用蒙版-->
<path id="animate1" />
<path id="animate2"/>
</g>
看一下效果:
圆形视窗实现了,但似乎少了些什么,不错,就是黑色的背景,这里有两种添加方法,可以在AI里面绘制一个中间为镂空的圆形的黑色矩形,镂空圆形部分与蒙版里的白色圆形重合,但还有一个偷懒的好方法,就是不用蒙版(搞什么?!)。直接把这个镂空的黑色矩形,放到变形动画上面就好了。这样路径部分代码简化如下:
<path id="animate1" />
<path id="animate2"/>
<path d=""/> <!--黑色镂空矩形对应的路径-->
注意一下路径叠加的顺序,从上到下对应AI里的图层顺序从下到上。也就是浏览器先渲染排序在前的路径图形,然后层层叠加。
效果棒棒哒
当然了,蒙版的方法还是要掌握的,因为这是唯一一个特例嘛。而且缺点显而易见,你的矩形不能任意控制大小,只能大于被遮住的动画的区域。
如果说这种简单的圆形无法体现蒙版的优势,那下面这种会展现的更为充分。
简单说一下杯子和蒙版的关系
来看代码部分:
<mask id="shade"><path fill="#FFFFFF" d=" "/></mask>
<g mask="url(#shade)">
<path id="animate1"/>
<path id="animate2"/>
</g>
<g>
…此处省略若干杯子形状的代码…
</g>
其实大多数工作AI会帮我们很好的完成,我们要做的不过是定义动画和摆好各个图形的关系而已。这种给容器里加水的动效,如果不借助,那么做变形动画的时候还要精确计算边缘,而利用蒙版,不但动态底图绘制时无所畏忌,还可以实现多个不同容器同时加水的动画,只要蒙版上多绘制几个白色的容器形状就可以了。来点小小的改动,发挥一下SVG的优势,来个大杂烩,咖啡,红酒,橙汁,我们只要改变定义的变形动画的填充色,嗯,就这么简单。
3.文字蒙版
蒙版的强大,不仅仅在于支持图形,同样还支持文字,通过文字蒙版,还可以轻松实现填充变换的文字。比如我做了一个渐变的动态背景,这个用CSS3实现比用SVG更容易,不过我懒,就直接用SVG实现了,而且用的是最不靠谱的方法,动态背景实现方法很多,我是让一个很大的渐变背景位移实现的,没用过SVG渐变填充的可以看一下,就是下面这种方法:
<svg width="800" height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0px) translateY(0px)}
100% {transform: translateX(-3000px) translateY(-2000px)}}
rect{animation:animate 4s alternate infinite}
</style>
<defs>
<linearGradient id="dream" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="#345ca5" />
<stop offset="20%" stop-color="#6134a5" />
<stop offset="40%" stop-color="#3479a5"/>
<stop offset="60%" stop-color="#2b008b"/>
<stop offset="80%" stop-color="#3DC4D0"/>
<stop offset="100%" stop-color="#5c2392"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)" />
</svg>
先定义一个倾斜线性渐变dream,一共6个停靠点,然后画一个超大的矩形来使用这个渐变,并做位移动效,但由于尺寸是写死的,所以你只能看到800*600的区域,从而实现了动态渐变效果。
那这个动态渐变如何赋给文本呢?简单,我只需要像如下定义一下文字蒙版就可以了
<mask id="shade"><text>生如夏花</text></mask><!--文本的位置大小字体填充色单独定义-->
<g mask="url(#shade)">
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)"/>
</g>
我这里并没有让动态渐变的矩形去直接调用文字蒙版,而是外面单独又套了一个<g>
标签,是因为我动态渐变的实现方式不好嘛,是移动实现的,如果蒙版直接给这个矩形,意味着蒙版就跟着一起跑啦。
这种效果还有一个实现方法是可以把文字转成路径再导出,但若论起易用性,自然文字蒙版更好一些,因为文本可以随心所欲的修改。如果你喜欢,你还可以把这种效果赋给描边,不过这次描边是白色,填充时黑色,会得到像下面这种:
4.带透明度的蒙版
见识过文字蒙版之后,说一下带透明度的蒙版,SVG的蒙版真真是和作图工具中的蒙版一模一样,依然支持透明度,渐变,怎么都行,因为我没想到太好的案例,所以还是拿我们上面的案例下刀吧。
我给文字蒙版的上面再加一个蒙版,蒙版添加方式如下:
代码如下:
<mask id="shade"> <text x="" y="" >生如夏花</text></mask>
<mask id="shade2"><!--由灰色矩形和白色矩形组成的蒙版-->
<rect fill="#969696" x="0" y="0" width="800" height="150"></rect>
<rect fill="#ffffff" x="0" y="150" width="800" height="300"></rect>
</mask>
<g mask="url(#shade2)"> <!--新加蒙版-->
<g mask="url(#shade)">
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)" id="aaa"/><!--由于新加蒙版使用了矩形,所以这里要给矩形背景一个id,并修改CSS样式。-->
</g>
</g>
那效果是怎样呢?
新加的蒙版产生了水晶效果。
渐变的效果来看一下
虽然不及上面那个效果明显,但还是可以看出来蒙版发挥的作用。
5.动态蒙版位移动画
以上都是静态蒙版的应用,其作用就是重新生成一个视窗。下面,要开始动态蒙版的介绍了,等真正会用动态蒙版之后,SVG动画简直可以发挥想象不到的强大。动态蒙版说白了和普通形状的动效是一样的,无非以蒙版效果展现而已,依旧从最简单的入手,来一个日食的效果。
动画思路理一下
这个用蒙版似乎很简单。当一个白色底色上黑色圆形组成的蒙版从左到右水平位移时,自然就会遮挡住太阳
代码如下:
<svg width="800" height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0)}
100% {transform: translateX(390px)}
}
#dog{animation:animate 4s ease 2s}
</style>
<mask id="shade"> <rect x="0" y="0" width="800" height="600" fill="#FFFFFF"/><circle cx="205" cy="200" r="95" fill="#000000" id="dog"/></mask>
<circle cx="400" cy="200" r="100" fill="#ff7f00" mask="url(#shade)" />
</svg>
产生的动画效果是下面这种
可是我还想用黑色的部分来表示被侵吞的太阳,怎么办呢?再加一个黑色圆形同步位移肯定是不行的,会露出来。灵机一动,没错,我们可以让太阳所在的圆形区域作为静态蒙版的白色部分,加在同步位移的黑色圆形上。然后再加上一个随着太阳被侵吞的变化背景,代码如下:
<svg width="800" height="600" >
<style>
@keyframes animate1{ /*定义变化的背景色*/
0% {fill:#c0f1ff;}
50% {fill:#1d3074;}
100% {fill:#c0f1ff;}
}
rect{animation:animate1 4s;fill:#c0f1ff;}
@keyframes animate2{
0% {transform: translateX(0)}
100% {transform: translateX(390px)}
}
#dog{animation:animate2 4s}
</style>
<rect width="800" height="600" /> <!--先绘制最下层的天空-->
<circle cx="400" cy="200" r="100" fill="#ff7f00" /><!--其次是完整的太阳-->
<mask id="shade"><circle cx="400" cy="200" r="100" fill="#FFFFFF" /></mask>
<g mask="url(#shade)">
<circle cx="205" cy="200" r="95" fill="#000000" fill-opacity="0.7" id="dog" />
</g>
</svg>
效果如下:
机智的你一定会发现,咦,这不是用不着动态蒙版了嘛,没有关系,万一其他地方用得上呢,比如想做个月圆月缺对吧。
写到这里,感觉又啰里啰嗦说了太多,所以还有一部分还是放到下篇吧。
推荐阅读
-
UI 设计师 SVG 动画高级篇--路径变形动画(上一章)
-
零基础初学者制作 SVG 路径动画对 UI 设计师的益处
-
UI 设计师福利,svg 笔触动画效果,零代码基础手把手教你完成!
-
UI 设计师 SVG 动画进阶篇--遮罩动画(下)
-
UI 设计师 SVG 动画高级篇--遮罩动画(上)
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明: