你如何分配一个元素来用 Nativescript-Vue 制作动画?

Question

查看此文档：

https://docs.nativescript.org/ui/animation

我正在尝试添加此元素的类或 ID 作为<Label>来动画化任何内容，但我不确定应该使用view分配一个元素，通过直接调用动画方法来完全控制任何动画代码而不是 CSS 动画在 Vue 模板中。

Answer 1

Tiago Alves的Groceries示例应用程序中有一个很好的例子。我在这里借用了他的一些代码，你可以像这样制作动画：

给你的元素一个ref：

<AbsoluteLayout marginTop="-340" ref="logoContainer" class="logo-container">
<Image translateY="0" src="res://seal" stretch="none"/>
</AbsoluteLayout>

然后获取该引用并使用标准的 NativeScript 动画 API 对其进行动画处理：

this.$refs.logoContainer.nativeView
.animate({
translate: { x: 0, y: platformModule.isAndroid ? -70 : -50 },
duration: 500,
curve: enums.AnimationCurve.easeIn })
.then(() => {
this.state = 'main'
})