Question

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

我很抱歉代码块，我没有足够的声誉来展示。

我的animationConfig是

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

这很好。元素2的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的英雄并不模仿Google的IO网站上的行为。

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

聚合物英雄动画反向

1 个答案: