0

我似乎无法弄清楚如何平滑地动画回到英雄动画的创始人。我的意思是，我有一张纸卡，上面有一堆 html（img、text 等），我可以把它“英雄”成另一个元素。但我希望能够顺利“反英雄”回到（小得多的）纸卡。我的尝试只会产生非常扭曲的向后过渡。我试图模仿的效果来自“精选部分”下的Google 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 网站上的行为。

4

1 回答 1

0

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

尝试仅使用英雄动画使其更简单。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
    }
  }
}

于 2015-12-11T01:50:52.977 回答