You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现底部视图上滑时顶部视图的联动融合动画?

问题:底部上滑时顶部视图同步融合动画实现受阻

我需要实现这样的动画效果:用户从底部向上滑动时,顶部视图同步响应并与底部视图融合。尝试过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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.22 09:57:19