如何在Dart

时间：2016-04-10 16:39:32

标签： dart dart-polymer

在聚合物中，您可以创建霓虹灯动画，就像它们已经构建的“淡入动画”一样。您可以像这样实现Polymer.NeonAnimationBehavior 

<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>

我可以创建类似的东西，只提供configure函数，它返回一个KeyframeEffect。我尝试在Polymer Dart 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();
}

使用HTMLImport导入此

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

我尝试导入它，并将其放入animationConfig 

@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
  }]
};

我得到的只是浏览器控制台中的一条消息

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

我做错了什么？换句话说，如何在Polymer Dart 1.0中创建用于霓虹灯动画的自定义动画？

更新：

我找到了找不到我创建的自定义动画的原因。惊讶没有人注意到我的错误。我正在使用

@CustomElement('diagonal-left')

这是注册元素的旧的Polymer Dart 1.0方法。它应该是

@PolymerRegister（ '对角线左'）

现在它能够找到我的动画，但这只会让我在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)

并且在pub serve运行时，我在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

这告诉我dart方法configure（config）没有被转换/包装成JS函数。我有什么办法可以解决这个问题，并在Polymer中使用自定义dart动画吗？是的，这是在Angular 2应用程序中运行的Polymer，这意味着我被迫使用shadowroot。

更新2：

我在使用的Chrome版本中遇到错误，这与此错误https://github.com/Polymer/core-animation/pull/28有关。我发现我需要更新到最新的polymer_elements 1.0.0-rc.9。现在我回到原点，错误是

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

非常好的进步。

1 个答案:

答案 0 :(得分：1)

我再次回答了我自己的问题。我可以开始工作的唯一方法是在JS中编写动画，然后将其包装在Polymer Dart包装器中。最简单的方法是使用custom_element_apigen。问题是由于pub中的更改，因此无法使用当前的Dart版本。有一个拉取请求可以解决这个问题，但与此同时你必须手动完成。我模仿custom_element_apigen做事的方式。

lib / src / test-animation / test-animation.html

中的JavaScript版本 
<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>

创建一个nodart html文件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">

创建dart聚合物html包装器lib / test_animation.html。您实际上不需要此文件，但custom_element_apigen会创建它，因此我将其保留。

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

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

然后最后是飞镖包装器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();
}

现在，您应该可以在animationConfig字段中将其包含在neon动画元素中。有关如何执行此操作，请参阅this answer。

这不是我希望的答案，但它确实有效。

相关问题
最新问题