Nativescript 设置高度属性动画

您好，这里是stackoverflow和nativescript用户

我在设置视图动画时遇到问题

我想要的：我正在尝试创建一个视图，您可以单击它，它会在下面打开一个新视图，并将所有其他视图进一步向下推

问题：只有内部元素设置了动画，或者没有设置动画 一点也不

我尝试的内容：我尝试使用，但没有成功，因为不支持height属性

我的版本：

---

我很想听听大家提出的解决方案。

您可以在nativescript应用程序中使用tweenjs，定义以下依赖tweenjs的类（使用

npm I@tweenjs/tween.js安装）

然后，要设置视图高度的动画，可以使用如下方法（此方法适用于nativescript vue，但您只需调整检索视图对象的方式）：

这里讨论了这一点：
我主要改进了
onUpdate
以获得平滑的动画
您可以在nativescript应用程序中使用tweenjs，定义以下依赖tweenjs的类（使用
npm I@tweenjs/tween.js安装）

然后，要设置视图高度的动画，可以使用如下方法（此方法适用于nativescript vue，但您只需调整检索视图对象的方式）：

这里讨论了这一点：
我主要改进了
onUpdate
以获得平滑的动画
scaleY
可能会有所帮助，但您的视图可能会被压扁。-具有潜在的
scaleY
可能会有所帮助，但您的视图可能会被压扁。-非常感谢你帮我解决这个问题真是太棒了！我不得不编辑npm包名，因为如果你只安装“tweenjs”，就无法正确导入库。谢谢你帮我解决这个问题，效果很好！我不得不编辑npm包名，因为如果只安装“tweenjs”，就无法正确导入库。
import * as TWEEN from '@tweenjs/tween.js';
export { Easing } from '@tweenjs/tween.js';

TWEEN.now = function () {
    return new Date().getTime();
};

export class Animation extends TWEEN.Tween {
    constructor(obj) {
        super(obj);
        this['_onCompleteCallback'] = function() {
            cancelAnimationFrame();
        };
    }
    start(time) {
        startAnimationFrame();
        return super.start(time);
    }
}

let animationFrameRunning = false;
const cancelAnimationFrame = function() {
    runningTweens--;
    if (animationFrameRunning && runningTweens === 0) {
        animationFrameRunning = false;
    }
};

let runningTweens = 0;
const startAnimationFrame = function() {
    runningTweens++;
    if (!animationFrameRunning) {
        animationFrameRunning = true;
        tAnimate();
    }
};
const requestAnimationFrame = function(cb) {
    return setTimeout(cb, 1000 / 60);
};
function tAnimate() {
    if (animationFrameRunning) {
        requestAnimationFrame(tAnimate);
        TWEEN.update();
    }
}

import {Animation, Easing} from "./Animation"

toggle() {
    let view = this.$refs.panel.nativeView
    if (this.showPanel) {
        new Animation({ height: this.fixedHeight })
            .to({ height: 0 }, 500)
            .easing(Easing.Back.In)
            .onUpdate(obj => {
                view.originY = 0
                view.scaleY = obj.height / this.fixedHeight;
                view.height = obj.height;
            })
            .start()
            .onComplete(() => this.showPanel = !this.showPanel);
    } else {
        this.showPanel = !this.showPanel
        new Animation({ height: 0 })
            .to({ height: this.fixedHeight }, 500)
            .easing(Easing.Back.Out)
            .onUpdate(obj => {
                view.originY = 0
                view.scaleY = obj.height / this.fixedHeight;
                view.height = obj.height;
            })
            .start();
    }
}