GSAP到速度转换

Question

我一直致力于一些Velocity JS动画，并试图在旅途中学习宽松。我的JavaScript相当简陋，所以我遇到了一些绊脚石。这应该是一次学习练习，从表面上看似乎相当微不足道，但我不能完全掌握该做什么。

设计师使用Edge animate传递了一个正在运行的动画原型。我试图将其从图像和GSAP代码转换为SVG和Velocity JS。该项目已经将Velocity JS用于其他东西，因此包含一个不同的库是没有意义的，因为这是Edge用于一个动画的。

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

烧杯的SVG是小提琴，GSAP产生的代码如下：http://jsfiddle.net/darker_heroe/9zjrq0zq/

<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>

我的问题是：两个库之间是否可以进行转换？我已经花了一天时间在这上面，并且不再浪费时间浪费在尝试做一些不起作用的事情上。

我没有找工具来处理这种转换，因为这是一个学习练习（我认为我咬的比我能咀嚼的多），但更多的例子或解释我将如何将GSAP时间轴甚至自定义缓动部分转换为Velocity JS代码。

真的很感激对此的任何意见。

非常感谢