作成者Observable

外観

d3-ease ​

例 · イージング は、アニメーションの見かけの動きを制御するために時間を歪める方法です。最も一般的に スローイン、スローアウト に使用されます。時間をイージングすることで、アニメーションによるトランジションはよりスムーズになり、より自然な動きを見せます。

このモジュールのイージングタイプは、正規化された時間 t を受け取り、対応する「イーズされた」時間 tʹ を返す ease メソッド を実装しています。正規化された時間とイーズされた時間の両方は、通常 [0,1] の範囲にあり、0 はアニメーションの開始を表し、1 は終了を表します。一部のイージングタイプ（easeElastic など）は、この範囲をわずかに超えるイーズされた時間を返す場合があります。適切なイージングタイプは、t = 0 の場合は 0 を返し、t = 1 の場合は 1 を返す必要があります。

これらのイージングタイプは、主に Robert Penner の業績に基づいています。

ease(t) ​

指定された正規化された時間 t（通常は範囲 [0,1]）が与えられた場合、「イーズされた」時間 tʹ（通常も [0,1]）を返します。0 はアニメーションの開始を表し、1 は終了を表します。適切な実装では、t = 0 の場合は 0 を返し、t = 1 の場合は 1 を返します。たとえば、easeCubic イージングを適用するには

js
const te = d3.easeCubic(t);

カスタムの elastic イージングを適用するには、アニメーションが開始する前にイージング関数を作成します

js
const ease = d3.easeElastic.period(0.4);

次に、アニメーション中にイージング関数を適用します

js
const te = ease(t);

transition.ease も参照してください。

easeLinear ​

ソース · 線形イージング。恒等関数。linear(t) は t を返します。

easePoly ​

ソース · easePolyInOut のエイリアス。

easePolyIn ​

多項式イージング。t を指定された 指数 で累乗します。指数が指定されていない場合は、デフォルトで 3 になり、easeCubicIn と同等です。

easePolyOut ​

逆多項式イージング。easePolyIn(1 - t) の 1 - に相当します。指数が指定されていない場合は、デフォルトで 3 になり、easeCubicOut と同等です。

easePolyInOut ​

対称多項式イージング。t が 0～0.5 の場合は easePolyIn を、t が 0.5～1 の場合は easePolyOut をスケールします。指数が指定されていない場合は、デフォルトで 3 になり、easeCubic と同等です。

easePoly.exponent(e) ​

指定された指数 e を持つ新しい多項式イージングを返します。たとえば、easeLinear、easeQuad、および easeCubic の同等を作成するには

js
const linear = d3.easePoly.exponent(1);
const quad = d3.easePoly.exponent(2);
const cubic = d3.easePoly.exponent(3);

easeQuad ​

ソース · easeQuadInOut のエイリアス。

easeQuadIn ​

二次イージング。easePolyIn.exponent(2) に相当します。

easeQuadOut ​

逆二次イージング。easeQuadIn(1 - t) の 1 - に相当します。また、easePolyOut.exponent(2) にも相当します。

easeQuadInOut ​

対称二次イージング。t が 0～0.5 の場合は easeQuadIn を、t が 0.5～1 の場合は easeQuadOut をスケールします。また、easePoly.exponent(2) にも相当します。

easeCubic ​

ソース · easeCubicInOut のエイリアス。

easeCubicIn ​

三次イージング。easePolyIn.exponent(3) に相当します。

easeCubicOut ​

逆三次イージング。easeCubicIn(1 - t) の 1 - に相当します。また、easePolyOut.exponent(3) にも相当します。

easeCubicInOut ​

対称三次イージング。t が 0～0.5 の場合は easeCubicIn を、t が 0.5～1 の場合は easeCubicOut をスケールします。また、easePoly.exponent(3) にも相当します。

easeSin ​

ソース · easeSinInOut のエイリアス。

easeSinIn ​

正弦波イージング。sin(t) を返します。

easeSinOut ​

逆正弦波イージング。easeSinIn(1 - t) の 1 - に相当します。

easeSinInOut ​

対称正弦波イージング。t が 0～0.5 の場合は easeSinIn を、t が 0.5～1 の場合は easeSinOut をスケールします。

easeExp ​

ソース · easeExpInOut のエイリアス。

easeExpIn ​

指数イージング。2 を指数 10 × (t - 1) で累乗します。

easeExpOut ​

逆指数イージング。easeExpIn(1 - t) の 1 - に相当します。

easeExpInOut ​

対称指数イージング。t が 0～0.5 の場合は easeExpIn を、t が 0.5～1 の場合は easeExpOut をスケールします。

easeCircle ​

ソース · easeCircleInOut のエイリアス。

easeCircleIn ​

円形イージング。

easeCircleOut ​

逆円形イージング。easeCircleIn(1 - t) の 1 - に相当します。

easeCircleInOut ​

対称円形イージング。t が 0～0.5 の場合は easeCircleIn を、t が 0.5～1 の場合は easeCircleOut をスケールします。

easeElastic ​

ソース · easeElasticOut のエイリアス。

easeElasticIn ​

ゴムバンドのような弾性イージング。振動の 振幅 と 周期 は構成可能です。指定されていない場合は、それぞれデフォルトで 1 と 0.3 になります。

easeElasticOut ​

逆弾性イージング。elasticIn(1 - t) の 1 - に相当します。

easeElasticInOut ​

対称弾性イージング。t が 0～0.5 の場合は elasticIn を、t が 0.5～1 の場合は elasticOut をスケールします。

easeElastic.amplitude(a) ​

指定された振幅 a を持つ新しい弾性イージングを返します。振幅 a は 1 以上である必要があります。

easeElastic.period(p) ​

指定された周期 p を持つ新しい弾性イージングを返します。

easeBack ​

ソース · easeBackInOut のエイリアス。

easeBackIn ​

予期動作のようなイージング。床から飛び上がる前に膝を曲げるダンサーのようです。オーバーシュートの度合いは設定可能です。指定しない場合、デフォルトは1.70158です。

easeBackOut ​

逆予期動作イージング。1 - easeBackIn(1 - t) と同等です。

easeBackInOut ​

対称的な予期動作イージング。t が 0–0.5 の場合は easeBackIn をスケールし、t が 0.5–1 の場合は easeBackOut をスケールします。

easeBack.overshoot(s) ​

指定されたオーバーシュート s を持つ新しいバックイージングを返します。

easeBounce ​

ソース · easeBounceOut のエイリアス。

easeBounceIn ​

ゴムボールのようなバウンスイージング。

easeBounceOut ​

逆バウンスイージング。1 - easeBounceIn(1 - t) と同等です。

easeBounceInOut ​

対称的なバウンスイージング。t が 0–0.5 の場合は easeBounceIn をスケールし、t が 0.5–1 の場合は easeBounceOut をスケールします。