叶柳垂杨
叶柳垂杨
  • 发布:2023-10-30 10:50
  • 更新:2023-10-30 10:50
  • 阅读:187

【报Bug】安卓端使用BindingX实现动画,改变的translateY存在误差值

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

手机系统: Android

手机系统版本号: Android 13

手机厂商: 小米

手机机型: Redmi K60

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="mine-page">  
        <view class="swipper-wrap" ref="wrapRef" :style="{height:windowHeight+'px',width:windowWidth+'px'}">  
            <view id="videoWrap" class="items" ref="itemRef" @touchmove='touchmove'>  
                <view v-for="(i,k) in 5" :key='k' class="video" :style="{height:windowHeight+'px',width:windowWidth+'px',backgroundColor:i%2===0?'red':'blue'}">  
                    <text class="text-name">滑块{{i}}</text>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script setup lang="ts">  
import { reactive } from 'vue';  
import { ComponentInternalInstance, PropType } from 'vue';  

    const { proxy } = getCurrentInstance() as ComponentInternalInstance;  
    const BindingX = uni.requireNativePlugin('bindingx');  
    const wrapRef=ref();  
    const itemRef=ref();  
    const { windowHeight, windowWidth } = uni.getSystemInfoSync();  
    const dataInfo=reactive({  
        distance:0,  
        BindingXToken:0,  
        isInAnimation:false,  
        startDistance: 20,  
        backDistance: 200,  
        minTime: 300,  
        index: 0,  
    })  

        const touchmove=(event)=>{  
            if (dataInfo.isInAnimation) {  
                if (dataInfo.BindingXToken != 0) {  
                    BindingX.unbind({  
                        eventType: 'pan',  
                        token: dataInfo.BindingXToken,  
                    });  
                    dataInfo.BindingXToken = 0;  
                }  
                return;  
            }  
            let touch_origin = `y+${dataInfo.distance}<=0 &&  
                    y+${dataInfo.distance}-${windowHeight}>=${-windowHeight * 5}?   
                    y+${dataInfo.distance} : ${dataInfo.distance}`;  
            let anchor=wrapRef.value.ref;  
            let element=itemRef.value.ref;  
            let gesTokenObj = BindingX.bind({  
                anchor,  
                eventType:'pan',  
                props: [  
                    {element, property:'transform.translateY',expression: touch_origin},   
                ]  
            }, (e)=>{  
                if(e.state === 'end'){  
                    console.log('e======',e);  
                    if (Math.abs(e.deltaY) > dataInfo.startDistance) {  

                        console.log('记录Y的位置===',e.deltaY);  
                        const distance = dataInfo.distance + e.deltaY;  

                        if (  
                            distance > 0 ||  
                            dataInfo.distance + e.deltaY - windowHeight < -windowHeight * 5  
                        ) {  
                            return;  
                        }  

                        Math.abs(e.deltaY) > 0 && bindTiming(distance, e.deltaY);  
                    }  
                }  
            });  

            dataInfo.BindingXToken = gesTokenObj.token;  
        }  

        const bindTiming = (distance, Y) => {  
            BindingX.unbindAll();  
            dataInfo.isInAnimation = true;  
            let element=itemRef.value.ref;  
            let changed_Y, final_y, translate_y_origin;  

            final_y = dataInfo.distance + (Y > 0 ? 1 : -1) * windowHeight;  
            changed_Y = final_y - distance;  
            translate_y_origin = `easeOutExpo(t,${distance},${changed_Y},300)`;  

            let result = BindingX.bind(  
                {  
                    eventType: 'timing',  
                    exitExpression: 't>300',  
                    props: [  
                        { element, property: 'transform.translateY', expression: translate_y_origin }  
                    ],  
                },  
                async e => {  
                    if (e.state === 'end' || e.state === 'exit') {  
                        dataInfo.distance = final_y;  
                        dataInfo.isInAnimation = false;  
                    }  
                }  
            );  
        };  

</script>  

<style lang="scss" scoped>  
    .swipper-wrap{  
        overflow: hidden;  
    }  

    .video{  
        justify-content: center;  
        align-items: center;  
    }  

    .text-name{  
        font-size: 28px;  
        color: #ffffff;  
    }  
</style>

操作步骤:

新建一个nvue页面,复制示例代码进去即可复现

预期结果:

消除误差值

实际结果:

存在滑动误差值

bug描述:

使用bindingx实现全屏滑块动画时,发现动画改变的translateY值存在误差值,随着滑块数量的增多,误差值会一直累积,应该是计算精度的问题,希望官方修复一下

2023-10-30 10:50 负责人:无 分享
已邀请:

要回复问题请先登录注册