我想将一些代码转换为与gsap ^ 2.1一起运行
我尝试阅读文档，但找不到信息，说明为什么该代码无法在较新版本中使用。
这是我要复制的内容，它与gsap 1.6一起运行：
const steamLeft = document.querySelector('#steam-left'),
steamRight = document.querySelector('#steam-right'),
steamMid = document.querySelector('#steam-mid'),
rotate = new TimelineMax({ paused: false, repeat: -1 }),
pulse = new TimelineMax({ paused: false, repeat: -1, yoyo: true }),
rise = new TimelineMax({ paused: false, repeat: -1 })
rotate.to([steamLeft, steamRight, steamMid], 2, {
rotationY: '+=360deg',
transformOrigin: '50% 50%',
ease: Linear.easeOut
})
pulse
.set([steamLeft, steamRight, steamMid], {
opacity: '0',
ease: Linear.easeInOut
})
.to([steamLeft, steamRight, steamMid], 1.5, {
opacity: '.75',
ease: Linear.easeInOut
})
rise.staggerTo(
[steamMid, steamLeft, steamRight],
2,
{ y: '-=50px', ease: Linear.easeOut },
0.5
)body{
background: #99f;
}
svg {
width: 300px;
display: block;
--mug-primary: #fff;
--mug-shadow: #eee;
}
#steam {
opacity: 0.5;
--mug-steam: #eceff0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 1000 1000"
enable-background="new 0 0 1000 1000"
xml:space="preserve"
>
<ellipse
id="mug-shadow"
fill="#00000033"
cx="472.366"
cy="812.197"
rx="218.234"
ry="53.727"
></ellipse>
<path
id="handle"
fill="var(--mug-primary)"
d="M647.587,442.566c-42.537-81.183-106.46,101.597-106.46,182.006
c0,80.41,86.875,210.709,113.873,176.375C681.998,766.614,793.239,783,793.239,627C793.239,445,667.086,479.781,647.587,442.566z
M649,719.255c-13.591-17.432-2.343-85.951,6-166.255c5.653-54.416,104.437-47.338,104.437,74
C759.437,758.47,680.416,759.549,649,719.255z"
></path>
<path
id="mug-inner-shadow"
fill="var(--mug-shadow)"
d="M655,619H286V426.5c0,0,21.866-34.176,184.5-34.176
c151.451,0,184.5,34.176,184.5,34.176V619z"
></path>
<path
id="coffee"
fill="#d0f0c0"
d="M643,639H298V446.5c0,0,20.057-34.176,172.5-34.176c141.961,0,172.5,34.176,172.5,34.176V639z"
></path>
<g id="handle-shadow">
<path
fill="var(--mug-shadow)"
d="M645.592,714.995c0.832,1.067,1.705,2.1,2.602,3.107C635.876,698.981,646.829,631.646,655,553
c3.783-36.415,49.268-45.281,78.949-10.808c-29.466-39.379-78.426-31.293-82.357,6.548
C643.249,629.044,632.001,697.563,645.592,714.995z"
></path>
<path
fill="var(--mug-shadow)"
d="M759.578,506.293c17.745,23.336,30.253,59.145,30.253,116.447c0,156-111.241,139.614-138.239,173.947
c-10.712,13.622-30.85,1.326-51.246-23.485c21.533,27.621,43.346,42.126,54.654,27.745C681.998,766.614,793.239,783,793.239,627
C793.239,566.093,779.109,529.467,759.578,506.293z"
></path>
</g>
<path
id="mug-body"
fill="var(--mug-primary)"
d="M655,807.654c0,0-31.359,43.824-184.5,43.824S286,807.654,286,807.654V426.5
c0,0,41.866,32.557,184.5,32.557S655,426.5,655,426.5V807.654z"
></path>
<g id="steam">
<path
id="steam-left"
ref="steam-left"
fill="var(--mug-steam)"
d="M377.611,203.07c-25.395,8.346-80.709,47.844-41.081,74.058
c44.527,28.808,38.123,33.269-6.917,72.483c23.679-9.33,82.718-49.811,38.063-73.173
C320.997,252.822,338.488,233.276,377.611,203.07C373.292,204.49,370.435,208.611,377.611,203.07z"
></path>
<path
id="steam-right"
ref="steam-right"
fill="var(--mug-steam)"
d="M617.61,203.07c-25.398,8.347-80.704,47.841-41.081,74.058
c44.526,28.807,38.123,33.269-6.916,72.483c23.678-9.33,82.718-49.811,38.063-73.173
C560.995,252.824,578.487,233.273,617.61,203.07C613.291,204.49,610.434,208.611,617.61,203.07z"
></path>
<path
id="steam-mid"
ref="steam-mid"
fill="var(--mug-steam)"
d="M503.39,151c-29.594,10.944-101.875,60.753-51.809,93.649
c11.829,7.624,49.646,13.698,44.947,34.054c-5.715,25.162-36.23,45.828-54.915,60.909c28.3-12.377,103.601-63.641,48.103-92.404
C428.52,216.343,450.766,188.6,503.39,151C497.933,153.018,493.944,157.749,503.39,151z"
></path>
</g>
<g id="rim">
<path
fill="var(--mug-primary)"
d="M470.5,394.612c45.936,0,89.718,3.559,123.282,10.021c40.286,7.756,49.308,16.332,50.961,18.423
c-1.653,2.091-10.675,10.668-50.961,18.424C560.218,447.941,516.436,451.5,470.5,451.5s-89.718-3.559-123.282-10.021
c-40.286-7.756-49.308-16.333-50.961-18.424c1.654-2.091,10.675-10.667,50.961-18.423
C380.782,398.17,424.564,394.612,470.5,394.612 M470.5,384.612c-101.896,0-184.5,17.212-184.5,38.444
c0,21.232,82.604,38.444,184.5,38.444S655,444.288,655,423.056C655,401.824,572.396,384.612,470.5,384.612L470.5,384.612z"
></path>
</g>
</svg>
这是gsap 2.1的结果（代码中没有其他更改）：
const steamLeft = document.querySelector('#steam-left'),
steamRight = document.querySelector('#steam-right'),
steamMid = document.querySelector('#steam-mid'),
rotate = new TimelineMax({ paused: false, repeat: -1 }),
pulse = new TimelineMax({ paused: false, repeat: -1, yoyo: true }),
rise = new TimelineMax({ paused: false, repeat: -1 })
rotate.to([steamLeft, steamRight, steamMid], 2, {
rotationY: '+=360deg',
transformOrigin: '50% 50%',
ease: Linear.easeOut
})
pulse
.set([steamLeft, steamRight, steamMid], {
opacity: '0',
ease: Linear.easeInOut
})
.to([steamLeft, steamRight, steamMid], 1.5, {
opacity: '.75',
ease: Linear.easeInOut
})
rise.staggerTo(
[steamMid, steamLeft, steamRight],
2,
{ y: '-=50px', ease: Linear.easeOut },
0.5
)body{
background: #99f;
}
svg {
width: 300px;
display: block;
--mug-primary: #fff;
--mug-shadow: #eee;
}
#steam {
opacity: 0.5;
--mug-steam: #eceff0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 1000 1000"
enable-background="new 0 0 1000 1000"
xml:space="preserve"
>
<ellipse
id="mug-shadow"
fill="#00000033"
cx="472.366"
cy="812.197"
rx="218.234"
ry="53.727"
></ellipse>
<path
id="handle"
fill="var(--mug-primary)"
d="M647.587,442.566c-42.537-81.183-106.46,101.597-106.46,182.006
c0,80.41,86.875,210.709,113.873,176.375C681.998,766.614,793.239,783,793.239,627C793.239,445,667.086,479.781,647.587,442.566z
M649,719.255c-13.591-17.432-2.343-85.951,6-166.255c5.653-54.416,104.437-47.338,104.437,74
C759.437,758.47,680.416,759.549,649,719.255z"
></path>
<path
id="mug-inner-shadow"
fill="var(--mug-shadow)"
d="M655,619H286V426.5c0,0,21.866-34.176,184.5-34.176
c151.451,0,184.5,34.176,184.5,34.176V619z"
></path>
<path
id="coffee"
fill="#d0f0c0"
d="M643,639H298V446.5c0,0,20.057-34.176,172.5-34.176c141.961,0,172.5,34.176,172.5,34.176V639z"
></path>
<g id="handle-shadow">
<path
fill="var(--mug-shadow)"
d="M645.592,714.995c0.832,1.067,1.705,2.1,2.602,3.107C635.876,698.981,646.829,631.646,655,553
c3.783-36.415,49.268-45.281,78.949-10.808c-29.466-39.379-78.426-31.293-82.357,6.548
C643.249,629.044,632.001,697.563,645.592,714.995z"
></path>
<path
fill="var(--mug-shadow)"
d="M759.578,506.293c17.745,23.336,30.253,59.145,30.253,116.447c0,156-111.241,139.614-138.239,173.947
c-10.712,13.622-30.85,1.326-51.246-23.485c21.533,27.621,43.346,42.126,54.654,27.745C681.998,766.614,793.239,783,793.239,627
C793.239,566.093,779.109,529.467,759.578,506.293z"
></path>
</g>
<path
id="mug-body"
fill="var(--mug-primary)"
d="M655,807.654c0,0-31.359,43.824-184.5,43.824S286,807.654,286,807.654V426.5
c0,0,41.866,32.557,184.5,32.557S655,426.5,655,426.5V807.654z"
></path>
<g id="steam">
<path
id="steam-left"
ref="steam-left"
fill="var(--mug-steam)"
d="M377.611,203.07c-25.395,8.346-80.709,47.844-41.081,74.058
c44.527,28.808,38.123,33.269-6.917,72.483c23.679-9.33,82.718-49.811,38.063-73.173
C320.997,252.822,338.488,233.276,377.611,203.07C373.292,204.49,370.435,208.611,377.611,203.07z"
></path>
<path
id="steam-right"
ref="steam-right"
fill="var(--mug-steam)"
d="M617.61,203.07c-25.398,8.347-80.704,47.841-41.081,74.058
c44.526,28.807,38.123,33.269-6.916,72.483c23.678-9.33,82.718-49.811,38.063-73.173
C560.995,252.824,578.487,233.273,617.61,203.07C613.291,204.49,610.434,208.611,617.61,203.07z"
></path>
<path
id="steam-mid"
ref="steam-mid"
fill="var(--mug-steam)"
d="M503.39,151c-29.594,10.944-101.875,60.753-51.809,93.649
c11.829,7.624,49.646,13.698,44.947,34.054c-5.715,25.162-36.23,45.828-54.915,60.909c28.3-12.377,103.601-63.641,48.103-92.404
C428.52,216.343,450.766,188.6,503.39,151C497.933,153.018,493.944,157.749,503.39,151z"
></path>
</g>
<g id="rim">
<path
fill="var(--mug-primary)"
d="M470.5,394.612c45.936,0,89.718,3.559,123.282,10.021c40.286,7.756,49.308,16.332,50.961,18.423
c-1.653,2.091-10.675,10.668-50.961,18.424C560.218,447.941,516.436,451.5,470.5,451.5s-89.718-3.559-123.282-10.021
c-40.286-7.756-49.308-16.333-50.961-18.424c1.654-2.091,10.675-10.667,50.961-18.423
C380.782,398.17,424.564,394.612,470.5,394.612 M470.5,384.612c-101.896,0-184.5,17.212-184.5,38.444
c0,21.232,82.604,38.444,184.5,38.444S655,444.288,655,423.056C655,401.824,572.396,384.612,470.5,384.612L470.5,384.612z"
></path>
</g>
</svg>
在我的项目中，我使用npm，结果与上面的代码段相同。