如何实现底部视图上滑时顶部视图的联动融合动画?
问题:底部上滑时顶部视图同步融合动画实现受阻
我需要实现这样的动画效果:用户从底部向上滑动时,顶部视图同步响应并与底部视图融合。尝试过BottomSheet、TopBottomSheet组件,也试过MotionLayout,但均未达到预期效果。
示例代码
topBehaviour = TopSheetBehavior.from(cl_pickup_drop); slidingLayoutInital = findViewById(R.id.slidingLayoutInital); behaviorInitial = BottomSheetBehavior.from(slidingLayoutInital); behaviorInitial.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { Log.d("SHUBHAMNEWS",newState+""); if (newState == BottomSheetBehavior.STATE_EXPANDED) { new Handler().post(new Runnable() { @Override public void run() { cl_pickup_drop.setVisibility(View.GONE); searchModeClicked = PlaceSearchListFragment.PlaceSearchMode.DROP.getOrdinal(); openPickupDropSearchUI(PlaceSearchListFragment.PlaceSearchMode.PICKUP_AND_DROP); behaviorInitial.setState(BottomSheetBehavior.STATE_COLLAPSED); cl_pickup_drop.setVisibility(View.VISIBLE); } }); } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) { slidingLayoutInital.animate().alpha(1f).setDuration(100); } } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { int[] locationOnScreen = new int[2]; bottomSheet.getLocationOnScreen(locationOnScreen); double newvalue = 1.0 - (slideOffset+0.2); Log.d( "SHUBHAM slideOffset", slideOffset+"--"+newvalue + "--"+cl_pickup_drop.getMeasuredHeight() ); if(slideOffset == 0.0){ //slidingLayoutInital.animate().alpha(1f).setDuration(100); vvCouponCode.animate().alpha(1f).setDuration(700); llSetWhereTo.animate().alpha(1f).setDuration(700); }else if(slideOffset==1){ relDestinationWhereTo.setBackground(getDrawable(R.drawable.bg_menu_item_color_black)); relSourceWhereTo.setBackground(getDrawable(R.drawable.bg_menu_item_color_f7_r)); }else{ vvCouponCode.animate().alpha((float) newvalue).setDuration(700); llSetWhereTo.animate().alpha((float) newvalue).setDuration(700); // slidingLayoutInital.animate().alpha(0.5f).setDuration(100); } new Handler().post(new Runnable() { @Override public void run() { //int mVal = cl_pickup_drop.getMeasuredHeight() - (locationOnScreen[1]); int mVal = cl_pickup_drop.getMeasuredHeight() - (locationOnScreen[1]); double calcualtePerce = (screenHeight / 100.0f) * 22; if(initialMyLocationBtn.getVisibility() == View.VISIBLE){ calcualtePerce = calcualtePerce + (screenHeight / 100.0f) * 4; } if(relativeLayoutPoolInfoBar.getVisibility() == View.VISIBLE){ calcualtePerce = calcualtePerce + (screenHeight / 100.0f) * 4; } double mValWithPlus = mVal + calcualtePerce; //Log.d("HomeBehaviour FINAL1",String.valueOf(cl_pickup_drop.getMeasuredHeight())); //Log.d("HomeBehaviour FINAL2",String.valueOf(locationOnScreen[1])); //Log.d("HomeBehaviour FINAL3",String.valueOf(mVal)); Log.d("HomeBehaviour FINAL+50",String.valueOf(mValWithPlus)); if(mValWithPlus > cl_pickup_drop.getMeasuredHeight()){ topBehaviour.setPeekHeight((int) cl_pickup_drop.getMeasuredHeight()); }else{ topBehaviour.setPeekHeight((int) mValWithPlus); } cl_pickup_drop.requestLayout(); bottomSheet.requestLayout(); // Code here will run in UI thread } }); } });
相关信息
- 已尝试使用第三方TopSheetBehavior组件
- 有演示视频展示预期动画效果
内容的提问来源于stack exchange,提问作者shubomb
相关产品推荐
相关产品推荐

