聚合物 1.0 中的英雄动画
Posted
技术标签:
【中文标题】聚合物 1.0 中的英雄动画【英文标题】：Hero Animation in polymer 1.0 【发布时间】：2015-06-12 11:26:56 【问题描述】：我正在尝试通过单击红色方块来实现英雄动画（从霓虹元素）以动画到另一个自定义元素（element1.html 到 element2.html）。
我写了这里记录的所有内容： https://github.com/PolymerElements/neon-animation#shared-element
但是点击没有任何反应。请指导我执行此操作。
这是我的文件：
index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script>
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animations.html">
<link rel="import" href="element1.html">
<link rel="import" href="element2.html">
</head>
<body>
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<name-tag>
</name-tag>
<name-tag1>
</name-tag1>
</neon-animated-pages>
</template>
</body>
</html>
element1.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<dom-module id="name-tag">
<template>
<div id="hero" style="background:red; width:100px; height:100px; position:absolute; left:100px; top:50px;"></div>
</template>
</dom-module>
<script>
Polymer(
is: "name-tag",
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties:
animationConfig:
value: function()
return
// the outgoing page defines the 'exit' animation
'exit':
name: 'hero-animation',
id: 'hero',
fromPage: this
,
sharedElements:
value: function()
return
'hero': this.$.hero
);
</script>
element2.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<dom-module id="name-tag1">
<template>
<div id="card" style="background:red; width:200px; height:200px; position:absolute; left:300px; top:100px;"></div>
</template>
</dom-module>
<script>
Polymer(
is: "name-tag1",
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties:
sharedElements:
type: Object,
value: function()
return
'hero': this.$.card,
,
animationConfig:
value: function()
return
// the incoming page defines the 'entry' animation
'entry':
name: 'hero-animation',
id: 'hero',
toPage: this
,
);
</script>
提前致谢。
【问题讨论】：
【参考方案1】：您使用了错误的行为。 NeonAnimationRunnerBehavior 用于在自己内部播放或运行动画的组件。很好的例子是neon-animated-pages 组件，它实现了NeonAnimationRunnerBehavior，因为它在里面运行动画。
每个放在neon-animated-pages 中的项目都必须实现NeonAnimatableBehavior，而不是NeonAnimationRunnerBehavior。
要运行动画，我们必须以某种方式在动画组件之间切换。 neon-animated-pages 的“selected”属性帮助我们解决了这个问题。当selected = "0" neon-animated-pages 向您显示name-tag 时，当selected = "1" neon-animated-pages 向您显示name-tag1 组件时。
您想在单击后更改视图，但我没有看到任何单击事件侦听器。添加将更改所选属性值的点击事件，它将起作用。
【讨论】：
以上是关于聚合物 1.0 中的英雄动画的主要内容，如果未能解决你的问题，请参考以下文章