动画高度属性

Posted 2023-04-13

【中文标题】动画高度属性

【英文标题】：Animating height property

【发布时间】：2019-04-05 21:39:32

【问题描述】：

*** 和 nativescript 用户您好！

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

我想要什么：我正在尝试创建一个可以单击的视图，它会在动画下方打开一个新视图，将所有其他视图进一步向下推。

问题：只有里面的元素有动画或者什么都没有动画 完全没有。

我尝试了什么：我尝试使用 nativescript UI Animations 但没有成功，因为不支持 height 属性。

我的版本：https://gyazo.com/130c2b3467656bcc104c9b8e2c860d94

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

【问题讨论】：

scaleY 可以提供帮助，但您的视图可能看起来被挤压了。

github.com/tralves/nativescript-tweenjs - 有潜力

【参考方案1】：

您可以在您的 nativescript 应用程序中使用 tweenjs，定义以下依赖于 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 以获得流畅的动画效果

【讨论】：

感谢您帮我解决这个问题！我不得不编辑 npm 包名称，因为如果只安装“tweenjs”，则无法正确导入库。