简单有趣的轮播交互动效!

教程内容:

使用圆角矩形制作蒙版,通过修改显示区域来制作轮播指示器


制作指示器


绘制三个10*10圆形制作默认状态

绘制一个等边10*10矩形,改变圆角制作成一个圆,填充蓝色,做为激活状态


复制一个蓝色矩形,做为蒙版,选中两个蓝色矩形点击制作蒙版。

为了更详细说明,我们蒙版矩形命名为蒙版,蓝色矩形命名为激活

将蓝色激活组覆盖到灰色圆上。


第1个画板

激活组:

蒙版:10*10

激活:29*10

9A157ACF-C931-49E0-B3A3-5A95410A9791.png

第2个画板:

蒙版:29*10

激活:10*10

27E863D2-DF30-4389-A808-FCFC8053C9E3.png

第3个画板:

复制第1个画板的参数即可

这样就实现了显示区域从小到大,但显示内容从大到小产生了反差


制作交互


分别链接画板

制作点击自动动画,渐入渐出0.8秒


制作切换的插图


三个画板使用的是同一个插图组

将三个插图依次平铺并绘制一个矩形框制作蒙版显示区域

将插图蒙版组放置到三个画板中

每个画板拖移显示不同的插画即可

制作完成

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




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