多色弥散渐变效果卡片自动动画交互制作

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

教程内容:

通过绘制多个图形填充不同的颜色,使用叠加模式达到弥散渐变的效果,并使用自动动画制作交互。

跟着下面的步骤一步一步制作吧!



1.制作素材


制作卡片信息元素制作好后先打组隐藏。

9BA4F02B-8F33-4E59-92E6-42967CF4B208.png

在矩形上绘制几个圆,这些圆需要有一些层叠

E074674D-13CB-498B-8F1F-62DB3E056782.png

修改一些圆的形状

24D3C399-26D5-44A8-B4E5-02AE8B92BB2A.png

如下图所示分别填充颜色

CF5B0FB4-68C5-44F5-94C8-8E8A53817E57.png

制作剪贴蒙版

7F9763F0-315E-4622-BD1E-26CF4B68BF0A.png

选中蒙版内的6个图形,使用对象模糊效果

5F8D4048-A057-4F76-AAE4-CEECCE63D49E.png

将叠加模式改为强光

6EF3C127-FFB8-4A57-8F79-89F8993CCD10.png

绘制一个小椭圆制作光斑,同样应用对象模糊和强光叠加效果

EC771644-DBF4-4684-9A75-76A17A52C4E4.png

再叠加一层噪点纹理,可使用插件Noisemaker制作

DA421BEA-5E60-46D2-BFAF-B670CEF2D2AA.png


*插件链接:https://ui.marklion.cn/article/7e5/13/article-40b05c5af6fe2c6a.shtml


2.制作交互


复制画板,调整一些元素的位置

E0665F02-4C68-4031-BE50-64B9E58DD5B0.png

链接两个画板,添加自动动画交互效果

B104F358-2BC3-4C51-9703-6263A9AD45F9.png

制作完成

点击前往查看→查看视频教程获取源文件

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作