Nativescript手势-旋转奇怪的行为

我正在使用Nativescript Vue并尝试通过Nativescript手势旋转TextView标记中的文本。文本旋转，但它不是平滑的，它从一个方向跳到另一个方向。这就是我的问题

为什么会发生这种情况？NS手势旋转动作如此奇怪的原因是什么？如何让它工作

我将把我的示例发布在这里，也将发布在文章中

导出默认值{
数据（）{
返回{
文本旋转：0
};
},
方法：{
自动旋转（args）{
console.log(
“旋转角度：”+args.rotation+“状态：”+args.state
);
this.textRotation=Math.floor（args.rotation）；
}
}
};

事实上，你所看到的完全是意料之中的，你正在让它发生

假设您正在计算对象上的位置，同时移动对象，因此TextView上的旋转事件会根据手指的移动给出一次正确的位置，然后根据您在TextView上应用的新旋转值给出另一个位置

为了解决这个问题，您应该有2个对象副本（这里是TextView）。一个用来听手指的运动，另一个用来做动画，像这样的

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <StackLayout class="home-panel">
            <GridLayout>
                <TextView ref="animatedLbl" textWrap="true" :rotate="textRotation"
                    editable="false" visibility="hidden" verticalAlignment="top">
                    <FormattedString>
                        <Span text="Test text" fontSize="20" color="red" />
                    </FormattedString>
                </TextView>
                <TextView ref="hostLbl" @rotation="onRotation" textWrap="true"
                    editable="false" verticalAlignment="top">
                    <FormattedString>
                        <Span text="Test text" fontSize="20" color="red" />
                    </FormattedString>
                </TextView>
            </GridLayout>
        </StackLayout>
    </Page>
</template>

<script>
    import * as GestureModule from "tns-core-modules/ui/gestures";
    export default {
        data() {
            return {
                textRotation: 0
            };
        },
        methods: {
            onRotation(args) {
                if (args.state === GestureModule.GestureStateTypes.began) {
                    this.$refs.hostLbl.nativeView.visibility = "hidden";
                    this.$refs.animatedLbl.nativeView.visibility = "visible";
                }
                this.textRotation = Math.floor(args.rotation);
                if (
                    args.state === GestureModule.GestureStateTypes.cancelled ||
                    args.state === GestureModule.GestureStateTypes.ended
                ) {
                    this.$refs.hostLbl.nativeView.rotate = this.textRotation;
                    this.$refs.hostLbl.nativeView.visibility = "visible";
                    this.$refs.animatedLbl.nativeView.visibility = "hidden";
                }
            }
        }
    };
</script>