滑动图片实现翻页动画 获赏10金币 案例教程 基础教程

suxiaobao 普通用户 2020-2-29 1125

这是在某东分类页面发现的小功能,在比较小的位置上实现多张翻页时跟随滑动时动画,抽空实现了分享出来


先来看效果

我们看到的区域里是3张图片一直左翻的样子,实际是四张图片,为了好看效果我用了红黄蓝绿四张图片

大多数图片的轮状一般是利用动态面板载入时设置动态面板状态实现轮转,也是比较容易实现。但是这个效果用多种状态轮状是实现不了的,现在看下我的实现步骤吧,每张图片在拖动后都有滑过去和没滑过去两种状态,所以要实现这个功能在拖动后要实现8种情形。这里我只说1张图片的设置。


1.首先放一个动态面板,双击后放入4张图片

2.拖动时增加滑动图1的情形,LVAR1是设置的局部变量元件图片1



3.增加向左拖动结束后的设定,有两种情形,一种是图片滑过去后,首先移动后面两张图片的位置并改变大小,然后最后一张图片向右滑动灯箱效果,隐藏图片1并设置顶层/底层的元件。另一种是图片没到指定位置,那就需要将图片全部弹回原位置了。这里我认为判断图片滑没滑过去是关键,这里我给每张图片设置了一个滑动距离的全局变量。



到这里第一张图片滑动后的动画就设定好了,然后后面还有3张需要设置,这不再多了,道理都一样。


结束~我想说这个比动态面板的轮转麻烦多了

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (10)
  • cuian 普通用户 7月前
    0 引用 11
    1
  • adfa采af 普通用户 11月前
    0 引用 10
    感谢分享
  • 哈迪斯00 普通用户 2020-4-30
    0 引用 9
    3q
  • gxlqs2249 普通用户 2020-4-26
    0 引用 8
    666
  • 单单 普通用户 2020-3-20
    0 引用 7
    谢谢
  • 程维维 普通用户 2020-3-12
    0 引用 6
    感谢分享
  • 沈十三 管理员 2020-3-11
    0 引用 5
    感谢分享,已获得10金币奖励!
  • 程维维 普通用户 2020-3-11
    0 引用 4
    感谢分享
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 3
    感谢分享
  • 长歌陌路 普通用户 2020-3-1
    0 引用 2
    感谢分享
返回
发新帖
AxureShop
axure商城