查看: 29|回复: 0

[使用教程] 如何用摹客RP制作鼠标hover后图片列表的放大效果

[复制链接]

221

主题

329

帖子

2818

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2818
发表于 2022-4-27 10:32:56 | 显示全部楼层 |阅读模式
产品经理入门到精通

图片列表是产品经理常用的展示方式,今天就和大家分享一下,在摹客RP里如何制作一个鼠标hover到图片上能够查看大图的图片列表。
先看看效果:
鼠标hover到图片上时,图片有一个放大的效果,鼠标离开图片后,图片恢复原来的尺寸。





上图是知乎文章详情页面下的“推荐阅读”,用的就是这种效果,下面我就以这个来说说怎么做的交互。


01 准备工作
需要准备的组件:图片组件
本地图片:4张
02  交互制作
1)设置好尺寸,选中图片,拖动图片组件右上角的链接点给自己做一个交互。






2)设置交互



  • 触发:鼠标进入
  • 目标:自己
  • 命令:调整尺寸(扩展点选择中间的点)
  • 宽度和高度:设置为所需要的尺寸
  • 缓动:线性(按需设置)
  • 时长:200 ms(按需设置)
  • 延时:0 ms(按需设置)

鼠标移动的交互设置完成。
按上面的步骤图片和自己再做一个鼠标离开的交互:



  • 触发:鼠标离开
  • 目标:自己
  • 命令:调整尺寸(扩展点选择中间的点)
  • 宽度和高度:设置为原尺寸或所需尺寸
  • 缓动:线性(按需设置)
  • 时长:200 ms(按需设置)
  • 延时:0 ms(按需设置)

整个交互完成。
要达到知乎“推荐阅读”的效果,你只需要把这个图片组件复制三份,分别导入图片就可以了。




实际的效果可以参考知乎的“推荐阅读”板块,也可以参考UI中国的首页图片列表效果。

觉得是不是很简单呢。

03)举一反三
点击任一图片,再弹出图片。
交互:图片和辅助画板做一个弹出的交互,再做一个点击图片隐藏的交互,如下图。










你学会了吗?需要什么交互也可以给我留言。

更多交互教程,待续中。。。

您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2022-5-24 05:38

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表