Свойство анимации высоты - PullRequest
Новая
       6

Свойство анимации высоты

0 голосов
/ 01 ноября 2018

Привет, пользователи stackoverflow и nativescript!

У меня проблема с анимацией вида.

Что я хочу: я пытаюсь создать вид, в котором вы можете щелкнуть, и он открывает новый вид под анимированным представлением, толкая все остальные виды вниз.

Проблема: анимируются только элементы внутри или ничего не анимировано на все.

Что я пробовал: я пытался использовать анимацию пользовательского интерфейса , но безуспешно, потому что свойство высоты не поддерживается.

Моя версия: https://gyazo.com/130c2b3467656bcc104c9b8e2c860d94

Мне бы очень хотелось услышать решения, которые вы все придумали для решения этой проблемы.

1 Ответ

0 голосов
/ 01 ноября 2018

Вы можете использовать tweenjs в своем приложении nativescript, определяя следующий класс, который использует tweenjs (установите его с npm i @tweenjs/tween.js) 

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();
    }
}

Затем, чтобы анимировать высоту вида, вы можете использовать такой метод (этот работает в nativescript-vue, но вам просто нужно адаптировать способ получения объекта вида): 

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();
    }
}

Это обсуждалось здесь: https://github.com/NativeScript/NativeScript/issues/1764 Я в основном улучшил onUpdate, чтобы получить плавную анимацию

...