聚合物1.0中的Hero动画 [英] Hero Animation in polymer 1.0
问题描述
我正在尝试通过单击红色正方形来实现英雄动画(从霓虹灯元素开始)以动画化到另一个自定义元素(element1.html到element2.html).
I am trying to implement hero animation(from neon-elements) to animate to another custom element(element1.html to element2.html) by clicking a red square.
我写了这里记录的所有内容: https://github.com/PolymerElements/neon-animation#shared-element
I wrote everything that is documented here: https://github.com/PolymerElements/neon-animation#shared-element
但是点击没有任何反应.请指导我实施此操作.
But nothing happens on click. Please guide me on implementing this.
这是我的文件:
index.html
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
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
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>
预先感谢.
推荐答案
-
您使用的是错误的行为.
NeonAnimationRunnerBehavior用于在内部播放或运行动画的组件.很好的例子是neon-animated-pages组件，它实现了NeonAnimationRunnerBehavior，因为它在内部运行动画.
You are using wrong behavior.
NeonAnimationRunnerBehavioris for components who play or run the animation inside themselves. Very good example will beneon-animated-pagescomponent, it implementsNeonAnimationRunnerBehaviorbecause it runs animations inside.
放置在neon-animated-pages中的每个项目都必须实现NeonAnimatableBehavior，而不是NeonAnimationRunnerBehavior.
Every item which placed in neon-animated-pages has to implement NeonAnimatableBehavior, not NeonAnimationRunnerBehavior.
要运行动画，我们必须在可设置动画的组件之间进行某种方式的切换. 霓虹动画页面的"selected"属性可以帮助我们实现这一目标.当selected = "0" neon-animated-pages显示您name-tag时，当selected = "1" neon-animated-pages显示您name-tag1组件时.
To run the animation we have to switch somehow between our animatable components. The "selected" attribute of neon-animated-pages help us with that. When selected = "0" neon-animated-pages shows you name-tag, when selected = "1" neon-animated-pages shows you name-tag1 component.
您想在单击后更改视图，但是我没有看到任何click事件侦听器.添加点击事件，它将更改所选的属性值，并且该属性将起作用.
You want to change view after click but I don't see any click event listeners. Add click events which will change selected attribute value and it'll work.
这篇关于聚合物1.0中的Hero动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
