7

Ember とLiquid Fireを使用して、マテリアル デザインにインスパイアされた、ルート間の興味深いアニメーション トランジションを作成しています。

2 つのトランジションを作成しました。index1 つ目は、ルートからルートへの遷移中に発生し、 、、および遷移を正常にabout使用します。ここでは、両方のルートの属性を一致させて、スムーズでシームレスなトランジションを作成し、一致した要素が画面を横切って次のページに移動するように見せます。いいぞ！explodeflyTotoLeftdata-nav

about2 つ目は、ルートからルートに戻る移行中に発生しindexます。ここでは、両方のルートの属性によって上記とは異なる要素を照合しdata-textますが、上記の例とは異なり、要素は同一ではありません。具体的には、フォントサイズが異なります。残念ながら、これには大きなフォント サイズのテキストがすぐに表示されてから、ページ全体に飛び散ってしまうという望ましくない効果があります。

私がやりたいのは、フォントサイズをアニメーション化するトランジションを追加することです。シンプルに聞こえます。

transitions.js以下は、上記の 2 つのトランジションを含む最初のファイルです。

export default function() {
  var duration = 1000;

  this.transition(
    // --------------------- INDEX to ABOUT ----------------------------------- //
    this.fromRoute('index'),
    this.toRoute('about'),
    this.use('explode', {
      matchBy: 'data-nav',
      use: [ 'flyTo', { duration } ]
    }, {
      use: [ 'toLeft', { duration } ]
    }),

    // --------------------- ABOUT to INDEX ----------------------------------- //
    this.reverse('explode', {
      matchBy: 'data-text',
      use: [ 'flyTo', { duration } ]
    }, {
      use: [ 'toRight', { duration } ]
    })
  );
}

答えは、独自のカスタム トランジションを作成することだと思いますが、かなり難しいことがわかりました。という名前のカスタム トランジションを作成し、このトランジション用のファイルにscale-font.js追加しました。transitions.js

import { animate, Promise } from "liquid-fire";

export default function scaleFont(opts={}) {
  // returns a Promise that resolves when the transition is done
  if (!this.newElement) {
    return Promise.resolve();
  } else if (!this.oldElement) {
    this.newElement.css({visibility: ''});
    return Promise.resolve();
  }

  var oldFontSize = this.oldElement.css('font-size');
  var newFontSize = (opts.selector ? this.newElement.find(opts.selector) : this.newElement).css('font-size');

  this.newElement.css({ visibility: 'hidden' });

  return animate(
    this.oldElement,
    { fontSize: oldFontSize },
    { duration: 1000 }
  ).then(() => {
    return animate(
      this.newElement,
      { fontSize: newFontSize },
      { duration: 1000, visibility: 'visible' }
    );
  });
}

残念ながら、これはうまくいきません。最初の問題は、oldFontSizeが正しくないことです。新しいフォントサイズを取得することになります。2 番目の問題は、フォントのスケーリングが発生しないことです。

私はアニメーションフォントを研究したので、それができると確信しています。提案？

4

0 に答える 0