Javascript 速度转换

我一直在制作一些Velocity JS动画，并尝试在移动中学习轻松。我的JavaScript相当初级，因此遇到了一些障碍。这本应该是一个学习练习，表面上看起来很琐碎，但我不太明白该怎么做

设计师使用Edge animate传递了正在工作的动画原型。我正在尝试将图像和GSAP代码转换为SVG和Velocity JS。该项目已将Velocity JS用于其他内容，因此仅因为Edge用于一个动画，就没有必要包含其他库

该动画是一个淡入的烧杯，然后两个气泡使用自定义缓和从烧杯顶部冒出

烧杯的SVG在小提琴上，生成的代码GSAP如下：

“泡沫”：{
版本：“6.0.0”，
最小兼容外翻：“5.0.0”，
构建：“6.0.0.400”，
scaleToFit：“无”，
centerStage：“无”，
resizeInstances:false，
内容：{
dom:[
{
转换：[]、[]、[]、['0.5'、['0.5']]，
边界半径：['50%，'50%，'50%，'50%，'50%，
id:'Bubble_01'，
不透明度：“0”，
rect:['-3px'，'-2px'，'36px'，'36px'，'auto'，'auto']，
笔划：[2，'rgba（234239240，0）'，'solid']，
键入：“椭圆”，
自动定向：“正确”，
填充：['rgba（255255,1.00）]
},
{
转换：[]、[]、[]、['0.75'、['0.75']]，
边界半径：['50%，'50%，'50%，'50%，'50%，
id:'Bubble_02'，
不透明度：“0”，
矩形：['3px'，'-2px'，'29px'，'29px'，'auto'，'auto']，
笔划：[2，'rgba（234239240，0）'，'solid']，
键入：“椭圆”，
自动定向：“正确”，
填充：['rgba（255255,1）]
}
],
风格：{
“${symbolSelector}”：{
rect:[null，null，'40px'，'40px']
}
}
},
时间线：{
持续时间：4000，
自动播放：对，
数据：[
[
“eid2211”，
“不透明度”，
581,
919,
“easeOutQuad”，
“${Bubble_02}”，
'0',
'0.5'
],
[
“eid2210”，
“不透明度”，
1500,
1000,
“easeOutQuad”，
“${Bubble_02}”，
'0.5',
'0'
],
[
“eid2230”，
“不透明度”，
90,
160,
“easeOutQuad”，
“${Bubble_01}”，
'0',
'0.49659030720339'
],
[
“eid2231”，
“不透明度”，
250,
750,
“easeOutQuad”，
“${Bubble_01}”，
'0.4965899884700775',
'0.5'
],
[
“eid2232”，
“不透明度”，
1000,
1000,
“easeOutQuad”，
“${Bubble_01}”，
'0.5',
'0'
],
[
“eid2201”，
“地点”，
0,
2000,
“easeOutQuad”，
“${Bubble_01}”，
[[22.23, 22.57, 0, 0, 0, 0,0],[37.23, -71.23, -75.36, -182.55, -64.78, -156.91,99.63],[39.24, -257.75, -17.9, -162.49, -20.57, -186.71,288.05],[-15.3, -365.28, 0, 0, 0, 0,410.23]]
],
[
“eid2203”，
“地点”，
500,
2000,
“easeOutQuad”，
“${Bubble_02}”，
[[23.29, 18.78, 0, 0, 0, 0,0],[58.43, -65.15, -99.73, -231.78, -45.91, -106.69,95.65],[57.39, -269.81, 85.4, -51.39, 102.76, -61.84,310.38],[66.53, -365.66, 0, 0, 0, 0,411.13]]
]
]
}
},

我的问题是：这两个库之间是否可能进行转换？我已经在这上面花了一天的时间，不想再浪费时间去做一些行不通的事情

我不是在寻找一个工具来处理这种转换，因为这是一个学习练习（我认为我已经咬得太多了，我无法咀嚼），而是更多的一个示例或解释，关于如何将GSAP时间线或甚至只是自定义的放松部分转换为Velocity JS代码

非常感谢您对此的任何意见

---

非常感谢

我不知道有什么东西可以简单地直接转换，但是如果有一个特定的部分你正在努力制作动画，那么也许可以把重点放在这个问题上。你可以展示一下Edge animate的输出是什么样的吗？因为，可能您不需要尝试将代码转换为速度，而是像尝试从头开始制作动画一样处理它？我的拙见。。。。如果生成的动画需要一个接一个的动画序列，那么我完全建议使用GSAP，因为这个工具提供了一些非常好的开箱即用的功能。我不知道有什么东西可以简单地进行直接转换，但是如果有一个特定的部分你正在努力制作动画，那么可能

<pre>

    "Bubbles": {
        version: "6.0.0",
        minimumCompatibleVersion: "5.0.0",
        build: "6.0.0.400",
        scaleToFit: "none",
        centerStage: "none",
        resizeInstances: false,
        content: {
            dom: [
                {
                    transform: [[], [], [], ['0.5', '0.5']],
                    borderRadius: ['50%', '50%', '50%', '50%'],
                    id: 'Bubble_01',
                    opacity: '0',
                    rect: ['-3px', '-2px', '36px', '36px', 'auto', 'auto'],
                    stroke: [2, 'rgba(234, 239, 240, 0)', 'solid'],
                    type: 'ellipse',
                    autoOrient: 'true',
                    fill: ['rgba(255,255,255,1.00)']
                },
                {
                    transform: [[], [], [], ['0.75', '0.75']],
                    borderRadius: ['50%', '50%', '50%', '50%'],
                    id: 'Bubble_02',
                    opacity: '0',
                    rect: ['3px', '-2px', '29px', '29px', 'auto', 'auto'],
                    stroke: [2, 'rgba(234, 239, 240, 0)', 'solid'],
                    type: 'ellipse',
                    autoOrient: 'true',
                    fill: ['rgba(255,255,255,1)']
                }
            ],
            style: {
                '${symbolSelector}': {
                    rect: [null, null, '40px', '40px']
                }
            }
        },
        timeline: {
            duration: 4000,
            autoPlay: true,
            data: [
                [
                    "eid2211",
                    "opacity",
                    581,
                    919,
                    "easeOutQuad",
                    "${Bubble_02}",
                    '0',
                    '0.5'
                ],
                [
                    "eid2210",
                    "opacity",
                    1500,
                    1000,
                    "easeOutQuad",
                    "${Bubble_02}",
                    '0.5',
                    '0'
                ],
                [
                    "eid2230",
                    "opacity",
                    90,
                    160,
                    "easeOutQuad",
                    "${Bubble_01}",
                    '0',
                    '0.49659030720339'
                ],
                [
                    "eid2231",
                    "opacity",
                    250,
                    750,
                    "easeOutQuad",
                    "${Bubble_01}",
                    '0.4965899884700775',
                    '0.5'
                ],
                [
                    "eid2232",
                    "opacity",
                    1000,
                    1000,
                    "easeOutQuad",
                    "${Bubble_01}",
                    '0.5',
                    '0'
                ],
                [
                    "eid2201",
                    "location",
                    0,
                    2000,
                    "easeOutQuad",
                    "${Bubble_01}",
                    [[22.23, 22.57, 0, 0, 0, 0,0],[37.23, -71.23, -75.36, -182.55, -64.78, -156.91,99.63],[39.24, -257.75, -17.9, -162.49, -20.57, -186.71,288.05],[-15.3, -365.28, 0, 0, 0, 0,410.23]]
                ],
                [
                    "eid2203",
                    "location",
                    500,
                    2000,
                    "easeOutQuad",
                    "${Bubble_02}",
                    [[23.29, 18.78, 0, 0, 0, 0,0],[58.43, -65.15, -99.73, -231.78, -45.91, -106.69,95.65],[57.39, -269.81, 85.4, -51.39, 102.76, -61.84,310.38],[66.53, -365.66, 0, 0, 0, 0,411.13]]
                ]
            ]
        }
    },

</pre>