Wie erstellen Sie eine benutzerdefinierte Neon-Animation in Dart

Question

In Polymer können Sie Neon-Animationen wie ihre bereits eingebaute "Fade-in-Animation" erstellen. Sie würden die Polymer.NeonAnimationBehavior wie diese

<script> 
    Polymer({ 
    is: 'fade-in-animation', 
    behaviors: [ 
     Polymer.NeonAnimationBehavior 
    ], 
    configure: function(config) { 
     var node = config.node; 
     this._effect = new KeyframeEffect(node, [ 
     {'opacity': '0'}, 
     {'opacity': '1'} 
     ], this.timingFromConfig(config)); 
     return this._effect; 
    } 
    }); 
</script> 

implementiere ich etwas ähnliches wie das schaffen könnte und liefern nur die configure-Funktion, die eine KeyframeEffect zurückgibt. Ich habe versucht, diese 1,0

@HtmlImport('diagonal-left.html') 
library wellington.elements.animation.diagonal_left; 

import 'dart:html'; 

import 'package:web_components/web_components.dart'; 
import 'package:polymer/polymer.dart'; 

import 'package:polymer_elements/neon_animation_behavior.dart'; 

@CustomElement('diagonal-left') 
class DiagonalLeft extends PolymerElement with NeonAnimationBehavior { 
    KeyframeEffect _effect; 

    configure(config) { 
    var node = config.node; 
    if (config.transformOrigin) { 
     setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 
    } else { 
     setPrefixedProperty(node, 'transformOrigin', '0 75%'); 
    } 
    _effect = new KeyframeEffect(node, [ 
     {'transform': 'none'}, 
     {'transform': 'translateX(-100%)'} 
    ], timingFromConfig(config)); 

    return _effect; 
    } 

    DiagonalLeft.created() : super.created(); 
} 

mit dem HTMLImport diesen

<script type="application/dart" src="diagonal_left.dart"></script> 

importiert Dart in Polymer Reproduktion ich versuche, diese zu importieren und diese

@property 
Map get animationConfig => { 
    'entry': [ 
    { 
    'name': 'fade-in-animation', 
    'node': this, 
    'timing': {'delay': 500, 'duration': 1000} 
    }, 
    { 
    'name': 'scale-up-animation', 
    'node': this, 
    'timing': {'duration': 2000} 
    }], 
    'exit': [{ 
    'name': 'fade-out-animation', 
    'node': this, 
    'timing': {'delay': 500, 'duration': 1000} 
    }, 
    { 
    'name': 'slide-left-animation', 
    'node': this, 
    'timing': {'duration': 1000} 
    }, 
    { 
    'name': 'diagonal-left', 
    'node': this 
    }] 
}; 

im animationConfig setzen und alles, was ich bekommen ist Eine Nachricht in der Browser-Konsole sagt

neon-animated-pages: diagonal-left not found! 

Was mache ich falsch? Mit anderen Worten, wie kann ich eine benutzerdefinierte Animation für die Verwendung in Neon-Animationen in Polymer Dart 1.0 erstellen?

UPDATE:

ich den Grund gefunden habe, es versagte die benutzerdefinierte Animation finde ich geschaffen hatte. Überrascht bemerkte niemand meinen Fehler. Ich benutzte

das ist der alte vor Polymer Dart 1.0 Weg zum Registrieren eines Elements. Es sollte stattdessen

@PolymerRegister (‚diagonal links‘)

Jetzt ist es in der Lage ist meine Animation zu finden, aber das gab mir nur einen weiteren Fehler in Dartium

VM4374:1 ORIGINAL EXCEPTION: V8 Exception(anonymous function) @ VM4374:1 
VM4374:1 ORIGINAL STACKTRACE:(anonymous function) @ VM4374:1 
VM4374:1 #0  JsFunction._apply (dart:js:1490) 
#1  JsFunction.apply (dart:js:1488) 
#2  BrowserDomAdapter.setProperty (package:angular2/src/platform/browser/browser_adapter.dart:140:20) 
#3  DomRenderer.setElementProperty (package:angular2/src/platform/dom/dom_renderer.dart:190:9) 
#4  DebugDomRenderer.setElementProperty (package:angular2/src/core/debug/debug_renderer.dart:127:10) 
#5  AppView.notifyOnBinding (package:angular2/src/core/linker/view.dart:211:23) 
#6  AbstractChangeDetector.notifyDispatcher (package:angular2/src/core/change_detection/abstract_change_detector.dart:280:21) 
#7  _WaterfrontView_0.detectChangesInRecordsInternal (package:wellington/views/waterfront_view/waterfront_view.template.dart:66:20) 
#8  AbstractChangeDetector.detectChangesInRecords (package:angular2/src/core/change_detection/abstract_change_detector.dart:151:12) 
#9  AbstractChangeDetector.runDetectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:125:10) 
#10  AbstractChangeDetector._detectChangesInViewChildren (package:angular2/src/core/change_detection/abstract_change_detector.dart:244:12) 
#11  AbstractChangeDetector.runDetectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:128:10) 
#12  AbstractChangeDetector._detectChangesInViewChildren (package:angular2/src/core/change_detection/abstract_change_detector.dart:244:12) 
#13  AbstractChangeDetector.runDetectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:128:10) 
#14  AbstractChangeDetector.detectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:111:10) 
#15  ChangeDetectorRef_.detectChanges (package:angular2/src/core/change_detection/change_detector_ref.dart:209:14) 
#16  ApplicationRef_.tick.<anonymous closure> (package:angular2/src/core/application_ref.dart:512:63) 
#17  List.forEach (dart:core-patch/growable_array.dart:258) 
#18  ApplicationRef_.tick (package:angular2/src/core/application_ref.dart:512:32) 
#19  ApplicationRef_.ApplicationRef_.<anonymous closure>.<anonymous closure> (package:angular2/src/core/application_ref.dart:410:16) 
#20  _rootRun (dart:async/zone.dart:1150) 
#21  _ZoneDelegate.run (dart:async/zone.dart:693) 
#22  NgZoneImpl._run (package:angular2/src/core/zone/ng_zone_impl.dart:150:21) 
#23  _CustomZone.run (dart:async/zone.dart:1026) 
#24  _CustomZone.runGuarded (dart:async/zone.dart:924) 
#25  NgZoneImpl.runInner (package:angular2/src/core/zone/ng_zone_impl.dart:121:23) 
#26  NgZone.run (package:angular2/src/core/zone/ng_zone.dart:219:27) 
#27  ApplicationRef_.ApplicationRef_.<anonymous closure> (package:angular2/src/core/application_ref.dart:409:20) 
#28  _RootZone.runUnaryGuarded (dart:async/zone.dart:1338) 
#29  _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:331) 
#30  _BufferingStreamSubscription._add (dart:async/stream_impl.dart:258) 
#31  _SyncBroadcastStreamController._sendData (dart:async/broadcast_stream_controller.dart:386) 
#32  _BroadcastStreamController.add (dart:async/broadcast_stream_controller.dart:261) 
#33  EventEmitter.emit (package:angular2/src/facade/async.dart:95:17) 
#34  NgZone._checkStable (package:angular2/src/core/zone/ng_zone.dart:146:34) 
#35  NgZone.NgZone.<anonymous closure> (package:angular2/src/core/zone/ng_zone.dart:129:16) 
#36  NgZoneImpl._run (package:angular2/src/core/zone/ng_zone_impl.dart:152:14) 
#37  NgZoneImpl._runUnary (package:angular2/src/core/zone/ng_zone_impl.dart:157:7) 
#38  _CustomZone.runUnary (dart:async/zone.dart:1037) 
#39  _CustomZone.runUnaryGuarded (dart:async/zone.dart:932) 
#40  _CustomZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:961) 
#41  _Timer._Timer.<anonymous closure> (dart:html:49206) 

und bei der Ausführung durch pub serve ich werde im Anschluss an die in Chrome

EXCEPTION: NoSuchMethodError: method not found: 'configure' (animation.configure is not a function) in [selected in WaterfrontView@7:40] html_dart2js.dart:3351 
EXCEPTION: NoSuchMethodError: method not found: 'configure' (animation.configure is not a function) in [selected in WaterfrontView@7:40] 
ORIGINAL EXCEPTION: NoSuchMethodError: method not found: 'configure' (animation.configure is not a function) 
ORIGINAL STACKTRACE: 

TypeError: animation.configure is not a function 
at HTMLElement._configureAnimationEffects (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:20326) 
at HTMLElement.playAnimation (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:20362) 
at HTMLElement._selectedChanged (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:20572) 
at HTMLElement._complexObserverEffect (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7749) 
at HTMLElement._effectEffects (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7496) 
at HTMLElement._propertySetter (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7473) 
at HTMLElement.setter (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7582) 
at eval (eval at F (js_dart2js.dart:358), <anonymous>:1:39) 
at h2.bt (js_dart2js.dart:387) 
at h2.aC (js_dart2js.dart:392) 
aE @ html_dart2js.dart:3351 
(anonymous function) @ exception_handler.dart:80 
dart.cI.$3 @ exception_handler.dart:91 
dart.yu.$1 @ application_ref.dart:262 
dart.xS.$0 @ ng_zone_impl.dart:157 
dart.nY @ zone.dart:1150 
dart.xN.fj @ zone.dart:693 
dart.xN.lB @ ng_zone_impl.dart:157 
(anonymous function) @ VM202:2 
bP @ zone.dart:1037 
bQ @ zone.dart:932 
W @ stream_impl.dart:331 
dart.ey.ay @ stream_impl.dart:258 
W @ broadcast_stream_controller.dart:386 
$1 @ broadcast_stream_controller.dart:261 
dart.xN.lz @ ng_zone_impl.dart:190 
(anonymous function) @ VM198:2 
aq @ zone.dart:1005 
ai @ zone.dart:926 
dart.ug.$1 @ ng_zone_impl.dart:121 
bQ @ zone.dart:1338 
W @ stream_impl.dart:331 
dart.ey.ay @ stream_impl.dart:258 
W @ broadcast_stream_controller.dart:386 
eH @ broadcast_stream_controller.dart:261 
$0 @ ng_zone.dart:129 
dart.xN.fj @ ng_zone_impl.dart:152 
dart.xN.lB @ ng_zone_impl.dart:157 
(anonymous function) @ VM202:2 
bP @ zone.dart:1037 
bQ @ zone.dart:932 
dart.Ar.$1 @ zone.dart:961 
dart.zF.$0 @ isolate_helper.dart:1396 
$0 @ js_helper.dart:2408 
bz @ isolate_helper.dart:462 
d9 @ isolate_helper.dart:54 
dart.HW @ js_helper.dart:2408 
(anonymous function) @ js_helper.dart:2430 

die mir die dart Methode configure (config) erzählt wird, nicht in eine JS func umgewandelt/umwickelt tion. Gibt es etwas, was ich tun kann, um dies zu beheben und eine benutzerdefinierte Dartanimation für die Arbeit in Polymer zu erhalten? Und ja, das ist Polymer, das in einer Angular 2 App läuft, was bedeutet, dass ich gezwungen bin, Shadowroot zu benutzen.

UPDATE 2:

traf ich einen Fehler in der Version von Chrome war ich mit, die https://github.com/Polymer/core-animation/pull/28 zu diesem Fehler bezieht. Ich fand, dass ich auf die neuesten polymer_elements 1.0.0-rc.9 aktualisieren musste. Jetzt bin ich wieder auf Platz eins mit dem Fehler

Oh, so viel für den Fortschritt.

Answer 1

Ich habe noch einmal meine eigene Frage beantwortet. Die einzige Methode, mit der ich arbeiten kann, besteht darin, die Animation in JS zu schreiben und sie dann in einen Polymer Dart Wrapper zu verpacken. Am einfachsten ist es, die custom_element_apigen zu verwenden. Das Problem ist, dass es mit der aktuellen Dart-Version aufgrund von Änderungen in der Kneipe nicht funktioniert. Es gibt eine Pull-Anfrage, die dieses Problem löst, aber in der Zwischenzeit müssen Sie es manuell tun. Ich ahme die Art nach, custom_element_apigen Dinge zu tun.

JavaScript-Version in lib/src/test-Animation/Test-animation.html

<link rel="import" href="../../../../packages/polymer/polymer.html"> 
<link rel="import" href="../../../../packages/polymer_elements/src/neon-animation/neon-animation-behavior.html"> 
<link rel="import" href="../../../../packages/polymer_elements/src/neon-animation/web-animations.html"> 


<script> 

    Polymer({ 

     is: 'test-animation', 

     behaviors: [ 
      Polymer.NeonAnimationBehavior 
     ], 

     configure: function(config) { 
      var node = config.node; 

      node.style.perspective = "600px"; 
      node.style.backfaceVisibility = "hidden"; 
      node.style.transformStyle = "preserve-3d"; 
      node.style.transition = "transform 1s"; 
      node.style.position = "absolute"; 


      this._effect = new KeyframeEffect(node, [ 
       {'transform': 'rotateY(-20deg)'}, 
       {'transform': 'rotateY(-40deg)'}, 
       {'transform': 'rotateY(-60deg)'}, 
       {'transform': 'rotateY(-80deg)'}, 
       {'transform': 'rotateY(-100deg)'}, 
       {'transform': 'rotateY(-120deg)'}, 
       {'transform': 'rotateY(-140deg)'}, 
       {'transform': 'rotateY(-160deg)'}, 
       {'transform': 'rotateY(-180deg)'}, 
       {'transform': 'rotateY(0deg)'} 
      ], this.timingFromConfig(config)); 

      return this._effect; 
     } 

    }); 

</script> 

eine Datei nodart html erstellen lib/test_animation_nodart.html

<link rel="import" href="src/test-animation/test-animation.html"> 
<link rel="import" href="../../packages/polymer_elements/neon_animation_behavior_nodart.html"> 

den Dart Polymer HTML-Wrapper erstellen lib/test_animation.html. Sie brauchen eigentlich diese Datei nicht, sondern custom_element_apigen schafft es, also lasse ich es in.

<link rel="import" href="test_animation_nodart.html"> 

<script type="application/dart" src="test_animation.dart"></script> 

Und dann schließlich der Dart-Wrapper lib test_animation.dart

@HtmlImport('test_animation_nodart.html') 
library family_tree.lib.src.test_animation.test_animation; 

import 'dart:html'; 
import 'package:web_components/web_components.dart'; 
import 'package:polymer_interop/polymer_interop.dart'; 
import 'package:polymer_elements/neon_animation_behavior.dart'; 


@CustomElementProxy('test-animation') 
class TestAnimation extends HtmlElement with CustomElementProxyMixin, PolymerBase, NeonAnimationBehavior { 
    TestAnimation.created() : super.created(); 
} 

Sie sollten nun in der Lage sein, Fügen Sie dies in Ihr neon animation-Element im animationConfig-Feld ein. Siehe dazu this answer.

Dies ist nicht die Antwort, auf die ich gehofft hatte, aber es funktioniert.