1

現在、私は html5/javascript でバナーを作成しており (自分自身の学習方法でもあり、まだ比較的新しいものです)、トゥイーンライト ライブラリを使用しています。私はhtml5でバナーを作成する最良の方法を実験しているので、同じバナーを作成するためにこれらのさまざまなプラグインをすべて試しています。今度は、新しい GSAP v12 を使用する Greensock の番です。

このソリューションに TweenLite/Max 以外は使用したくないということは明らかだと思います。したくてもできません（ファイルサイズの制限）。

だから今私の問題。テキストのスライドインとフェードインを同時に行おうとしています。スライドは完璧に機能しており、十分に簡単でしたが、フェージングは​​何もしていないようです.

コードの一部を次に示します (今のところフェードアウトにして、テストを容易にしていることに注意してください)。

TweenMax.to(ctxTitle, 0.5, { ypos:titleToYpos, css:{alpha:0}, ease:Power2.easeOut, onUpdate:loopTitle });

function loopTitle() {
  ctxTitle.clearRect(0, 0, width, height);
  ctxTitle.fillText(title, ctxTitle.xpos, ctxTitle.ypos);
}

私が何かを忘れた場合は、お気軽にお尋ねください! :)

4

1 に答える 1

1

私はいくつかのことに気づきました：

1）キャンバス要素ではなく、コンテキスト自体のcssをトゥイーンしようとしています。

//BAD:
TweenLite.to(document.getElementById('canvas4').getContext('2d'), 0.5, {css:{alpha:0}});

//GOOD:
TweenLite.to(document.getElementById('canvas4'), 0.5, {css:{alpha:0}});

もちろん、yposを処理するコンテキスト用に1つのトゥイーンを作成し、不透明度/アルファを処理するcanvas要素用に別のトゥイーンを作成できます。それらは完全に同期して実行されます。

2）非常に古いバージョンのGSAPファイルを使用しています。http://www.greensock.com/v12/から最新のものを入手してください

他に何か必要な場合は、http：//forums.greensock.comのGreenSockフォーラムで遠慮なくスイングしてください。

于 2012-09-17T21:47:29.597 に答える