AxureRP8实战手册-案例15(动态面板:元件样式联动)

AxureRP8.0教程 小楼一夜听春语 13697℃ 0评论

 案例15. 动态面板:元件样式联动

案例来源:

京东-商品列表页

 

案例效果:

  • 初始及鼠标离开时:(图1-115)

1_115

  • 鼠标移入时:(图1-116)

1_116

案例描述:

鼠标进入“对比”/“关注”/“加入购物车”的按钮区域时,图标、文字与背景都呈现另一种样式。其中“关注”按钮中的图标在鼠标进入时,红色心形图标为向上滑动显示,鼠标离开时,向下滑动消失。

 

元件准备:

  • 页面中:(图1-117)

1_117

包含命名:

  • 图片(用于心形图标):HeartImage

 

思路分析:

  • 鼠标进入每个按钮区域,改变边框和文字颜色;“对比”按钮的图标也有改变颜色的效果;(操作步骤1)
  • 按钮上的文字靠右并距离边框有一定距离;(操作步骤2)
  • 鼠标移入图标或者矩形时都能呈现鼠标悬停的效果;(操作步骤3)
  • 鼠标进入“关注”按钮时,红心图标向上滑入效果;(操作步骤5)
  • 鼠标离开“关注”按钮时,红心图标向下滑出效果;(操作步骤6)

 

操作步骤:

1、每个按钮矩形的元件属性中设置【鼠标悬停】的交互样式;“对比”按钮中的图标单独设置【鼠标悬停】的交互样式;(图1-118)

1_118

2、设置每个按钮矩形的元件样式为文字【右侧对齐】,填充{R}为“4”;(图1-119)

1_119

3、矩形与图标同时显示鼠标悬停的效果,可以在动态面板的元件属性中勾选【允许触发鼠标交互】;(图1-120)

1_120

4、以上设置完毕后,鼠标移入按钮变换样式时,会发生边框互相遮挡的情况;解决办法是为每个动态面板【鼠标移入时】事件的用例都添加一个动作,这个动作为【置于顶层】,选择元件为“当前元件”。

  • 用例动作设置:(图1-121)

1_121

5、为“关注”按钮的动态面板的【鼠标移入时】事件添加“用例1”,设置动作为【显示】图片元件“HeartImage”,{动画}为【向上滑动】,动画的持续{时间}为“200”毫秒;

  • 用例动作设置:(图1-122)

1_122

6、为“关注”按钮的动态面板的【鼠标移出时】事件添加“用例1”,设置动作为【隐藏】图片元件“HeartImage”,{动画}为【向下滑动】,动画的持续{时间}为“200”毫秒;

  • 用例动作设置:(图1-123)

1_123

  • 事件交互设置:(图1-124)

1_124

 

特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例15(动态面板:元件样式联动)

喜欢 (21)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(20)个小伙伴在吐槽
  1. 搞动态面板太复杂了...
    泡泡2016-06-26 18:20 回复
  2. 用鼠标快速一直移入移出关注框有特效... 😮
    Yvan2016-07-28 21:02 回复
    • 小楼一夜听春语
      这是原型……
      小楼一夜听春语2016-07-28 23:52 回复
  3. 小楼老师,移入移出关注框的时候没有立刻出现效果,而是出现case1 case2的按钮,点击才能出现效果,怎么回事?
    Amber2016-08-03 20:27 回复
    • 小楼一夜听春语
      仔细对比一下 我写了几个case 你写了几个
      小楼一夜听春语2016-08-03 22:09 回复
      • case改了,没有滑动效果。。。是不是动态面板里设置不对?覆盖后隐藏那句话什么意思,怎么设置呢
        星缘2017-06-10 12:51 回复
        • 覆盖后隐藏,是说把红色爱心上移覆盖住上面的白心,然后点击右键设置隐藏红心,但我试了下,隐不隐藏是不影响整体效果的,但红心一定要放到与开始白心重合的地方。然后退出该页面直接到对应动态面板进行case设置就可以了
          jqseven2017-08-08 09:48 回复
    • 也遇到这个问题了,case那边没有问题,你解决了吗
      星缘2017-06-10 12:29 回复
  4. 小楼老师,你好! 这个案例做完之后,鼠标移入矩形和图片时,显示的效果是单独的。以“对比”一项为例,鼠标移入矩形后,矩形效果显示出来了,但对比的 图片效果没有显示。鼠标移入对比图片后,出现设置效果,但是矩形的边框和文字效果消失。看不出来哪里做错了,求解...
    大王等等我2016-09-21 16:34 回复
    • 我也遇到这这问题,希望小楼老师能解答一下
      木小鱼2017-06-02 14:39 回复
      • 第三步
        星缘2017-06-10 12:28 回复
      • 选中动态面板后,在元件属性中勾选“允许触发鼠标交互”即可
        旭日码头2017-06-21 14:26 回复
  5. 页面部件显示正常,但是鼠标移动到关注上时,白色爱心图标不见了,红色爱心图标没有显示,之后两个图标均没有显示,请问这是什么 原因呢?
    柠檬小小2016-11-07 10:18 回复
    • 红色爱心的隐藏不用做,会不会比较好,存粹个人观点
      菜花依旧2016-12-02 17:15 回复
    • 鼠标移入移出时的效果对动态面板的矩形的属性进行设置, 不是在动态面板的属性设置。 我也遇到过同样问题,不知道能不能解决你的问题。
      Irene2017-07-07 14:32 回复
  6. 然而边框没有重叠,是并排的。。。怎么做到相邻只有一条边框线的
    Ian2016-12-17 09:54 回复
    • 项目-项目设置-按形状边框的内边界对齐。
      creator2016-12-23 22:54 回复
  7. 京东里,关注的“白心”在隐藏和显示时,也有移动的效果。老师忽略了。
    greenfishyxl2017-11-02 14:45 回复
    • 小楼一夜听春语
      仔细看操作步骤5
      小楼一夜听春语2017-11-02 16:23 回复
      • 😛 居然得到了回复 而且这么快 😮 。。。白心也得要有下移上移用例。光移动红心不行
        greenfishyxl2017-11-02 16:26 回复