Axure教程—图片手风琴效果

本文将教大家如何用AXURE制作图片手风琴效果
一、效果介绍
如图:
Axure教程—图片手风琴效果_第1张图片

预览地址:https://6nvnfm.axshare.com

下载地址:https://download.csdn.net/download/weixin_43516258/87847313?spm=1001.2014.3001.5501
二、功能介绍

  • 图片自动播放为手风琴效果

  • 鼠标移入时图片为手风琴效果

三、制作方法
(1)图片制作
拖入一个动态面板命名为1,其面板放置五张图片,分别命名为:1、2、3、4、5,其大小为600×300,放置规则为x坐标递增80(如:第一张图片坐标为(0、0),第二张图片坐标为(80、0)),如图:
Axure教程—图片手风琴效果_第2张图片
(2)图片状态面板
拖入一个动态面板命名为2,其设置5个状态,放置在图片下方,如图:
Axure教程—图片手风琴效果_第3张图片
制作完成,接下来要完成交互设置

四、交互设置

(1)每张图片的交互设置

  • 图片1
    对图片1进行鼠标移动时、鼠标移入时和鼠标移出时设置,如图:
    Axure教程—图片手风琴效果_第4张图片

  • 图片2
    对图片2进行鼠标移动时、鼠标移入时和鼠标移出时设置,如图:
    Axure教程—图片手风琴效果_第5张图片

  • 图片3
    对图片3进行鼠标移动时、鼠标移入时和鼠标移出时设置,如图:
    Axure教程—图片手风琴效果_第6张图片

  • 图片4
    对图片4进行鼠标移动时、鼠标移入时和鼠标移出时设置,如图:
    Axure教程—图片手风琴效果_第7张图片

  • 图片5
    对图片5进行鼠标移动时、鼠标移入时和鼠标移出时设置,如图:
    Axure教程—图片手风琴效果_第8张图片
    (2)动态面板2设置
    对动态面板2进行状态改变时设置,如图:
    Axure教程—图片手风琴效果_第9张图片图片手风琴效果制作完成了。

你可能感兴趣的:(Axure高保真原型设计,Axure,Axure原型设计,axure,axure动态面板,axure教程,Axure图片手风琴效果,Axure图片效果)