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 equivalent

@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，这本来有用，但无论我尝试什么，我都无法使用它。我会把这个元素放在一个霓虹动画页面元素中，就像它们在JavaScript演示中一样，除了动画图片的可见性会改变，没有动画，当它被霓虹动画页面选中时，没有任何事情会发生，就像用普通的铁页选择器一样。如何使用Polymer Dart 1.0进行等效操作？

Answer 1

我已经在预感中回答了我自己的问题。

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

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

您不需要值部分，也不需要在Dart版本中返回函数。 Dart版本只是一个带有“入口”和“退出”键的地图，它返回地图列表，其中包含动画细节，如此

@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元素定义。这适用于＆lt; neon-animated-pages＆gt;，而不是独立的，你需要混合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中使用霓虹动画

1 个答案: