提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
最近项目前期工作完成,匀出来一点时间做了点东西跟大家分享
此次是一个scroll效果,所有动态变化都由scroll动作触发(背景图缩放;头像缩放;标题栏定位;title移动)。里面还实现了
导航栏和选项卡的毛玻璃效果
以上为整个交互动效的整体连线,大致标注了区块实现的功能
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,则图片尺寸要与屏幕尺寸一致,用透明区域和像素区域作为区分,带像素区域为显示范围。
今天就说这么多吧,也没做过这种分享没啥经验望各位看官谅解,另外这个动效中还有个效果但基本思路跟以上介绍大同小异就留给大家思考了...
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册