恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
QC分享--滑动交互
0.0°
2015-11-05 原创文章 教程 原作者: 原作者 举报 3824 20 17 3

最近项目前期工作完成,匀出来一点时间做了点东西跟大家分享

此次是一个scroll效果,所有动态变化都由scroll动作触发(背景图缩放;头像缩放;标题栏定位;title移动)。里面还实现了

导航栏和选项卡的毛玻璃效果

以上为整个交互动效的整体连线,大致标注了区块实现的功能

也不知道有多少小伙伴正在用或者尝试着用qc做效果呢,我姑且在这先“意淫”一下哈,分享几个效果的连线,有什么不对的地方希望大神们多多纠正...

1、页面下拉背景缩放

这里主要在于限定背景缩放对应下拉坐标的作用范围(它可不是傻傻的放大哦~)

progress+range则实现了scroll坐标在-805~-1340这个范围内持续输出0~1数值,然后用transition patch输出缩放值


2、标题栏定位问题

其实这是在长页面滚动中比较常见的效果(上滑标题栏固定于页面顶端),其实它同样可以用progress+range+transition的组合限定其跟随页面滑动的范围,但这里我介绍下另一个方法(javascript patch)

logic patch(也就是那个+号)只是用来调整运动的,说白了就是把标题栏放在一个合适的位置,至于javascript实现的效果,原理上跟上面的progress+range+transition限定是一样的


3、毛玻璃(blur)

这个效果在iOS7中出现,现在应用得相当广泛,事实上它可以直接跟程序沟通实现,但对于处女座的我来说高保真效果里怎么能有不完整的效果呢...

我喜欢用blur patch 因为它有clean edge选项,而qc里也有诸如gaussian blur、motion blur等模糊效果大家可以自己做尝试,要做到地步选项卡位置的模糊,那mask肯定就要登场了,qc中可使用外部图片或者内部图形patch(rectangle、rectangler、layer)。如果以外部图片作为mask,则图片尺寸要与屏幕尺寸一致,用透明区域和像素区域作为区分,带像素区域为显示范围。


今天就说这么多吧,也没做过这种分享没啥经验望各位看官谅解,另外这个动效中还有个效果但基本思路跟以上介绍大同小异就留给大家思考了...

更新:2015-11-05

收藏

20人已收藏

zero_w

我是谁!!!

  • 6

    作品

  • 74

    粉丝

  • 17

    关注

  • 浅谈常见可交互效果的实现与应用(QC)
  • 2016--新的开始
  • 滑滑弹弹的滑动
  • QC点击效果分享
相关标签
交互设计ueUX

    猜你喜欢

      2015-11-05 原创文章 教程 原作者: 原作者 举报 3824 20 17 3

      QC分享--滑动交互

      0.0°

      你确定要举报QC分享--滑动交互

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年11月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      17
      20
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录