0

どうすればスムーズにヒーロー アニメの元祖に戻ることができるのか、私には理解できないようです。つまり、私はたくさんの html (img、text など) を載せた紙のカードを持っています。しかし、「アンチヒーロー」を（はるかに小さい）紙のカードにスムーズに戻すことができるようにしたいと思います。私の試みは、非常に歪んだ逆方向遷移しか生成しません。私が模倣しようとしている効果は、Google の 2015 IOの「注目のセクション」の下にあります。Google はサムネイルのグリッドを表示し、クリックすると、ヒーローが 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});
}

これはうまくレンダリングされます。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
        }
    }
}

繰り返しますが、アニメーションは両方の方法で発生しますが、要素 2 から要素 1 に戻るヒーローは、Google の IO サイトの動作を模倣しません。

4

1 に答える 1

0

ヒーロー アニメーションを再生しながら、カスケードと遅延を使用してエントリに 2 つのアニメーションを適用しています。

ヒーロー アニメーションのみを使用して、よりシンプルにするようにしてください。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 に答える