导航菜单

AxureRP8教程:淘宝轮播图自动滚动效果

2019每个人都是产品经理

作为产品经理必不可少的工具之一,Axure相信每个人都已使用它。本文将带您实现淘宝轮播效果的产生和效果。

效果如下:

产品人员的思想是最重要的,因此在开始之前,我们应该先考虑好想法。让我们首先列出淘宝的轮播需要实现的效果:

图片向左滑动,间隔为4s,滑动动画为500ms;在较低的焦点上,单击以切换到相应的图片;左右切换按钮时,鼠标进入轮播显示,按钮上的颜色加深。

好的,已经列出了基本效果,下一步是开始制作。我们可以逐步执行,首先执行一个步骤,然后执行下一步以避免混乱。

一,实现图像旋转和自动滚动效果

动态面板是axure中非常重要的原件。许多效果是通过动态面板实现的。今天,我们的旋转木马还使用动态面板。

首先准备材料。首先从淘宝复制轮播图片,右键单击该轮播,然后单击复制图片。

打开axure,立即粘贴图像,然后将图像转换为动态面板。

现在,我们可以看到右下角的图片已转换为动态面板,我们单击复制状态,复制3次,然后复制并粘贴剩余的淘宝转盘。

现在我们可以看到图像已经在那里,基本结构已经在那里,下一步是实现效果。

实施自动轮播效果。我们单击动态面板以设置加载时的自动切换,间隔为4000毫秒,动画向左滑动,动画持续时间为500毫秒。

好的,第一步已经完成,可以达到效果,然后再看第二步。

第二,实现以下对焦效果

先成为好风格。拖出几个圆圈以设置大小为11 * 11,背景为白色,间隔为10px。设置选项组名称“ Carousel Focus”,并在选择时设置颜色FF5000。名称分别设置为“ Focus-1”,“ Focus-2”,“ Focus-3”和“ Focus-4”。

在下面设置一个矩形,尺寸80 * 19,白色背景不透明度为30%。

好的,样式已经完成,下一步就是效果。

对图像选择施加相应的焦点。单击动态面板以设置状态更改事件。记住要设置条件判断。每次动态面板是第一页时,选择“ Focus-1”(焦点-1),其他都相同。

现在,我们已经实现了轮播滚动来自动点亮焦点。

实现点击焦点切换轮播。我们单击“ Focus-1”来设置单击事件,然后单击以切换到动态面板的第一页。效果是逐渐的,时间是500ms。

设置后,继续向左滚动(与加载事件相同)。

我们的重点已经完成。

三,左右按钮效果

首先实现基本样式,首先在轮播的左侧和右侧制作两种样式,不透明度为30%,设置交互事件,选中时不透明度为50%。

隐藏两个组件,将鼠标设置为移动到选定的组件,然后将鼠标移出以取消选择。

鼠标移入和移出可显示隐藏的左右按钮效果。将这两个组件与动态面板和下面的焦点进行组合,将鼠标设置为进入合并的事件,显示两个组件,并在鼠标移出组合时隐藏两个组件。

现在已经实现了许多效果,您可以通过单击开关转盘来实现。

单击以切换轮播地图,设置左击事件,将轮播切换到上一个,将动画向右滑动,然后设置为继续滚动(与load事件相同)。

类似地,右键单击事件相同,轮播映射切换到下一个,动画效果向左滑动,然后设置为继续滚动(与load事件相同)。

好的,这已经完成了,您可以按f5预览。

本文最初由