如何让霓虹动画在Polymer Dart 1.0中工作 [英] How do I get neon-animation to work in Polymer Dart 1.0

问题描述

我有霓虹动画页工作，取得有限的成功。我可以使它的动画使用它的属性entry-animation和退出动画。这是伟大的，但我只能得到它运行一个动画例程进入和一个退出像这样

 < neon-animated-pages class =waterfrontselected ={{selected}}
 entry-animation =slide-down-animation
 exit-animation =slide-动画
> 
 .... 
< / neon-animated-pages> 
  

并选择变量以更改动画。

我注意到所有的JavaScript版本的教程，使用行为创建一个元素，允许复杂的动画。所以我使用Polymer Dart mixin等效

  @HtmlImport（'animated_picture.html'）
 library wellington.elements。动画图片
 
 import'package：polymer / polymer.dart'; 
 import'package：web_components / web_components.dart'; 
 
 import'package：polymer_elements / neon_animation_runner_behavior.dart'; 
 import'package：polymer_elements / neon_shared_element_animatable_behavior.dart'; 
 
 import'package：polymer_elements / neon_animation / animations / fade_in_animation.dart'; 
 import'package：polymer_elements / neon_animation / animations / fade_out_animation.dart'; 
 import'package：polymer_elements / neon_animation / animations / transform_animation.dart'; 
 import'package：polymer_elements / neon_animation / animations / slide_from_left_animation.dart'; 
 import'package：polymer_elements / neon_animation / animations / slide_left_animation.dart'; 
 
 
 @PolymerRegister（'animated-picture'）
类AnimatedPicture扩展PolymerElement与
 NeonAnimationRunnerBehavior，
 NeonSharedElementAnimatableBehavior {
 String _src; 
 @Property（reflectToAttribute：true，notify：true）
 String get src => _src; 
 @reflectable 
 void set src（val）{
 _src = val; 
 notifyPath（'src'，src）; 
} 
 
 String _alt; 
 @Property（reflectToAttribute：true，notify：true）
 String get alt => _alt; 
 @reflectable 
 void set alt（val）{
 _alt = val; 
 notifyPath（'alt'，alt）; 
} 
 
 @Property（reflectToAttribute：true，notify：true）
 Map get animationConfig => {
'value'：（）=> {
'entry'：[{
'name'：'slide-from-left'，
'node'：this 
}，
 {
'name'：'transform-animation'，
'node'：this，
'transformAnimation'：'translateX（-100vh）'
} ：[{
'name'：'fade-out-animation'，
'node'：this 
}] 
} 
 
} 
 
 
 AnimatedPicture.created（）：super.created（）; 
} 
  

和模板

 < dom-module id =animated-picture> 
< style> 
：host {
 display：block; 
} 
 
 .picture {
 width：1000px; 
 height：auto; 
} 
< / style> 
< template> 
< picture id =container> 
< source srcset =[[src]]> 
< img class =picturesrc =[[src]]alt =[[alt]]> 
< / picture> 
< / template> 
< script type =application / dartsrc =animated_picture.dart>< / script> 
< / dom-module> 
  

从我看到的，如果这是JavaScript，这将工作，我试着我不能得到这个工作。我将这个元素放在一个霓虹动画页面元素内，就像它们在JavaScript演示中一样，除了动画图片的可见性会改变，没有动画，当它被霓虹动画页面选择时，就像用一个简单的铁页面选择器。

解决方案

我已经回答了我自己的问题。 >

这是animationConfig的值。我的问题是我假设的值，这将是相同的JavaScript版本，它不是。在此元素的JavaScript版本中，animationConfig被放入元素的Polymer定义的属性部分。

  ... 
属性：{
 animationConfig：{
 value：function（）{
 return {
'entry'：{
 ... 
 }，
'exit'：{
 ... 
} 
} 
} 
} 
}，
 。
  

你不需要值部分，你从不需要返回一个函数， Dart版本。 Dart版本只是一个带有'entry'和'exit'键的Map，它返回Maps的列表，其中包含动画细节，例如

  @Property（reflectToAttribute：true，notify：true）
 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'：'slide-left-animation'，
'node'：this 
}，
 {
'name'：'fade-out-animation'，
'node'：this 
}] 
}; 
  

当然有适当的导入。为了完整性，我将在下面包括整个Polymer Dart元素定义。这个工作与< neon-animated-pages>，不是一个独立的，你需要混合NeonAnimationRunnerBehavior，并且调用它在playAnimation中混合，以使它独立工作。

Dart代码

  @HtmlImport（'animated_picture.html'）
 library wellington.elements.animated_picture ; 
 
 import'package：polymer / polymer.dart'; 
 import'package：web_components / web_components.dart'; 
 
 
 import'package：polymer_elements / neon_animatable_behavior.dart'; 
 
 import'package：polymer_elements / neon_animation / animations / fade_in_animation.dart'; 
 import'package：polymer_elements / neon_animation / animations / scale_up_animation.dart'; 
 import'package：polymer_elements / neon_animation / animations / fade_out_animation.dart'; 
 import'package：polymer_elements / neon_animation / animations / slide_left_animation.dart'; 
 
 
 @PolymerRegister（'animated-picture'）
类AnimatedPicture扩展PolymerElement与
 NeonAnimatableBehavior {
 String _src; 
 @Property（reflectToAttribute：true，notify：true）
 String get src => _src; 
 @reflectable 
 void set src（val）{
 _src = val; 
 notifyPath（'src'，src）; 
} 
 
 String _alt; 
 @Property（reflectToAttribute：true，notify：true）
 String get alt => _alt; 
 @reflectable 
 void set alt（val）{
 _alt = val; 
 notifyPath（'alt'，alt）; 
} 
 
 @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'：'slide-left-animation'，
'node'：this 
}，
 {
'name'：'fade-out-animation'，
'node'：this 
}] 
}; 
 
 
 AnimatedPicture.created（）：super.created（）; 
} 
  

模板文件

 < dom-module id =animated-picture> 
< style> 
：host {
 display：block; 
} 
 
 .picture {
 width：1000px; 
 height：auto; 
} 
< / style> 
< template> 
< picture id =container> 
< source srcset =[[src]]> 
< img class =picturesrc =[[src]]alt =[[alt]]> 
< / picture> 
< / template> 
< script type =application / dartsrc =animated_picture.dart>< / script> 
< / dom-module> 
  

希望这对某人有用

I have neon-animated-pages working with limited success. I can get it to animate using it's attributes entry-animation and exit-animation. This is great, but I've only been able to get it running with one animation routine for entry and one for exit like so

<neon-animated-pages class="waterfront" selected="{{ selected }}"
                 entry-animation="slide-down-animation"
                 exit-animation="slide-right-animation"
>
    ....
</neon-animated-pages>

and have the selected variable change to enact the animation.

I noticed all the tutorials for the JavaScript version, uses a behaviour to create a element which allows for sophisticated animations. So I use the Polymer Dart mixin equivalents

@HtmlImport('animated_picture.html')
library wellington.elements.animated_picture;

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

import 'package:polymer_elements/neon_animation_runner_behavior.dart';
import 'package:polymer_elements/neon_shared_element_animatable_behavior.dart';

import 'package:polymer_elements/neon_animation/animations/fade_in_animation.dart';
import 'package:polymer_elements/neon_animation/animations/fade_out_animation.dart';
import 'package:polymer_elements/neon_animation/animations/transform_animation.dart';
import 'package:polymer_elements/neon_animation/animations/slide_from_left_animation.dart';
import 'package:polymer_elements/neon_animation/animations/slide_left_animation.dart';


@PolymerRegister('animated-picture')
class AnimatedPicture extends PolymerElement with
    NeonAnimationRunnerBehavior,
    NeonSharedElementAnimatableBehavior {
  String _src;
  @Property(reflectToAttribute: true, notify: true)
  String get src => _src;
  @reflectable
  void set src(val) {
    _src = val;
    notifyPath('src', src);
  }

  String _alt;
  @Property(reflectToAttribute: true, notify: true)
  String get alt => _alt;
  @reflectable
  void set alt(val) {
    _alt = val;
    notifyPath('alt', alt);
  }

  @Property(reflectToAttribute: true, notify: true)
  Map get animationConfig => {
    'value': () => {
      'entry': [{
        'name': 'slide-from-left',
        'node': this
      },
      {
        'name': 'transform-animation',
        'node': this,
        'transformAnimation': 'translateX(-100vh)'
      }],
      'exit': [{
        'name': 'fade-out-animation',
        'node': this
      }]
    }

  };


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

and the template

<dom-module id="animated-picture">
    <style>
        :host {
            display: block;
        }

        .picture {
            width: 1000px;
            height: auto;
        }
    </style>
    <template>
        <picture id="container">
            <source srcset="[[src]]">
            <img class="picture" src="[[src]]" alt="[[alt]]">
        </picture>
    </template>
    <script type="application/dart" src="animated_picture.dart"></script>
</dom-module>

From what I've seen, if this had been JavaScript, this would have worked, but no matter what I try I can't get this to work. I would put this element inside a neon-animated-pages element, as they do in the JavaScript demos, and nothing would happen, except the animated-picture visibility would change, with no animation when it was selected by neon-animated-pages, just like it would with a plain iron-pages selector. How do I do the equivalent with Polymer Dart 1.0?

解决方案

I have answered my own question, on a hunch.

It was the values of animationConfig. My problem was I assumed the values for this would be the same as the JavaScript version, it's not. In the JavaScript version of this element, animationConfig is put in the properties part of the Polymer definition for the element.

...
properties: {
    animationConfig: {
        value: function() {
            return {
                'entry': {
                    ...
                },
                'exit': {
                    ...
                }
            }
        }
    }
},
...

You don't need the value part, and never do you need to return a function, in the Dart version. The Dart version is just a Map with 'entry' and 'exit' keys, which return lists of Maps, with the animation details in them, like so

@Property(reflectToAttribute: true, notify: true)
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': 'slide-left-animation',
    'node': this
  },
  {
    'name': 'fade-out-animation',
    'node': this
  }]
};

With of course the appropriate imports. For completeness I'm including the entire Polymer Dart element definition below. This works with <neon-animated-pages>, not as a standalone, you'll need to mixin the NeonAnimationRunnerBehavior, and call it's mixed in playAnimation, for it to work independently.

The Dart code

@HtmlImport('animated_picture.html')
library wellington.elements.animated_picture;

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


import 'package:polymer_elements/neon_animatable_behavior.dart';

import 'package:polymer_elements/neon_animation/animations/fade_in_animation.dart';
import 'package:polymer_elements/neon_animation/animations/scale_up_animation.dart';
import 'package:polymer_elements/neon_animation/animations/fade_out_animation.dart';
import 'package:polymer_elements/neon_animation/animations/slide_left_animation.dart';


@PolymerRegister('animated-picture')
class AnimatedPicture extends PolymerElement with
    NeonAnimatableBehavior {
  String _src;
  @Property(reflectToAttribute: true, notify: true)
  String get src => _src;
  @reflectable
  void set src(val) {
    _src = val;
    notifyPath('src', src);
  }

  String _alt;
  @Property(reflectToAttribute: true, notify: true)
  String get alt => _alt;
  @reflectable
  void set alt(val) {
    _alt = val;
    notifyPath('alt', alt);
  }

  @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': 'slide-left-animation',
        'node': this
      },
      {
        'name': 'fade-out-animation',
        'node': this
      }]
  };


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

The template file

<dom-module id="animated-picture">
    <style>
        :host {
            display: block;
        }

        .picture {
            width: 1000px;
            height: auto;
        }
    </style>
    <template>
        <picture id="container">
            <source srcset="[[src]]">
            <img class="picture" src="[[src]]" alt="[[alt]]">
        </picture>
    </template>
    <script type="application/dart" src="animated_picture.dart"></script>
</dom-module>

Hope this is of use to someone

这篇关于如何让霓虹动画在Polymer Dart 1.0中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！