网站工程师证书,京东的网站建设历史,网站建设备案费用,wap蓝天建站动效设计1、两级吸顶CoordinatorLayoutAppBarLayout可以轻松的实现一级吸顶的功能#xff0c;两级吸顶并不支持。要实现两级吸顶#xff0c;可以有两种思考#xff1a;一#xff0c;在此基础之上再完成一次吸顶#xff1b;二#xff0c;直接重写两次吸顶的逻辑#xff0…动效设计1、两级吸顶CoordinatorLayoutAppBarLayout可以轻松的实现一级吸顶的功能两级吸顶并不支持。要实现两级吸顶可以有两种思考一在此基础之上再完成一次吸顶二直接重写两次吸顶的逻辑两次吸顶算法跟一次吸顶算法思路上应该是一致的。首页改版使用了第一种思路因为考虑到顶部搜索框特殊的过渡动画效果这块本身需要自定义即便使用控件自带的效果这块也要重写所以首先完成了顶部搜索框的自定义吸顶效果然后借力CoordinatorLayout控件实现了feed流头部的吸顶。这样整个两级吸顶效果就完成了顶部搜索栏吸顶通过自定义充分满足了动效后续扩展和修改会更自如而feed流头部使用父级控件自带的吸顶效果大大减轻了再次吸顶的逻辑重写。对于自定义顶部搜索栏吸顶的功能可以通过AppBarLayout的OnOffsetChangedListener接口监听完成。onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset)方法返回了appBarLayout的垂直偏移量通过这个变量基本能完成所有头部的动效。// 背景图滑动处理if (Math.abs(verticalOffset) mHeaderHeight) { mIvBackground.scrollTo(0, (int) (-verticalOffset / VELOCITY_OF_REFRESH_BACKGROUND)); // 搜索栏动效处理 int width mCityWidth - mSearcherBarLeftMargin; int height mHeaderHeight - statusBarHeight - mSearcherBarShadowHeight - mSearcherBarStickyHeight - mSearcherBarStickyTopMargin;; float rate ((float) width) / height; int rateScrollY (int) (rate * -verticalOffset); int scrollWidth rateScrollY width ? width : rateScrollY; float widthRate scrollWidth * 1.0f / width; if (rateScrollY width) { // 搜索框大小 RelativeLayout.LayoutParams searchParams (RelativeLayout.LayoutParams) mSearcherBar.getLayoutParams(); searchParams.leftMargin mSearcherBarLeftMargin scrollWidth; searchParams.height mSearcherBarHeight - (int)(diffHeight * widthRate); mSearcherBar.setLayoutParams(searchParams); ... }}2、头图动效设计图首页开发时头图下拉的参数设计文案动画区放置了下拉刷新的动画和文案下拉到这个区域即展示刷新动画和相应的文案。刷新触发区下拉到这个区域松手后会触发刷新事件下拉到文案动画区则不会触发刷新。二楼触发区下拉到这个区域松手后则触发负二楼的动效以及负二楼落地如果负二楼开关没有打开延续刷新的功能。此外下拉刷新的偏移和头图的偏移不是1:1是500:270的效果这样可以形成视差创造出空间层次感。补充负二楼的过渡效果偏移和下拉偏移是1:1的体现了跟随效果。头图下拉偏移通过SmartRefreshLayout的OnMultiPurposeListener接口监听操作。它提供了onHeaderMoving(RefreshHeader header, boolean isDragging, float percent, int offset, int headerHeight, int maxDragHeight)方法输出了RefreshHeader下拉的偏移量通过视差系数从而实现了头图的动效。// 下拉刷新时背景图的移动速率private final static float VELOCITY_OF_REFRESH_BACKGROUND 500.0f / 270.0f;FrameLayout.LayoutParams lpBg (FrameLayout.LayoutParams) mIvBackground.getLayoutParams();lpBg.topMargin mBackgroundTopMargin (int) (offset / VELOCITY_OF_REFRESH_BACKGROUND);mIvBackground.setLayoutParams(lpBg); 3、负二楼动效设计图研发实现后的负二楼主页效果图UI划分区块后的布局元素设计参考图动画页面渐隐落地页出现的一个过渡效果整个页面使用全屏设计对高度进行等比缩放处理以适应不同大小的屏幕设备。整体动画实现难度不大问题在落地页如何从动画页下面渐显我们知道逻辑上负二楼页面和首页是在一个层级实现落地页在动画页下面实现就是要实现落地页从首页下面出现。这个逻辑是行不通的即便可以改造落地页也不能实现Activity从下面出现的过渡效果。最终解决方案是负二楼动画页面用一个Activity实现启动负二楼动画页之前先启动落地页这两者几乎先后顺序几乎是保持同步的。然而同时启动两个ui界面势必会造成动画界面的播放卡顿尤其是启动承载内容繁多的落地页对上层动画页造成很大的影响。为解决这一问题采用了“遮掩”的背景效果即动画页背景和首页出现负二楼过渡效果图的背景是一致的且启动动画页后有短暂停留是为了把这一停留时间分配给落地页先行从而最大可能的减少卡顿时长。4、上下身和主体滑动冲突主体用ScrollView而下身用ListView或RecyclerView会存在滑动冲突问题这个我们都知道当然也有解决方案。但是新版首页的需求远不止这些它是外层集成下拉刷新和上拉加载功能、内部整体滚动两级吸顶、下半身横向滚动切换页面为一体的复杂构造我们不能单纯地通过传统的ScrollViewRecyclerView就可以解决。那么脱离传统父级向子级传递事件的思想Google提供了一套“材料设计”的思想来处理这种复杂的空间关系其中一个精髓就是将传统开发设计思想颠覆将子视图的滑动事件向父级传递通过父级的消费再告知其它子视图进行处理滑动整个材料形成了一起非线性联动的效果创造出空间层级感。父子级交互的两个通道是通过NestedScrollingParent和NestedScrollingChild两个接口协议通信的。我们通过CoordinatorLayout、AppBarLayout以及RecyclerView几乎完美地实现了这三者之间的冲突几乎但还是存在一些缺陷——AppBarLayout下滑RecyclerView同时上划会出现CoordinatorLayout消费子视图事件时的上下抖动问题。这个问题的主要原因是AppBarLayout滑动后的Fling效果未结束时又再次触发RecyclerView的触摸事件。找到了这个原因就能容易地解决最后的冲突问题了在触摸事件里拦截Fling让父级滚动在每次子视图被触摸时先停止掉就可以解决冲突问题。
