TweenMaxでベジェ曲線を表現する方法を簡単ですが記録。
Illustratorなんか使っている人ならよく聞くと思いますが、アンカーポイントとハンドルで描く曲線の構造のことです。
TweenMaxの使い方は割愛します。
TweenMaxでベジェ曲線を表現する方法
GSAP公式サイトを見ましょう。
使用例
left、topを使用する場合。
TweenMax.to(document.getElementById("Target"), 5, {
bezier: [
{ left: 200, top: 350 },
{ left: 400, top: 0 },
{ left: 500, top: 400 }
],
ease: Power1.easeInOut
});
曲線やルートをカスタマイズする場合は、オブジェクトとしてベジェを定義してvaluesプロパティを渡します。
TweenMax.to(document.getElementById("Target"), 5, {
bezier: {
type: "soft",
values: [
{ x: 100, y: 250 },
{ x: 300, y: 0 },
{ x: 500, y: 400 }
],
autoRotate: true
},
ease: Power1.easeInOut
});アニメーションのターゲットを回転させる場合。タイプにCubicを指定しrotationでどのくらい回転させるかを指定します。
TweenMax.to(document.getElementById("Target"), 5, {
bezier: {
type: "cubic",
values: [
{ x: 100, y: 250 },
{ x: 300, y: 0 },
{ x: 500, y: 400 }
],
autoRotate: ["x", "y", "rotation", 45, false]
},
ease: Power1.easeInOut
});
簡単ですが、以上です。
複雑な曲線アニメーションの実装参考に。
