आप डार्ट

Question

में कस्टम नियॉन एनीमेशन कैसे बनाते हैं पॉलिमर में आप नियॉन-एनिमेशन बना सकते हैं जैसे कि पहले से ही निर्मित 'फीड-इन-एनीमेशन'। आप 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> 

मुझे लगता है कि करने के लिए कुछ इसी तरह बना सकते हैं और सिर्फ कॉन्फ़िगर समारोह है, जो एक KeyframeEffect रिटर्न प्रदान की तरह लागू होगा। मैं 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 
    }] 
}; 

में इस डाल के साथ डार्ट 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(); 
} 

पॉलिमर में इस प्रजनन करने की कोशिश की और सभी मुझे मिलता है ब्राउज़र कंसोल में एक संदेश

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

मैं क्या गलत कर रहा हूँ? दूसरे शब्दों में, मैं पॉलिमर डार्ट 1.0 में नियॉन-एनीमेशन में उपयोग के लिए कस्टम एनीमेशन कैसे बना सकता हूं?

अद्यतन:

मैं कारण यह मैं बनाया था कस्टम एनिमेशन लगाने के लिए असफल रहा था मिल गया है। आश्चर्यचकित कोई मेरी गलती नहीं देखी। मैं

@CustomElement('diagonal-left') 

जो एक तत्व पंजीकृत करने का पुराना पूर्व पॉलिमर डार्ट 1.0 तरीका है। यह बजाय

@PolymerRegister ('विकर्ण-बाएँ') होना चाहिए

अब यह मेरी एनीमेशन ढूँढने में सक्षम है, लेकिन वह केवल

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) 

Dartium

में एक और त्रुटि मुझे दिया और जब pub serve के माध्यम से चलाने मैं क्रोम

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 

कौन सा मुझे डार्ट विधि कॉन्फ़िगर कह रहा है (config) में निम्नलिखित मिल परिवर्तित किया जा रहा नहीं है/एक जे एस समारोह में लपेटा tion। क्या ऐसा करने के लिए मैं कुछ कर सकता हूं और पॉलिमर में काम करने के लिए कस्टम डार्ट एनीमेशन प्राप्त कर सकता हूं? और हाँ यह एक कोणीय 2 ऐप में पॉलिमर चलाया जा रहा है, जिसका मतलब है कि मुझे छाया-छाया का उपयोग करने के लिए मजबूर होना पड़ता है।

अद्यतन 2:

मैं क्रोम के संस्करण मैं उपयोग कर रहा था, जो इस बग https://github.com/Polymer/core-animation/pull/28 से संबंधित है में कोई त्रुटि आई। मैंने पाया कि मुझे नवीनतम बहुलक_लेमेंट्स 1.0.0-आरसी.9 में अपडेट करने की आवश्यकता है। अब मैं

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

त्रुटि के साथ त्रुटि के साथ स्क्वायर पर वापस आ गया हूं।

Answer 1

मैंने अभी तक अपने प्रश्न का उत्तर दिया है। काम करने के लिए एकमात्र तरीका जेएस में एनीमेशन लिखना है, और उसके बाद इसे पॉलिमर डार्ट रैपर में लपेटना है। सबसे आसान तरीका custom_element_apigen का उपयोग करना है। समस्या यह है कि पब में बदलावों के कारण वर्तमान डार्ट संस्करण के साथ काम नहीं कर रहा है। एक पुल अनुरोध है जो उस समस्या का उत्तर देता है, लेकिन इस बीच आपको इसे मैन्युअल रूप से करना होगा। मैं custom_element_apigen चीजों की नकल करता हूं।

जावास्क्रिप्ट lib में संस्करण/src/परीक्षण एनीमेशन/परीक्षण 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> 

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

डार्ट बहुलक एचटीएमएल बनाएं आवरण एक nodart 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(); 
} 

अब आप में सक्षम होना चाहिए एनीमेशन कॉन्फिग फ़ील्ड में, इसे अपने नियॉन एनीमेशन तत्व में शामिल करें। इसे कैसे करें पर this answer देखें।

यह वह उत्तर नहीं है जिसका मैं उम्मीद कर रहा था, लेकिन यह काम करता है।