Nativescript Gesture - странное поведение вращения

Я использую Nativescript Vue и пытаюсь повернуть текст в теге TextView с помощью Nativescript-Gesture Ротация. Текст вращается, но не плавно, он перескакивает с одного направления на другое. И это мой вопрос

Почему это происходит? В чем причина того, что NS-Gesture Rotation ведет себя так странно? И как заставить его работать?

Я опубликую свой пример здесь и на NS Playground. слишком.

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
            <StackLayout class="home-panel">
                <TextView @rotation="onRotation" id="liveLabel" textWrap="true"
                    :rotate="textRotation" editable="false">
                    <FormattedString id="formString">
                        <Span id="spanText" text="Test text" fontSize="20"
                            color="red" />
                    </FormattedString>
                </TextView>
            </StackLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                textRotation: 0
            };
        },
        methods: {
            onRotation(args) {
                console.log(
                    "Rotate angle: " + args.rotation + " state: " + args.state
                );
                this.textRotation = Math.floor(args.rotation);
            }
        }
    };
</script>

nativescript nativescript-vue
person stanimirsp    schedule 16.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле то, что вы видите, совершенно ожидаемо, и вы делаете это возможным.

Представьте, что вы вычисляете положение объекта и перемещаете его одновременно, поэтому событие вращения в 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>

Пример игровой площадки

person Manoj    schedule 16.06.2019