Ionic 4 Capacitor 中带有原生插件动画的视觉错误

Question

我目前正在为 Capacitor 使用自定义 android 本机插件。该插件包含在应用程序的页脚中，除了隐藏动画外工作正常。

问题是每次页脚 shown/hide 时我都会更改 WebView 边距，这使得黑色（有时是橙色，可能是因为它是应用程序的主要颜色之一）栏出现在 space 被页脚占据。动画结束后黑条消失。

我试过在动画中更改 WebView 边距 start/end 结果是一样的。

在此先感谢大家，这是一些代码。

动画XML:

<translate
    android:duration="150"
    android:fromYDelta="0"
    android:toYDelta="100%" />

WebView 边距函数：

private void changeWebViewMargin(float pixels) {
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) wb.getLayoutParams();
    params.setMargins(0, 0, 0, (int) dpTopixel(getContext(), pixels));
    wb.setLayoutParams(params);
    wb.requestLayout();
}

隐藏函数：

@PluginMethod()
public void hide(PluginCall call) {
    Boolean animated = call.getBoolean("animated");

    if (animated == null) {
        animated = false;
    }

    final boolean finalAnimated = animated;

    this.getBridge().getActivity().runOnUiThread(new Runnable() {
        @Override
        public void run() {
            if (finalAnimated && footer.getVisibility() == View.VISIBLE) {
                changeWebViewMargin(0f);
                Animation myAnim = AnimationUtils.loadAnimation(getBridge().getContext(), R.anim.hide_footer);
                myAnim.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        footer_img.setVisibility(View.INVISIBLE);
                        footer.setVisibility(View.INVISIBLE);
                        btn3.setVisibility(View.INVISIBLE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }
                });
                footer.startAnimation(myAnim);
                footer_img.startAnimation(myAnim);
                btn3.startAnimation(myAnim);
            } else {
                footer_img.setVisibility(View.INVISIBLE);
                footer.setVisibility(View.INVISIBLE);
                btn3.setVisibility(View.INVISIBLE);
                changeWebViewMargin(0f);
            }
        }
    });
}

Answer 1

尝试使用 WindowInsets:

而不是使用边距

ViewCompat.setOnApplyWindowInsetsListener(wb, (v, insets) -> {
    ((ViewGroup.MarginLayoutParams) v.getLayoutParams()).bottomMargin = 
                 insets.getSystemWindowInsetTop() + (int) dpTopixel(getContext(), pixels);
    return insets.consumeSystemWindowInsets();
});

Ionic 4 Capacitor 中带有原生插件动画的视觉错误

Visual bug with native plugin animation in Ionic 4 Capacitor

java

android

ionic-framework

capacitor