如何使用 Nativescript-Vue 分配元素以制作动画？

Posted 2023-04-14

【中文标题】如何使用 Nativescript-Vue 分配元素以制作动画？

【英文标题】：How do you assign an element to animate with Nativescript-Vue?

【发布时间】：2019-01-20 23:50:27

【问题描述】：

查看此文档：

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

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

【参考方案1】：

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

给你的元素一个ref：

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

然后使用标准的 NativeScript Animation API 抓取该 ref 并为其设置动画：

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

【讨论】：

您的原始代码给了我一些错误，但我设法编辑了一些未定义的对象并且它有效。将platformModule.isAndroid 替换为-50 之类的数字，就像y: -50 和注释curve: enums.AnimationCurve.easeIn 似乎enums 也未定义，还要注释this.state = "main"，因为此回调是可选的。