动画曲线 EaseIn | EaseOut |EaseInOut 数学模型分析

最新推荐文章于 2024-03-30 09:54:30 发布
最新推荐文章于 2024-03-30 09:54:30 发布
阅读量1.6w 收藏 5
点赞数
分类专栏： Algorithm 文章标签： function input c fun div each
 
  1. #define pow2(x) ((x)*(x))
  2. #define pow3(x) ((x)*(x)*(x))
  4. // assuming :
  5. // t is a value between 0 and 1
  6. // b is an offset
  7. // c is the height
  8. public double easeIn (double t, double b, double c) {
  9.   return c*pow3(t) + b;
  10. }
  12. public double easeOut (double t, double b, double c) {
  13.   return c*(pow3(t-1) + 1) + b;
  14. }
  16. public double easeInOut (double t, double b, double c) {
  17. if ( (t*2) < 1)
  18.   return c/2*pow3(t*2) + b;
  19. else
  20.   return c/2*(pow3(t*2-2) + 2) + b;
  21. }

一套tween算法代码 : http://monw3c.blogbus.com/logs/57106239.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Tween</title>
</head>
<body>
<div style="padding-left:50px;">
  <div style="position:relative; border:1px solid #000000; width:550px; height:50px;">
    <div id="idMove" style="width:50px; height:50px; background:#930; position:absolute;"></div>
  </div>
  <div style="position:relative;width:550px;height:200px; margin-top:50px;">
    <div id="idChart" style="border:1px solid #000;height:200px;"> </div>
    <div id="idLine" style="position:absolute;top:0;left:0;height:200px;width:1px;background:#000;"></div>
  </div>
</div>
<div>
  <p> Tween类型： <br />
    <label>
      <input name="vTween" type="radio" value="Linear" checked="checked" />
      Linear </label>
    <label>
      <input name="vTween" type="radio" value="Quad" />
      Quadratic </label>
    <label>
      <input name="vTween" type="radio" value="Cubic" />
      Cubic </label>
    <label>
      <input name="vTween" type="radio" value="Quart" />
      Quartic </label>
    <label>
      <input name="vTween" type="radio" value="Quint" />
      Quintic </label>
    <label>
      <input name="vTween" type="radio" value="Sine" />
      Sinusoidal </label>
    <br />
    <label>
      <input name="vTween" type="radio" value="Expo" />
      Exponential </label>
    <label>
      <input name="vTween" type="radio" value="Circ" />
      Circular </label>
    <label>
      <input name="vTween" type="radio" value="Elastic" />
      Elastic </label>
    <label>
      <input name="vTween" type="radio" value="Back" />
      Back </label>
    <label>
      <input name="vTween" type="radio" value="Bounce" />
      Bounce </label>
  </p>
  <p> ease类型： <br />
    <label>
      <input name="vEase" type="radio" value="easeIn" checked="checked" />
      easeIn </label>
    <label>
      <input name="vEase" type="radio" value="easeOut" />
      easeOut </label>
    <label>
      <input name="vEase" type="radio" value="easeInOut" />
      easeInOut </label>
  </p>
  <input id="idSpeed" type="button" value="减慢速度" />
  <input id="idRun" type="button" value=" Run " />
</div>
<script>
/*
算法来源：http://www.robertpenner.com/easing/
*/
var Tween = {
	Linear: function(t,b,c,d){ return c*t/d + b; },
	Quad: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t + b;
		},
		easeOut: function(t,b,c,d){
			return -c *(t/=d)*(t-2) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t + b;
			return -c/2 * ((--t)*(t-2) - 1) + b;
		}
	},
	Cubic: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return c*((t=t/d-1)*t*t + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t + b;
			return c/2*((t-=2)*t*t + 2) + b;
		}
	},
	Quart: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return -c * ((t=t/d-1)*t*t*t - 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
			return -c/2 * ((t-=2)*t*t*t - 2) + b;
		}
	},
	Quint: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return c*((t=t/d-1)*t*t*t*t + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
			return c/2*((t-=2)*t*t*t*t + 2) + b;
		}
	},
	Sine: {
		easeIn: function(t,b,c,d){
			return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
		},
		easeOut: function(t,b,c,d){
			return c * Math.sin(t/d * (Math.PI/2)) + b;
		},
		easeInOut: function(t,b,c,d){
			return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
		}
	},
	Expo: {
		easeIn: function(t,b,c,d){
			return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
		},
		easeOut: function(t,b,c,d){
			return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if (t==0) return b;
			if (t==d) return b+c;
			if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
			return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
		}
	},
	Circ: {
		easeIn: function(t,b,c,d){
			return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
		},
		easeOut: function(t,b,c,d){
			return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
			return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
		}
	},
	Elastic: {
		easeIn: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		},
		easeOut: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
		},
		easeInOut: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
			return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
		}
	},
	Back: {
		easeIn: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			return c*(t/=d)*t*((s+1)*t - s) + b;
		},
		easeOut: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		},
		easeInOut: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158; 
			if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
			return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
		}
	},
	Bounce: {
		easeIn: function(t,b,c,d){
			return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
		},
		easeOut: function(t,b,c,d){
			if ((t/=d) < (1/2.75)) {
				return c*(7.5625*t*t) + b;
			} else if (t < (2/2.75)) {
				return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
			} else if (t < (2.5/2.75)) {
				return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
			} else {
				return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
			}
		},
		easeInOut: function(t,b,c,d){
			if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
			else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
		}
	}
}

//

var $ = function (id) {
	return "string" == typeof id ? document.getElementById(id) : id;
};

var Each = function(list, fun){
	for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

//

var fun, iChart = 550, iDuration = 100;

function Move(){
	var oM = $("idMove").style, oL = $("idLine").style, t=0, c=500, d=iDuration;
	oM.left=oL.left="0px"; clearTimeout(Move._t);
	function _run(){
		if(t<d){
			t++;
			oM.left = Math.ceil(fun(t,0,c,d)) + "px";
			oL.left = Math.ceil(Tween.Linear(t,0,iChart,d)) + "px";
			Move._t = setTimeout(_run, 10);
		}else{
			oM.left = c + "px";
			oL.left = iChart + "px";
		}
	}
	_run();
}



function Chart(){
	var a = [];
	for (var i = 0; i < iChart; i++) {
		a.push('<div style="background-color:#f60;font-size:0;width:3px;height:3px;position:absolute;left:' + (i-1) + 'px;top:' + (Math.ceil(fun(i,200,-200,iChart))) + 'px;"><\/div>');
	}
	$("idChart").innerHTML = a.join("");
}



var arrTween = document.getElementsByName("vTween");
var arrEase = document.getElementsByName("vEase");

Each(arrTween, function(o){ o.onclick = function(){ SetFun(); Chart(); } })
Each(arrEase, function(o){ o.onclick = function(){ SetFun(); Chart(); } })

function SetFun(){
	var sTween, sEase;
	Each(arrTween, function(o){ if(o.checked){ sTween = o.value; } })
	Each(arrEase, function(o){ if(o.checked){ sEase = o.value; } })
	fun = sTween == "Linear" ? Tween.Linear : Tween[sTween][sEase];
}

$("idRun").onclick = function(){ SetFun(); Chart(); Move(); }

$("idSpeed").onclick = function(){
	if(iDuration == 100){
		iDuration = 500; this.value = "加快速度";
	}else{
		iDuration = 100; this.value = "减慢速度";
	}
}
</script>
</body>
</html>

算法分析 ： 

http://www.cnblogs.com/mrsunny/archive/2011/06/21/2086080.html




jebe7282
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
缓动函数（EaseAction）曲线一览图
09-12
cocos2d 里面的 CCEaseAction：CCEaseSineIn, CCEaseBackIn, CCEaseBounceIn, ....各种缓动样式都在这里面，方便直观查看他们的样式
沿曲线速率运动Demo
11-01 662
Tween Tween类型： Linear Quadratic Cubic Quartic Quintic
探索Cocos-Lua：一款轻量级的游戏开发框架
最新发布
gitblog_00040的博客
03-30 515
探索Cocos-Lua：一款轻量级的游戏开发框架 项目地址:https://gitcode.com/zhongfq/cocos-lua Cocos-Lua 是一个基于Cocos2d-x游戏引擎的脚本化开发工具，它将强大的C++底层与易学易用的Lua脚本语言相结合，为开发者提供了一种高效、轻量且灵活的游戏开发方式。在这个项目中，我们可以找到完整的API文档、示例代码和社区支持，帮助我们快速上手并创建...
缓动函数easeInout
weixin_51364599的博客
10-12 1万+
easeIn函数 function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } 参数： curtime 当前时间,，begin 开始的位置,，end 结束的位置,，duration 动画.
Unity，C#版的动画曲线，Tween：EaseIn，EaseOut，EaseInOut（编程语言翻译版本）
神一般的狄狄的小黑屋
03-11 1080
原文地址： https://blog.csdn.net/jebe7282/article/details/7521067/ 原因是因为现在在Unity里用曲线，要不就自己AnimationCurve自己扭一个曲线出来。要不就下载插件。然鹅，插件都封装了DLL， 我只用曲线，也不需要其他功能，买个插件岂不是浪费(不喜欢用盗版)。 找到一篇不是C#的tween算法，于是进行一波翻译。 public class Tween { public static float GetTime(float time, fl
ease-out
只作为个人备忘录
12-03 631
w3c
javascript动画算法实例分析
10-23
例如，`Quad.easeIn`函数表示二次方缓动的 EaseIn 效果，其四个参数`t`（当前时间）、`b`（初始值）、`c`（变化量）、`d`（持续时间）共同决定动画的当前位置。通过调整这些参数，开发者可以精确地控制动画的行为。 ...
timing-function:动画的缓动函数和贝塞尔曲线
07-04
计时功能用于缓动函数和贝塞尔曲线的简单 API安装使用 npm 安装： npm install timing-function用法 var t = require ( 'timing-function' ) ;// choose any timing functionvar func = t .... get ( 'sine.easeIn
tween.js缓动补间动画算法示例
10-18
tween.js提供了一些预定义的缓动效果，如Linear（线性）、Quad（二次方）、Cubic（三次方）和Quart（四次方）等，分别包含easeIn（加速）、easeOut（减速）和easeInOut（先加速后减速）三种模式。这些缓动函数会根据...
js学习心得_一个简单的动画库封装tween.js
01-19
具体代码如下： ~function(){ var myEffect = { ... easeIn: function(t,b,c,d){ return c*(t/=d)*t + b; }, easeOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; }, easeInOut: funct
html5 strongeaseinout,【html5】缓动函数在动画中的应用
weixin_36371906的博客
06-19 312
缓动类型：Linear：无缓动效果Quadratic：二次方的缓动(t^2)Cubic：三次方的缓动(t^3)Quartic：四次方的缓动(t^4)Quintic：五次方的缓动(t^5)Sinusoidal：正弦曲线的缓动(sin(t))Exponential：指数曲线的缓动(2^t)Circular：圆形曲线的缓动(sqrt(1-t^2))Elastic：指数衰减的正弦曲线缓动超过范围的三次方缓...
一种ease in out 的算法
weixin_34365635的博客
04-05 402
偶尔在一本书上看到的，实现动画的算法，感觉挺靠谱。 float QuadraticEaseInOut(float t, float start, float end) { float middle = (start + end) / 2; t = 2 * t; if (t <= 1) return LinearTween(t * t, start, middle);...
CSS 过度中ease与ease-in-out的区别（ease曲线）
u011143548的博客
05-13 1万+
问题： 最近在学CSS中的过渡动画，有一个疑问：就是ease和ease-in-out，描述都是两头快中间慢。我想着TM不是重复了么。有啥区别啊？？？ 于是就开始网上各种搜他们的区别。发现还是有其他同学在问这个问题。但是找了好大一圈看到的内容大多数都是下面这样。可以说是毫无收获。 最后想找一下曲线，看看曲线估计就能知道两者的区别了，结果找了一大圈都没找到。浪费一下午时间，最终终于黄天不负苦心人让我找到了。 linear： 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1
unity中的缓动插值曲线，Easing Curves的那些事
勥小透明
10-16 1727
关键时刻，需要时总是找不到，备份一下 http://robertpenner.com/easing/easing_demo.html
tween缓动画的基本算法
huhudeni的博客
07-02 909
笔者在做canvas的游戏框架的时候遇到了动画的相关算法问题 下面就是通常使用的一些 动画的算法 可以给大家一些参考 下面是相关的变量 这个是示意图 /* * t: current time（当前时间）； * b: beginning value（初始值）； * c: change in value（变化量）； * d: duration（持续时间）。 */ Linear：线性...
Flutter绘制指南09-动画曲线和方法
title_martin的博客
06-22 1240
代码实现 2. Flutter所有内置的曲线效果
缓动函数
liuj4 | 自娱自乐
09-27 898
参考文章 https://aaronbird.github.io/2019/03/30/%E7%BC%93%E5%8A%A8%E5%87%BD%E6%95%B0(easing%20function)/ https://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/ 缓动函数 匀速运动 首先我们来认识一个缓动函数的核心。先以一个匀速运动的函数为例子 function fn(currentTime, startV
动画缓冲或叫缓动函数（Animation Easing）
热门推荐
蝈蝈俊.net
03-17 1万+
之前的博客我介绍过如何做一个动画，以及渐变风格动画，关键帧动画。我们如果仅仅使用这些知识做一个模拟现实的动画，仍然是比较复杂的，比如：我们要实现一个篮球掉下再弹起，再掉下，再弹起的动画。或者我们要实现一个类似钟摆的动画效果，它需要我们去研究物理学，数学的知识，Silverlight 3 内置了11中Animation Easing，它可以让我们更容易的实现一些常见的动画效果。 这内置的11种An
Unity，C#版的动画曲线，Tween：EaseIn，EaseOut，EaseInOut（语法逻辑整理版本,含测试代码）
神一般的狄狄的小黑屋
03-11 1797
前篇：Unity，C#版的动画曲线，Tween：EaseIn，EaseOut，EaseInOut（编程语言翻译版本） https://blog.csdn.net/qq_37776196/article/details/114667670 整理了语法和逻辑，拆分了会让人难以理解的连写代码。 我是很讨厌连写代码的， 大量的三元运算和一行代码中多个赋值操作。 下面再附送一段测试代码 public class Tween { public static float GetTime(float time, floa
解释下面这段代码Sine: { easeIn: function(t,b,c,d){ return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t,b,c,d){ return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t,b,c,d){ return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; } },
06-08
这段代码是一个 JavaScript 对象字面量，其中包含三个不同的函数：easeIn、easeOut 和 easeInOut，它们都用于执行缓动函数，基于不同的数学函数来实现不同的缓动效果。 其中，easeIn 函数使用了余弦函数来实现缓动效果，它的参数分别为 t（当前时间）、b（起始值）、c（变化量）和 d（持续时间）。 easeOut 函数则使用正弦函数来实现缓动效果，它的参数与 easeIn 函数相同。 而 easeInOut 函数则使用了一种更复杂的数学函数，结合了余弦函数和指数函数，以实现更平滑的缓动效果。同样，它的参数也与前两个函数相同。 这些缓动函数经常用于动画效果中，以实现从一个状态到另一个状态的平滑过渡。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值