Полимерная анимация героя в обратном порядке

Кажется, я не могу понять, как гладко анимировать назад к создателю анимации героя. Под этим я подразумеваю, что у меня есть бумажная карточка с кучей html (img, text, ect), которую я могу «превратить» в другой элемент; но я хотел бы иметь возможность "антигероя" вернуться на (гораздо меньшую) бумажную карту гладко. Мои попытки дают только очень искаженные переходы назад. Эффект, который я пытаюсь имитировать, взят из IO Google 2015 года в разделе "Избранные разделы". Google отображает сетку эскизов, при нажатии на которые они превращаются в видео на 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});
}

Это прекрасно отображается. Внутренний HTML элемент Element2 постепенно появляется при входе, чтобы выглядеть более изящно.

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.


animation polymer googleio polymer-1.0
person mvhatch    schedule 07.09.2015    source источник
comment
Я понимаю что ты имеешь ввиду. Вы работаете с неоновыми элементами? На вашем месте я бы выложил код + ссылку на пример.   -  person The Onin    schedule 07.09.2015
comment
Работаю с неоновыми элементами. Я связал код с разделами, которые, как мне кажется, наиболее актуальны. Заранее спасибо.   -  person mvhatch    schedule 07.09.2015
comment
Создайте плункер, я посмотрю.   -  person Justin XL    schedule 08.09.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы применяете две анимации при входе с каскадированием и задержкой, одновременно воспроизводя анимацию героя.

Попробуйте сделать это проще, используя только анимацию героя. Анимация на странице IO Google выглядит как простой герой.

Как это:

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

person Bernardo Doré    schedule 11.12.2015