[ポリマー] X-GIFアセンブリ、再生速度描画GIFを動的に調整!

要約:[ポリマー] X-GIFアセンブリ、再生速度描画GIFを動的に調整!


このコンポーネントは、調整可能な描画速度GIF導入X-GIFを、真実を試験した:スロットのGIF速度、ピンポン効果、分解図を調整するために使用することができる(EZoApp、プレスプレビューを使用してプレビューすることができます)


数日前にグーグルIOアセンブリがちょうど発表された、ポリマーに導入された総会で、わずかにいくつかを読んで、私たちは多くの開発者がxgifと呼ばれるコンポーネントを持つポリマー成分を、開発するために使用に入れことが判明し、動的に制御され、 GIFスピード。あなたはGIFは、全体の選挙を逆転したい場合は、ビジュアルデザイナのために、私たちはGIFの速度を制御する必要がある前に、多くの場合、フォトショップを開きたい、オープンフェイスの後、アニメーションバージョンは、手動で、影のGIFグリッドに時間間隔を調整することができますフレームは、フレームを逆転...というように、前後に繰り返しテストを、順番にページを表示したり、アプリケーションは、最高の経験を持っています。(例:ニュースは、GIF点滅異なる体験が点滅していると0.1秒点滅0.2秒)


突然明らかになって世界でのビジュアルデザイナーとして、このコンポーネントxgif使用した後は、値のみの設定速度、あなたは、再生速度GIF、パラメータの増加を制御することができますが、GIFが前方にずらして配置させると再生を逆にし、さらにすることができますGIFは、フレームによって解析され、以下はこのコンポーネントを使用する方法を紹介します:

最初に、もちろんあなたはplatform.jsをロードするが、これはEZoApp開発ツールを使用するので、私はここにいる、ポリマーを完全にサポートので、私たちはこの部分を持っていませんトラブルの後、次は引き出して(また、左パレットから引き出すことができる)を開発し、この成分ポリマーを使用xgif直接見て、あなたがプログラムを見ることができます 調節することができるパラメータの数を含めxgifコンポーネントは、次のとおりです。

  • SRC:(時々 、クロスドメイン・サーバーの問題を抱えているような)ファイルパスアニメーションを
  • スピード:名前が速度を調整する通り、0から加算されている可能性があり、1は、より迅速に、デフォルトのスピードGIF自体、大きな数であります
  • 塗りつぶし:あなたは画面をいっぱいにしますか(よりカットオフされるように思われるよりも)
  • ピンポンのpingを:自動的にアニメーションが完成し、放送後に巻き戻してみましょう
  • 爆発:アニメーションショーアップの絵の分解図


これは私自身のテストプログラムです:

 

あなたがストップを使用したい場合は/機能を開始するだけでなく、ジャバスクリプトの代わりに記入することを忘れないでください

window.addEventListener( 'ポリマーレディ'、関数(E){
  document.querySelectorAll( 'X-GIF')。アレイ()。forEachの(関数(EL){
    el.addEventListener( 'クリック'、関数(){
      EL .stopped =(el.stopped == NULL)真:NULL;?
    })
  })
})。

そして、あなたがアニメーションムービーが一時停止されていることを確認するためにクリックすることができ、ラベルまたは前には、停止画像が一時停止し始めているように、その後、再生を開始するためにタップし、実際には、そのようなアニメーションが音楽プレーヤーを追跡できるようにするなど、多くの興味深い機能は、ある(私が見つかりました。小さなアニメーションは、あなたがhttp://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif xgif公式発表を見てみることができます)の方法を適用していない、短すぎます

最後に、効果xgifを見て:スロットGIF速度調整、ピンポン効果、分解図の使用(EZoApp、プレスプレビューを使用してプレビューすることができます)

オリジナル:大カラム  [ポリマーは、X-GIFアセンブリ、再生速度描画GIFを動的に調整!


おすすめ

転載: www.cnblogs.com/petewell/p/11465542.html