私はGSAPを初めて使用しています。私はドラッグを有効にし、GSAPを使用してカスタムhtml5ビデオタイムラインをクリックしようとしています。私は、次のjsfiddleに簡略化した例を再現しました...ビデオタイムラインをドラッグしてクリック
を私はGSAPフォーラムの投稿のカップルを読んだが、私は明らかに理解できないものがあります:https://jsfiddle.net/epigeyre/oLmk6b0d/2/
だから私は私のドラッグを作成します要素を変数に格納し、それをコンテナ(タイムラインコンテナ)にバインドし、次にonDrag(私はクリックが同じになると思います)に関数を追加します。タイムラインの進捗状況は、0から1までのX軸でスケーリングされているタイムラインコンテナ内のdivによって示されます。現在のビデオ時間へのリンクは問題ありませんが、アニメーションはありません(変換が適用される理由はわかりません...)。
Draggable.create(timelineProgress, {
type:'x',
bounds: timeline, // My timeline container
onDrag: function() {
video.currentTime = this.x/this.maxX * video.duration;
TweenLite.set(timelineProgress, { scaleX: this.x/this.maxX }) ;
},
onClick: function() {
video.currentTime = this.x/this.maxX * video.duration;
TweenLite.set(timelineProgress, { scaleX: this.x/this.maxX }) ;
}
});
あなたは私に何が起こっているのかを理解する助けてもらえ:ここ
は、特定のスニペットがあるということ? ご協力いただきありがとうございます!
達成しようとしていることは完全にはっきりしていません。 TimelineProgressのscaleXを変更させるさまざまな行を削除すると、ドラッグ可能となります。 scaleXで何を達成しようとしていますか? scaleXを残す必要がある場合に役立つドラッグ可能な更新プロパティがあると思います。 –
あなたの答えをありがとう、私は 'trigger'プロパティを使って解決策を見つけました。私は少し時間があるとき私はここに私のコードを掲載します! – Pipo