Javascript 在web上创建js、Tween、Spring、用户交互、可中断的动画，并将其全部混合在旋转木马中

背景故事

我是一名网络开发人员，我几乎可以在网络上做任何事情。当我第一次开始做一些编程时，它是在FlashActionScript3中，当时我14岁，现在我29岁了，但我仍然没有弄明白这一点。我已经决定要把事情弄清楚

目标

使问题具体化

实现一个可以滑动、自动播放、使用“上一步”和“下一步”按钮移动的旋转木马，这些动画中的任何一个都应该是可中断的，并且具有与之相关的速度，但鼠标/手指跟踪除外。我想让它感觉自然，我想让运动的元素感觉它们有重量，它们正在滑动到位。他们需要感觉真实，就像他们可以被触摸一样。 动画需要是附加的，当我改变方向并与之交互时，它需要像人类期望的那样。就像他们在光滑的表面上滑动一块塑料一样。完成后需要将其卡入到位

现在我知道了，一切都是为了展示你的作品。我已经做了很多次了，结果都是一团糟。因此，休战，请给出意见和指示，我将用当前的进展和障碍更新问题。我会制作，然后我会保持更新

我的出发点

概念

因此，我认为我需要考虑一些事情。 我相信有两种类型的动画我需要考虑

Tween和Spring或速度动画（我不知道我在做什么）

接口{
类型：“吐温”|“速度”；
速度：数字；//单位/秒？？？像素
持续时间？：数字；
起始：编号；
至：编号；
开始时间：数字；
缓解：（进度：编号）=>编号
}

思维过程

我想我需要的动画堆栈。所以我需要知道动画是什么时候开始的，它是什么类型的。我需要知道新的动画是应该完全删除所有以前的动画，还是应该叠加在它上面

例如，我可以有一堆各种各样的动画，但如果用户接触了它们，就需要删除它们

我想我需要开始做一些事情，比如放松功能。我希望它有重量，感觉它有惯性

贡献。 你可能无法回答，但却暗示，大脑风暴。我想把它放在床上

---

我承诺！！贡献，但你可以，我会做的工作

我认为这可以通过使用（beta版，不完整的css插值支持）来实现

或者直接使用

tween轴允许在“tween轴”上合并任何数字tween

一旦实例化，我们就可以使用经典的goto函数来更新指定上下文对象上的数字道具

甚至，多个tween轴实例可以更新相同的道具

let axis    = new TweenAxis(
    [
        {
            from    : 0,
            duration: 100,
            target  : "myTargetId",
            easeFn:"easePolyOut", // https://github.com/d3/d3-ease or function
            apply   : {
                value: 200
            }
        },
        {
            from    : 0,
            duration: 100,
            target  : "myTargetId",
            apply   : {
                value: -100
            }
        }
    ]
),

   context = {
        myTargetId: {
            value: 0
        }
    };

console.log(axis.go(.5, context));
//{ myTargetId: { value: 50 } }
console.log(axis.go(.25, context));
//{ myTargetId: { value: 25 } }
console.log(axis.go(.75, context));
//{ myTargetId: { value: 75 } }

---

我认为它可以通过使用（测试版，不完整的css插值支持）来实现

或者直接使用

tween轴允许在“tween轴”上合并任何数字tween

一旦实例化，我们就可以使用经典的goto函数来更新指定上下文对象上的数字道具

甚至，多个tween轴实例可以更新相同的道具

let axis    = new TweenAxis(
    [
        {
            from    : 0,
            duration: 100,
            target  : "myTargetId",
            easeFn:"easePolyOut", // https://github.com/d3/d3-ease or function
            apply   : {
                value: 200
            }
        },
        {
            from    : 0,
            duration: 100,
            target  : "myTargetId",
            apply   : {
                value: -100
            }
        }
    ]
),

   context = {
        myTargetId: {
            value: 0
        }
    };

console.log(axis.go(.5, context));
//{ myTargetId: { value: 50 } }
console.log(axis.go(.25, context));
//{ myTargetId: { value: 25 } }
console.log(axis.go(.75, context));
//{ myTargetId: { value: 75 } }

---

我取得了很大的进步。我仍然在解决一些我需要解决的问题。我会尽快简化它，并把它放在这里。只是为了让我能给一个小的更新。如果希望在用户反转的任何点处平滑过渡，则需要使用贝塞尔曲线。我使用当前速度投影动画的终点（使用缓和函数），然后将其转换为贝塞尔曲线以使动画平滑，我将以适当的形式显示代码以进行解释，这是我使用的第二个缓和函数，我已经取得了很大的进步。我仍然在解决一些我需要解决的问题。我会尽快简化它，并把它放在这里。只是为了让我能给一个小的更新。如果希望在用户反转的任何点处平滑过渡，则需要使用贝塞尔曲线。我使用当前速度投影动画的终点（使用缓和函数），然后将其转换为贝塞尔曲线以使动画平滑，我将以适当的形式显示代码以进行解释，这就是我使用的第二个缓和函数。