代码之家 › 专栏 › 技术社区 › Ivan

如何使用NativeScript Vue将元素指定为动画?

nativescript-vue nativescript javascript

0

Ivan · 技术社区 · 7 年前

检查此文档:

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

我正在尝试将此元素的类或ID添加为 <Label> 要设置任何内容的动画,但我不确定应该使用什么来指定元素 view 通过在Vue模板中使用代码而不是CSS动画直接调用动画方法来完全控制任何动画。

1 回复 | 直到 7 年前

1

6

Jen Looper 7 年前

TiagoAlves的杂货样品应用程序就是一个很好的例子。我在这里借用了他的一些代码,你可以像这样进行动画制作:

给你的元素A 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'
    })