反向聚合物英雄动画答案

【问题标题】：Polymer Hero Animation In Reverse反向聚合物英雄动画
【发布时间】：2015-12-03 06:20:11
【问题描述】：

我似乎无法弄清楚如何顺利将动画返回到英雄动画的发起者。我的意思是，我有一张纸卡，上面有一堆 html（img、text 等），我可以把它“英雄”成另一个元素。但我希望能够“反英雄”返回到（小得多的）纸卡顺利。我的尝试只会产生非常扭曲的向后过渡。我试图模仿的效果来自“精选部分”下的Google's 2015 IO。谷歌显示一个缩略图网格，点击后，英雄进入 youtube 视频。按返回箭头反英雄回到特色部分网格...顺利。有什么想法吗？

对不起，代码块，我没有足够的声望来显示一些东西。

我的动画配置是

animationConfig: {
    value: function() {
        return {
            'entry': [{
                name: 'cascaded-animation',
                animation: 'scale-up-animation'
            },
            {
                name: 'hero-animation',
                id: 'hero',
                toPage: this
            }],

        'exit': [{
            name: 'cascaded-animation',
            animation: 'scale-down-animation'
        },
        {
            name: 'hero-animation',
            id: 'hero',
            fromPage: this
        }]
        }
    }
}

当点击一个项目触发点击事件时，我会淡出所有剩余的项目并将点击的项目作为英雄。

_onItemTap: function(event) {
    var nodes = this.$.scrollUp.children;
    var nodesToScale = [];

    for(var node, index = 0; node = nodes[index]; index++) {
        if (node !== event.detail.item) {
            nodesToScale.push(node);
        }
    }

    this.animationConfig['entry'][0].nodes = nodesToScale;
    this.animationConfig['exit'][0].nodes = nodesToScale;
    this.sharedElements = {'hero': event.detail.item};
    this.fire('feed-item-tap', {item: event.detail.item, data: event.detail.data});
}

这渲染得很好。 Element2 的 innerHTML 在进入时会淡入，以便显得更优雅。

animationConfig: {
    value: function() {
        return {
            'entry': [{
                name: 'cascaded-animation',
                animation: 'fade-in-animation',
                nodes: [this.$.bio, this.$.pic],
                timing: {delay: 500, duration: 2000}
            },
            {
                name: 'hero-animation',
                id: 'hero',
                toPage: this
            }],

            'exit': [{
                name: 'hero-animation',
                id: 'hero',
                fromPage: this
            }]
        }
    }
}

sharedElements: {
    value: function() {
        return {
            'hero': this.$.more_details
        }
    }
}

同样，动画确实是双向发生的，但是从 element2 回到 element1 的 hero 并没有模仿 Google IO 网站上的行为。

【问题讨论】：

我明白你的意思。你在使用霓虹灯元素吗？如果我是你，我会发布代码 + 示例链接。
我正在使用霓虹灯元素。我将代码限制在我认为最相关的部分。提前致谢。
创建一个 plunker n 我去看看。

标签： animation polymer polymer-1.0 googleio

【解决方案1】：

在播放英雄动画的同时，您在入口应用了两个具有级联和延迟的动画。

尝试仅使用英雄动画使其更简单。 Google IO 页面上的动画看起来像一个简单的英雄。

像这样：

animationConfig: {
  value: function() {
    return {
      'entry': {
        name: 'hero-animation',
        id: 'hero',
        toPage: this
      },

      'exit': {
        name: 'hero-animation',
        id: 'hero',
        fromPage: this
      }
    }
  }
},

sharedElements: {
  value: function() {
    return {
      'hero': this.$.more_details
    }
  }
}

【讨论】：