18868949445

黄山建站公司:10个大型代码变形SVGS示例

日期:2020-08-26 阅读:129   作者:黄山网站设计开发公司

黄山建站公司把一种形状变成另一种形状的能力使我着迷。我还记得我第一次看到它的动作。是迈克尔·杰克逊的“黑或白”录像回溯到1991年。在那里,各种各样的人在不断地相互转化。这一切都相当惊人,特别是考虑到当时可用的处理能力(或缺乏处理能力)的数量。

与网页设计有关的是,在Flash的鼎盛时期,变形获得了一些动力。该软件的推特功能使简单的变形效果相当容易。现在,这一传统继续以MorphSVGPlugin.

该插件与GSAP库一起工作,允许使用相对较少的代码在形状之间进行变形。它可以自动计算形状之间的过渡点,并产生一个令人难以置信的平滑动画。

为了看到MorphSVGPlugin的行动,我搜索了CodePen的档案,寻找最好的。但首先,一个公平的警告:效果有点迷人。坐下来欣赏表演(之后至少10分钟不要操作重型机械)!

简单形状

如果你真的想要一个展示MorphSVGPlugin工作原理的插图,这就是它。您将看到正在使用的各种形状,然后是最终结果。

快乐之旅

看看这个可爱的小表情符号Will…伊克斯…那是什么东西?惊奇的元素在这里是显而易见的,我喜欢背景随着人物的变化而变化。

就像飞蛾之于火焰

变形不仅对意外效果有用。它也可以帮助重建自然的效果,像这蜡烛的火焰。

摇摆灯

这个有趣的例子的拖光显示了一些微妙的变形技术。注意对象的透视图在上下移动时是如何变化的。

愿形态与你同在

“星球大战”似乎是一个完美的主题(和借口),可以和MorphSVGPlugin一起玩。在这里,我们看到流行的视觉和人物变形在这个非常光滑的生产。

实际用途

虽然看到变形的更多实验性用途是很有趣的,但这个例子展示了它的实用性。单击按钮会产生一个有用的微相互作用正好有一个变形图标。

环境影响

这里我们有一个有吸引力的卡片布局,使用变形图标来显示纸张收据对我们环境的影响。动画片有助于把重点推回原处。

潮人历史

够实用的了--这个很有趣。莎拉·德拉斯纳的“可互换的希普斯特”的特点是变形眼镜和胡须。很远!

进入荒野

乍一看,这个动画看起来并没有什么变化。但仔细一看,就会发现大量微妙、自然的动作。这是一个很好的提醒,变形不一定总是大和浮华。

响应性

最后,这里是一个变形动画,我们设计师可以联系。看着iMac变成笔记本电脑,然后是平板电脑,然后是…好吧,你知道了。

强变形

黄山建站公司上面的例子表明,变形效应在许多方面都是有用的。当然,他们可以是愚蠢和有趣的。但它们也可以作为一种微妙地吸引用户注意力的手段。不管你如何使用它们,它们都是展示你创造力的好方法。