Css 如何使用Greensock缩放和死记硬背图像?
我正在制作一个绕着一个圆旋转的图像。当我的图像围绕圆圈旋转时,我希望它随着旋转而增长。我正在使用中所示的示例Css 如何使用Greensock缩放和死记硬背图像?,css,gsap,Css,Gsap,我正在制作一个绕着一个圆旋转的图像。当我的图像围绕圆圈旋转时,我希望它随着旋转而增长。我正在使用中所示的示例 TweenMax.to(['#logo'],10,{bezier:[ {x:“250px”,y:“-40px”}, {x:“500px”,y:“250px”}, {x:“250px”,y:“500px”}, {x:“0px”,y:“250px”}, {x:“0px”,y:“0px”}, ],repet:2,ease:Linear.easeNone}) 正文{ 背景色:#fff; }
TweenMax.to(['#logo'],10,{bezier:[
{x:“250px”,y:“-40px”},
{x:“500px”,y:“250px”},
{x:“250px”,y:“500px”},
{x:“0px”,y:“250px”},
{x:“0px”,y:“0px”},
],repet:2,ease:Linear.easeNone})代码>
正文{
背景色:#fff;
}
#标志{
位置:绝对位置;
左:0;
排名:0;
}
.圆圈{
位置:相对位置;
宽度:500px;
高度:500px;
边框:1px实心#000;
边界半径:50%;
保证金:0自动;
}
要使用“bezier”属性,您需要包含morph gsap插件。
我还发现了一些括号错误和“repet”。
请记住,仅当您要为多个不同的元素设置动画时,才需要元素的[]选择器
我还认为不能在bezier属性内更改比例,我还建议使用pathDataToBezier来获取路径,而不是硬编码
希望能有帮助,gsap这很有趣。
TweenMax.to('#logo', 10, {bezier:{
{x:"250px",y:"-40px"},
{x:"500px",y:"250px"},
{x:"250px",y:"500px"},
{x:"0px",y:"250px"},
{x:"0px",y:"0px"},
}, scale: 0.8, repeat:2,ease:Linear.easeNone});