如何让霓虹灯动画在 Polymer Dart 1.0 中工作

Question

我的霓虹灯动画页面效果有限。我可以使用它的属性进入动画和退出动画来制作动画。这很棒，但我只能得到它运行一个用于进入的动画例程和一个用于退出的动画例程

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

并更改所选变量以执行动画。

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

@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();
}

和模板

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

据我所知，如果这是 JavaScript，这会起作用，但无论我怎么尝试，我都无法让它起作用。我会把这个元素放在一个 neon-animated-pages 元素中，就像他们在 JavaScript 演示中所做的那样，除了动画图片的可见性会改变之外什么都不会发生，当它被 neon- 选择时没有动画-动画页面，就像使用普通的 iron-pages 选择器一样。我如何用 Polymer Dart 1.0 做同样的事情？

Answer 1

我已经回答了我自己的问题，直觉。

是animationConfig的值。我的问题是我假设此值与 JavaScript 版本相同，但事实并非如此。在此元素的 JavaScript 版本中，animationConfig 被放入元素的 Polymer 定义的属性部分。

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

在 Dart 版本中，您不需要值部分，也永远不需要 return 函数。 Dart 版本只是一个带有 'entry' 和 'exit' 键的地图，其中 return 列出地图，其中包含动画细节，就像这样

@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 元素定义。这适用于，而不是独立运行，您需要混合 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')
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();
}

模板文件

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

希望这对某人有用

如何让霓虹灯动画在 Polymer Dart 1.0 中工作

How do I get neon-animation to work in Polymer Dart 1.0

dart

dart-polymer