イージング - Siv3D/Reference-JP GitHub Wiki

イージングの基本

EaseIn, EaseOut, EaseInOut 関数に Easing function と時間 [0.0, 1.0] を渡します。
参考（外部サイト） : Easing Function 早見表

# include <Siv3D.hpp>

void Main()
{
	const Vec2 a(80, 240), b(560, 240);

	Vec2 start = a, end = b;

	Stopwatch stopwatch;

	while (System::Update())
	{
		if (Input::MouseL.clicked)
		{
			stopwatch.start();
		}

		const double t = Min(stopwatch.ms() / 1000.0, 1.0);

		const Vec2 pos = Lerp(start, end, EaseInOut(Easing::Quart, t));
		// ↑ を省略した書き方
		//const Vec2 pos = EaseInOut(start, end, Easing::Quart, t);

		RectF(80, 80).setCenter(pos).draw();

		if (t == 1.0)
		{
			stopwatch.reset();

			std::swap(start, end);
		}
	}
}

イージングの種類

# include <Siv3D.hpp>

void Main()
{
	Stopwatch stopwatch;

	while (System::Update())
	{
		if (Input::MouseL.clicked)
		{
			stopwatch.start();
		}
		else if (Input::MouseR.clicked)
		{
			stopwatch.reset();
		}

		const double t = Min(stopwatch.ms() / 1000.0, 1.0);

		Circle(EaseIn(Vec2(20, 20), Vec2(20, 460), Easing::Linear, t), 10).draw();

		Circle(EaseIn(Vec2(40, 20), Vec2(40, 460), Easing::Sine, t), 10).draw();
		Circle(EaseOut(Vec2(60, 20), Vec2(60, 460), Easing::Sine, t), 10).draw();
		Circle(EaseInOut(Vec2(80, 20), Vec2(80, 460), Easing::Sine, t), 10).draw();

		Circle(EaseIn(Vec2(100, 20), Vec2(100, 460), Easing::Quad, t), 10).draw();
		Circle(EaseOut(Vec2(120, 20), Vec2(120, 460), Easing::Quad, t), 10).draw();
		Circle(EaseInOut(Vec2(140, 20), Vec2(140, 460), Easing::Quad, t), 10).draw();

		Circle(EaseIn(Vec2(160, 20), Vec2(160, 460), Easing::Cubic, t), 10).draw();
		Circle(EaseOut(Vec2(180, 20), Vec2(180, 460), Easing::Cubic, t), 10).draw();
		Circle(EaseInOut(Vec2(200, 20), Vec2(200, 460), Easing::Cubic, t), 10).draw();

		Circle(EaseIn(Vec2(220, 20), Vec2(220, 460), Easing::Quart, t), 10).draw();
		Circle(EaseOut(Vec2(240, 20), Vec2(240, 460), Easing::Quart, t), 10).draw();
		Circle(EaseInOut(Vec2(260, 20), Vec2(260, 460), Easing::Quart, t), 10).draw();

		Circle(EaseIn(Vec2(280, 20), Vec2(280, 460), Easing::Quint, t), 10).draw();
		Circle(EaseOut(Vec2(300, 20), Vec2(300, 460), Easing::Quint, t), 10).draw();
		Circle(EaseInOut(Vec2(320, 20), Vec2(320, 460), Easing::Quint, t), 10).draw();

		Circle(EaseIn(Vec2(340, 20), Vec2(340, 460), Easing::Expo, t), 10).draw();
		Circle(EaseOut(Vec2(360, 20), Vec2(360, 460), Easing::Expo, t), 10).draw();
		Circle(EaseInOut(Vec2(380, 20), Vec2(380, 460), Easing::Expo, t), 10).draw();

		Circle(EaseIn(Vec2(400, 20), Vec2(400, 460), Easing::Circ, t), 10).draw();
		Circle(EaseOut(Vec2(420, 20), Vec2(420, 460), Easing::Circ, t), 10).draw();
		Circle(EaseInOut(Vec2(440, 20), Vec2(440, 460), Easing::Circ, t), 10).draw();

		Circle(EaseIn(Vec2(460, 20), Vec2(460, 460), Easing::Back, t), 10).draw();
		Circle(EaseOut(Vec2(480, 20), Vec2(480, 460), Easing::Back, t), 10).draw();
		Circle(EaseInOut(Vec2(500, 20), Vec2(500, 460), Easing::Back, t), 10).draw();

		Circle(EaseIn(Vec2(520, 20), Vec2(520, 460), Easing::Elastic, t), 10).draw();
		Circle(EaseOut(Vec2(540, 20), Vec2(540, 460), Easing::Elastic, t), 10).draw();
		Circle(EaseInOut(Vec2(560, 20), Vec2(560, 460), Easing::Elastic, t), 10).draw();

		Circle(EaseIn(Vec2(580, 20), Vec2(580, 460), Easing::Bounce, t), 10).draw();
		Circle(EaseOut(Vec2(600, 20), Vec2(600, 460), Easing::Bounce, t), 10).draw();
		Circle(EaseInOut(Vec2(620, 20), Vec2(620, 460), Easing::Bounce, t), 10).draw();
	}
}

イージングユーティリティ

# include <Siv3D.hpp>

void Main()
{
	EasingController<Vec2> easing(
		Vec2(80, 100),	// 始点
		Vec2(560, 100),	// 終点
		Easing::Quint,	// イージング関数
		1000			// 時間
		);

	while (System::Update())
	{
		if (Input::MouseL.clicked)
		{
			easing.start();
		}

		Circle(easing.base(), 20).draw(Palette::Orange);

		Circle(easing.easeInOut(), 20).moveBy(0, 80).draw();

		Circle(easing.easeIn(), 20).moveBy(0, 160).draw();

		Circle(easing.easeOut(), 20).moveBy(0, 240).draw();
	}
}
⚠️ **GitHub.com Fallback** ⚠️