缓动函数

最新推荐文章于 2024-11-08 10:44:34 发布

jensonliu

最新推荐文章于 2024-11-08 10:44:34 发布

阅读量1k

点赞数

分类专栏： JS CSS

本文链接：https://blog.csdn.net/qq_38765789/article/details/108833371

版权

参考文章

https://aaron-bird.github.io/2019/03/30/缓动函数(easing%20function)/
https://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/

缓动函数

匀速运动

首先我们来认识一个缓动函数的核心。先以一个匀速运动的函数为例子

function fn(currentTime, startValue, changeValue, duration) {
   
   let x = currentTime / duration;
   return changeValue * x + startValue;
}

坐标轴

*对应到坐标轴上理解

currentTime：x轴上某点(记为点a)，意思是开始运动后到当前的时间
duration：x轴长度，意思是运动的总时长
startValue：y轴起点，意思是起始位置
changeValue：y轴的长度，意思是总移动距离
返回值是点a对应的y轴坐标，（当前运动时间，当前移动距离）.
斜率：运动速度

缓入 ease-in

特点是一开始斜率较小，以 x² 为例
在这里插入图片描述

function easeInQuad(currentTime, startValue, changeValue, duration) {
   
  let x = currentTime / duration;
  return changeValue * x * x + startValue;
}

缓出 ease-out

特点是结束前斜率变小，较为平滑，以-x² + 2x为例
在这里插入图片描述

function easeOutQuad(currentTime, startValue, changeValue, duration) {
   
  let x = currentTime / duration;
  return -changeValue * x * (x- 2) + startValue;
}

缓进缓出 ease-in-out

在这里插入图片描述
与单纯ease-in/ease-out不同的是, ease-in-out需要两个阶段，因此把x归一化到[0,2]区间

easeInOutQuad(currentTime, startValue, changeValue, duration) {
   
  // 把currentTime映射到[0,2]的区间
  // [0,1]为ease-in, [1,2]为ease-out 【含义是ease-in/ease-out开始后经过的时间】
  let x = currentTime / duration / 2;
  
  // 是否过半
  if (currentTime < 1) 
  	// changeValue / 2 是因为ease-in和ease-out各占一半的移动距离
  	return changeValue / 2 * x * x + startValue;

  // 过半了 要变成ease-out
  // 由于[0,1]是ease-in状态，要获取时间在ease-out[1,2]上走过的时间
  x--;
  return -changeValue / 2 * (x * (x - 2) - 1) + startValue;
}