uni-app Bindingx动画会导致animation动画失效

uni-app Bindingx动画会导致animation动画失效

测试过的手机：

华为nova7pro
苹果xr

示例代码：

                   这是送出所创建的binding动画  
                     createGiftAnimation: function(seat, image) {  
            let gift = this.getEl(this.$refs.giftAnimation);  
            let y = this.giftTop - 50;  
            let gift_binding = Binding.bind({  
                eventType: 'timing',  
                exitExpression: 't>800',  
                props: [{  
                    element: gift,  
                    property: 'transform.translateY',  
                    expression: "easeOutQuint(t,0," + y + ",800)"  
                }, {  
                    element: gift,  
                    property: 'transform.scale',  
                    expression: "easeOutQuint(t,0.2,0.8,800)"  
                }, {  
                    element: gift,  
                    property: 'opacity',  
                    expression: "t>800?easeOutQuint(t,1,0-1,800):1"  
                }]  
            }, (res) => {  
                if (res.state === 'exit' && res.t < 2000) {  
                    Binding.unbind({  
                        token: gift_binding.token,  
                        eventType: 'timing'  
                    })  
                }  
            });  
        }  
                    这是我模拟uni-popup做的送礼物面板从底部弹出的动画  是因为uni-popup也会有这种问题 我才自己写一个试了试  
                   后来我发现是页面所有animation都会失效  
        open(){  
            animation.transition(this.$refs.box, {  
                styles: {  
                    transform: "translateY(0)"  
                },  
                duration: 0,  
            }, () => {  
                animation.transition(this.$refs.layer, {  
                    styles: {  
                        opacity: "1",  
                    },  
                    duration: 300,  
                })  
                animation.transition(this.$refs.main, {  
                    styles: {  
                        transform: "translateY(0)"  
                    },  
                    duration: 300,  
                })  
            })  
        },

操作步骤：

先用uni-popup弹出一个内容 或用animation改变一个元素的位置 随后对页面当中任意一个元素执行 Binding动画 都会导致animation失效

预期结果：

uni-popup弹出的窗口 不会因为页面执行了另外一个binding动画，而发生异常的改变

实际结果：

页面执行binding动画会导致uni-popup组件弹出层 异常改变 animation所改变过的元素也会随之复位

bug描述：

送礼物的面板是 uni-popup弹出来的 当送出礼物会执行Bindingx动画 当执行Bindingx动画的时候 所有popup弹窗的mask遮蔽层将会消失 弹窗的内容会往屏幕下方移动一段距离 mask-click关闭弹窗事件不可用
准确的说就是 当使用了animation动画 改变视图元素的位置过后 再用Bindingx对另外一个view执行动画 所有用animation动画改变过的原生的位置都会发生改变 uni-popup组件会失去mask遮蔽层往屏幕下方移动一段大约100px距离 其他用animation执行过动画的元素将会自动复原

图片

Image GIF


更多关于uni-app Bindingx动画会导致animation动画失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

安卓出现的情况为直接复原animation 苹果上面只是遮蔽层消失 内容网下移动100+px

更多关于uni-app Bindingx动画会导致animation动画失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 BindingX 动画时，确实可能会导致 CSS animation 动画失效。这是因为 BindingX 和 CSS animation 是两种不同的动画实现方式，它们可能会相互冲突或覆盖对方的效果。

原因分析

  1. BindingX：BindingX 是一种基于 JavaScript 的动画解决方案，通过直接操作 DOM 元素的样式属性来实现动画效果。它通常在 uni-app 中用于高性能的复杂动画场景。

  2. CSS Animation：CSS animation 是通过 CSS 样式表中的 [@keyframes](/user/keyframes) 规则来定义动画，浏览器会自动处理动画的执行。

当 BindingX 直接操作元素的样式属性时，可能会覆盖 CSS animation 所设置的样式，从而导致 CSS animation 失效。

解决方案

  1. 避免同时使用：如果可能，尽量避免在同一元素上同时使用 BindingX 和 CSS animation。选择其中一种方式来实现动画效果。

  2. 分离动画目标：如果必须同时使用两种动画方式，可以将它们应用在不同的元素上，避免直接冲突。

  3. 手动控制动画：通过 JavaScript 手动控制 CSS animation 的启动和停止，确保在 BindingX 动画执行时不触发 CSS animation。

  4. 使用 BindingX 替代 CSS animation：如果 BindingX 能够满足所有动画需求，可以完全使用 BindingX 来替代 CSS animation，以避免冲突。

示例代码

假设你有一个元素，你希望在某些情况下使用 BindingX 动画，而在其他情况下使用 CSS animation，你可以通过条件判断来控制动画的执行。

<template>
  <view class="box" :class="{ 'animate': useCSSAnimation }" [@click](/user/click)="startAnimation"></view>
</template>

<script>
export default {
  data() {
    return {
      useCSSAnimation: false
    };
  },
  methods: {
    startAnimation() {
      if (this.useCSSAnimation) {
        // 使用 CSS animation
        this.useCSSAnimation = true;
      } else {
        // 使用 BindingX 动画
        this.startBindingXAnimation();
      }
    },
    startBindingXAnimation() {
      // 这里编写 BindingX 动画的代码
      // 例如：
      const bindingx = uni.requireNativePlugin('bindingx');
      bindingx.bind({
        eventType: 'timing',
        exitExpression: 't>800',
        props: [
          {
            element: this.$refs.box,
            property: 'transform.translateX',
            expression: 'easeOutQuint(t,0,500,800)'
          }
        ]
      }, function(res) {
        console.log('BindingX animation finished');
      });
    }
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.animate {
  animation: move 2s infinite;
}

[@keyframes](/user/keyframes) move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
</style>
回到顶部