电子书APP翻页交互动效制作UI

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

教程内容:

添加一个翻页的素材,并制作拖拽动画,来呈现翻页的效果。

给文本内容添加不同的字号,制作拖拽动画可呈现字号放大缩小的效果

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


完整的效果需要制作6个画板

A78D804D-27A2-4E4A-9C35-CB72D875CDB8.png


1.制作书本放大效果


这个效果很简单,复制第1个画板将其他画板拖到画布外,放大并居中需要突出的书本素材

添加一个点击交互

E0FB88D1-25B8-45F5-B52A-EFB45B7F400D.png

2、3两个画板需要添加一个时间为0的对齐自动动画

这样在展示完书本后会自动跳到内容页

D9C79F7C-5018-4C19-9E83-789E9BE73C00.png

6739714D-B15D-4BB7-8F0A-FBFE5365EDEC.png


2.制作翻页效果


翻页效果是通过添加素材制作的,如图所示,在两个画板都添加上素材

并调整好角度和大小,第三个画板素材缩小并置于右上方

56A0F9B8-129F-4114-BD56-BEB47B443D30.png

第2个画板放大并垂直置于左侧

BFB7DDB7-8D42-4B2D-82C4-EE74A4266A01.png

2个画板间添加一下拖拽交互

35EE6100-9C38-4A89-8378-AC4E5D6E1737.png


3.制作字体拖拽变大的效果


需要准备两个画板,字体一大一小

并将第二个画板拖移的指示器放置到右侧

E90A7C89-CF56-455F-9295-E6D351ED5B2C.png

将指示器链接画板,添加拖拽交互

63D085CF-65E3-4FD7-A373-B24F4DBECEBF.png

制作完成

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

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