AEJoy —— 表达式之归位(复位)模拟详解【JS】

简介: AEJoy —— 表达式之归位(复位)模拟详解【JS】

效果图

归位(back)

205cc42b667597b0b20427e4d98eb92c.gif

表达式代码与注释

var s = 1.70158; ///< 用于 "归位" 的超越量
/// @note 归位函数
function outBack(t, b, c, d) {
    if (s == null)
        s = 1.70158;
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}
/// @note 实际调用弹性函数的缓动函数
function easeAndWizz() {
    var n = 0;
    /// @note 确保关键帧帧数是大于 0 的
    if (numKeys > 0) {
        n = nearestKey(time).index; ///< 获取最近的关键帧索引
        if (key(n).time > time) { ///< 如果最近的关键帧所处时间在当前时间之后(即时间还没到)
            n--; ///< 则取前一个关键帧的索引
        }
    }
    try {
        /// @note 前后两个关键帧
        var key1 = key(n);
        var key2 = key(n + 1);
    } catch (e) {
        return null;
    }
    /// @note 确定关键帧需要的数据维度
    var dim = 1; ///< 该属性至少是一维的
    try {
        key(1)[1]; ///< 数据有第二维度
        dim = 2;
        key(1)[2]; ///< 数据有第三维度
        dim = 3;
    } catch (e) { }
    t = time - key1.time; ///< 当前时间和前一个关键帧的时间差
    d = key2.time - key1.time; ///< 前后俩关键帧的时间差
    /// @note 计算关键帧上的属性,用于后期的弹性计算
    /// 一维
    sX = key1[0];
    eX = key2[0] - key1[0];
    /// @note 二维
    if (dim >= 2) {
        sY = key1[1];
        eY = key2[1] - key1[1];
        /// @note 三维
        if (dim >= 3) {
            sZ = key1[2];
            eZ = key2[2] - key1[2];
        }
    }
    if ((time < key1.time) || (time > key2.time)) {
        return value;
    } else {
        /// @note 进行归位计算
        val1 = outBack(t, sX, eX, d);
        /// @note 同样分为三个维度进行计算
        switch (dim) {
            case 1:
                return val1;
                break;
            case 2:
                val2 = outBack(t, sY, eY, d);
                return [val1, val2];
                break;
            case 3:
                val2 = outBack(t, sY, eY, d);
                val3 = outBack(t, sZ, eZ, d);
                return [val1, val2, val3];
                break;
            default:
                return null;
        }
    }
}
(easeAndWizz() || value);
目录
相关文章
|
6月前
|
JavaScript 前端开发 安全
JavaScript中的循环控制:while、do-while与for详解
【4月更文挑战第7天】本文探讨JavaScript的三种主要循环结构:while、do-while和for。while循环在满足条件时执行代码块,注意避免无限循环;do-while循环至少执行一次,适合先执行后判断的场景;for循环结合初始化、条件和迭代,适合遍历。理解每种循环的特点和适用场景,结合编程技巧,如使用break和continue,选择合适的循环方式,能提升代码效率和可读性。记得关注循环性能和避免不必要的计算。
81 0
|
6月前
|
JavaScript
在循环内错误使用函数定义(js的问题)
在循环内错误使用函数定义(js的问题)
34 0
|
JavaScript
JS输出、获取元素,变量,事件组成,流程控制,对象,函数
JS输出、获取元素,变量,事件组成,流程控制,对象,函数
|
6月前
|
JavaScript
JS中几种循环方式
JS中几种循环方式
32 0
|
JavaScript
JS——流程控制,函数,数组
JS——流程控制,函数,数组
|
JavaScript
js计时器能做到精确及时吗?
js计时器能做到精确及时吗?
|
JavaScript 前端开发
js常规的循环方法
1.for 循环:最常用的一种循环方法,可以指定循环的起始值、结束值和步长。
67 0
|
JavaScript
jquery实现状态灯转换的注意事项
jquery实现状态灯转换的注意事项
40 0
|
JavaScript Go 索引
你不知道的JS循环中断
你知道 JS 中断循环有哪些吗?
193 0
你不知道的JS循环中断
|
JavaScript
js输入输出语句
js输入输出语句
93 0
js输入输出语句