制作网页3d转动效果UI动效交互UX

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

教程内容:

将素材通过制作蒙版并拖动素材来呈现饮料容器转动的3D效果

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

制作素材


首先需要准备一个易拉罐素材和贴纸素材

用钢笔工具绘制一个易拉罐瓶身的蒙版图形

D79B3923-0820-46C0-BDFB-EE0EA47F3287.png

贴纸素材份两层一层是PNG格式的图案可以前后衔接的

一层就是纯色图形

72DC1B94-B146-4E29-90D4-CCA74DB8317E.png

另外需要制作好三屏段式的UI,将其全部打组

50FF5F2E-9011-4B81-B62B-F881344C1FDD.png


制作交互


制作第1个画板,使用第1瓶,并放置上易拉罐图形

B61C88A9-F683-487B-BECE-53645F5D0725.png


第2个画板将易拉罐排列角度调整一下

59807FB5-7DEA-456C-878C-5540CD4FA5E9.png

调整一下第1个画板的贴纸坐标,这样交互到第2个画板时会因为贴纸的移动产生旋转的感觉

5E46BB6F-53C9-4B14-A818-67745362AFC9.png

第1、2两个画板添加一下自动对齐的交互

1A64B2D3-5ADF-43D7-BE08-FAF9CF7E6431.png

第3、4个画板同样的做法,调整一下展示的易拉罐模型,并调整一下贴纸

C13BB046-F0EF-4493-9E12-2C6B199267F5.png

23E5ABF1-2ECC-4F35-8BC8-597BD2D6CE0D.png

总共需添加4个画板,重点在于利用贴纸的位置制作一下相对运动,产生易拉罐在旋转的视觉效果。

EEC7415A-A05B-4D33-9533-0B582489CF00.png

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

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