动画高度属性 [英] Animating height property
问题描述
你好,有stackoverflow和nativescript用户!
Hello there stackoverflow and nativescript users!
我对动画设置视图有疑问.
I have a problem with animating a view.
我想要的是:我正在尝试创建一个可以单击的视图,它会在动画下方打开一个新视图,将所有其他视图向下推.
What I want: I am trying to create a view where you can click and it opens op a new view below animated pushing all other views further down.
问题:只有其中的元素是动画的,什么都不是动画的 完全没有.
Problem: Only the elements inside are animated or nothing is animated at all.
我尝试的方法:我尝试使用原生UI动画,但由于高度过高而没有成功属性不受支持.
What I tried: I tried using the nativescript UI Animations but without success because the height property is not supported.
我的版本: https://gyazo.com/130c2b3467656bcc104c9b8e2c860d94
我很想听听大家提出的解决方案.
I would love to hear the solutions you all have come up with to tackle this.
推荐答案
您可以在本机脚本应用程序中使用tweenjs,定义依赖于tweenjs的以下类(使用npm i @tweenjs/tween.js
安装)
You can use tweenjs in your nativescript application defining the following class which rely on tweenjs (install it with 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中有效,但是您只需调整检索视图对象的方式即可):
Then, to animate the height of a view you can use a method like this (this one works in nativescript-vue but you just have to adapt the way you retrieve your view object) :
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
使其具有流畅的动画
This was discussed here : https://github.com/NativeScript/NativeScript/issues/1764
I mainly improved the onUpdate
to have a smooth animation
这篇关于动画高度属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!