угловая анимация в ionic3 перестает работать после получения пользовательского плагина cordova для ответа андроида на нажатие кнопки - PullRequest
Новая
       31

угловая анимация в ionic3 перестает работать после получения пользовательского плагина cordova для ответа андроида на нажатие кнопки

0 голосов
/ 04 ноября 2019

Я разрабатываю собственный плагин Cordova (на данный момент Android) для использования с Ionic. Плагин добавляет слушателя в WebView с этим кодом: 

        this.callbackContext = callbackContext;//store this for later
        this.webView.getView().setOnKeyListener(this);//add listener
        PluginResult pluginResult = new PluginResult(PluginResult.Status.NO_RESULT); // send no result cause the result will be sent by the listener
        pluginResult.setKeepCallback(true);
        this.callbackContext.sendPluginResult(pluginResult);

Затем я переопределяю слушателя следующим образом: 

    @Override
    public boolean onKey(View view, int keyCode, KeyEvent keyEvent) {

        JSONObject result = new JSONObject();

        if (keyEvent.getAction() == KeyEvent.ACTION_DOWN) {

            if (keyCode == KeyEvent.KEYCODE_VOLUME_UP || keyCode == KeyEvent.KEYCODE_VOLUME_DOWN
            {
                try {
                    result.put("button", "button pressed");
                } catch (JSONException err) {
                }

            } 
            
            PluginResult pr = new PluginResult(PluginResult.Status.OK, result);
            pr.setKeepCallback(keepCallback);
            this.callbackContext.sendPluginResult(pr);
            return false;

        }
        return true;
    }

На ионной стороне я вижу, что плагин правильно отправляет результат обратно, но, кажется, добавляет странное поведение: когда событие получено от ionic, мойКод должен запустить анимацию (угловая анимация), анимация запускается, но не завершается. Кажется, застрял. Если я каким-либо образом взаимодействую с пользовательским интерфейсом после получения события (например, если я просто коснусь экрана, все снова начинает работать), приложение снова начинает отвечать. Анимация работает отлично, если я запускаю ее другим способом.

Анимация создается следующим образом: 

 @Component({
...
  animations: [
    trigger('buttonAnimation', [
      state('normal', style({
        'transform': 'scale(1.0)'
      })),
      state('big', style({
        'transform': 'scale(1.2)',
      })),
      transition('* => *', animate('.1s ease'))
    ]),
  ]
})

ОБНОВЛЕНИЕ:

Я применил анимацию в файле шаблона таким образом 

<button>
        <i (click)="onButtonPressed()" [@buttonAnimation]="buttonState" (@buttonAnimation.done)="onAnimationEnd()"></i>
      </button>

и обратный вызов, поступивший от cordovaПлагин запускает анимацию, устанавливая переменную 

enter code here
    this.buttonState = 'big';

, затем анимация повторно запускается с помощью 

   onAnimationEnd() {
    this.buttonState = 'normal'
  }

Плагин Cordova используется для запуска анимации: 

cordova.plugins.buttonListener.listenButtonClick(data => {
      this.buttonState = 'big';
}, err => {
});

1 Ответ

0 голосов
/ 04 ноября 2019

Скорее всего, вам нужно принудительно определить DetectionChanges или запустить его внутри ngZone. 

constructor(private ref: ChangeDetectorRef){} 

ngOnInit() {
  cordova.plugins.buttonListener.listenButtonClick(data => {
    this.buttonState = 'big';
    this.ref.detectChanges();    
  }, err => { });
}

Или с помощью ngZone: 

constructor(private ngZone: NgZone){} 

ngOnInit() {
  this.ngZone.run(() => {
    cordova.plugins.buttonListener.listenButtonClick(data => {
      this.buttonState = 'big';  
     }, err => { });
  });
}
...