首页 文章

Nativescript View.animate()不起作用

提问于
浏览
0

我正在从nativescript.org跟踪带有angular2的nativescript的this教程 .

在点击按钮的情况下,我试图为StackLayout的背景设置动画 .

<StackLayout #container>
    <Button [text]="'Some text'" (tap)="toggleDisplay();"></Button>
  </StackLayout>

我正在使用 @ViewChild decorator获取对 StackLayout 的引用 .

@ViewChild("container") container: ElementRef;

toggleDisplay() 函数看起来像这样

toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;
    let container = <View>this.container.nativeElement;
    container.animate({
      backgroundColor: new Color("#301217"),
      duration: 200
    });
  }

点击按钮我得到运行时异常

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException: 
Calling js method onClick failed
[object Object]
File: "/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js, line: 9427, column: 20
StackTrace: 
    Frame: function:'DebugAppView._rethrowWithContext', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9427, column: 21
    Frame: function:'', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9440, column: 27
    Frame: function:'', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/renderer.js', line: 221, column: 26
    Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 190, column: 28
    Frame: function:'onInvoke', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6206, column: 41
    Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 189, column: 34
    Frame: function:'Zone.run', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 83, column: 43
    Frame: function:'NgZone.run', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6096, column: 66
    Frame: function:'zonedCallback', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/renderer.js', line: 220, column: 24
    Frame: function:'Observable.notify', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/data/observable/observable.js', line: 149, column: 23
    Frame: function:'Observable._emit', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/data/observable/observable.js', line: 168, column: 18
    Frame: function:'onClick', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/ui/button/button.js', line: 33, column: 32

at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1022)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:907)
at com.tns.Runtime.callJSMethod(Runtime.java:895)
at com.tns.Runtime.callJSMethod(Runtime.java:879)
at com.tns.Runtime.callJSMethod(Runtime.java:871)
at com.tns.gen.android.view.View_OnClickListener.onClick(android.view.View$OnClickListener.java)
at android.view.View.performClick(View.java:5198)
at android.view.View$PerformClick.run(View.java:21147)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

我找到了here

动画视图属性需要“ui / animation”模块 .

import animation = require("ui/animation");

所以在我的angular2应用程序中,我做到了

import * as animation from "ui/animation";

但仍然得到同样的错误 .

另外here我发现有一些关于nativescript的android动画的问题 . 但这不会引起任何例外 .

有帮助吗?

1 回答

  • 0

    我使用附加的代码片段测试了您的案例,但无法重现此行为 . 您可以尝试删除 node_modulesplatformhooks 文件夹,并从模拟器或设备中删除该应用程序并重建项目 . 我也附上了我用过的代码 .

    app.component.html

    <StackLayout #container>
        <Button [text]="'Some text'" (tap)="toggleDisplay();"></Button>
      </StackLayout>
    

    app.component.ts

    import { Component, ViewChild, ElementRef } from "@angular/core";
    import {View} from "ui/core/view"
    import {Color} from "color"
    
    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
    export class AppComponent {
        @ViewChild("container") container: ElementRef;
        toggleDisplay() {
        let container = <View>this.container.nativeElement;
        container.animate({
          backgroundColor: new Color("#301217"),
          duration: 200
        });
      }
    }
    

    如果这没有帮助,请提供有关您的环境的更多信息:( CLItns-core-modulesnativescript-angular 等等...版本),这将有助于进一步调查此问题 .

相关问题