Анимация на Polymer Hero в обратна посока

Изглежда не мога да разбера как да гладко анимирам назад към създателя на анимация на герой. С това имам предвид, че имам хартиена карта с куп html (img, текст, и т.н.) върху нея, която мога да „преобразувам“ в друг елемент; но бих искал да мога да се върна на към (много по-малката) хартиена карта плавно. Моите опити произвеждат само много изкривени преходи назад. Ефектът, който се опитвам да имитирам, е от IO на Google за 2015 г. под „Представени секции“. 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});
}

Това се представя добре. Вътрешният 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
Създайте плункер n Ще погледна.   -  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