3D变化功能制作空间旋转交互动效UI设计UX

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

教程内容:

通过对不同组的元素分别使用3D效果,制作自动动画来实现交互效果。

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


1.制作第1个画板


绘制3个大小不同的虚线圆,均开启3D功能

9CAD94AD-70EC-4D50-A4A9-009C54224A7E.png

调整一下三个圆坐标轴的角度,如下图

939035F1-16CD-4CD5-9AF1-5A61610BA0DA.png

放置上头像和装饰素材,将所有元素同虚线圆打组制作蒙版组

AD7DA366-5E07-4CF6-8B79-1F5FA10C0DA9.png


2.制作第2个画板


复制第1个画板,对蒙版组内的元素分别调整3D变换的角度

459B0874-F27A-4EE1-B14D-9792812E7545.png


3.制作第3个画板


复制第2个画板,同样调整下元素的3D变换角度

E508057C-DEDF-49C9-BCE3-D107BE3EE649.png

调整好后如下图,每个画板视觉焦点的头像要有不同。

A9532838-25EF-4A8D-ADC5-90F36736F116.png


4.制作交互


链接3个画板制作循环,统一添加自动动画

15C271C8-17AA-4586-9B40-E39B7E9A71B5.png

制作完成

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

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