anime.js将路径变形为彼此不起作用

时间:2018-10-31 21:43:35

标签: javascript animation svg frontend anime.js

我正在尝试将2条路径变形为彼此,我在Illustrator中创建了2条“ blob”路径,并提取了每条路径的d属性。我有这样的东西:

anime({
       targets: 'path',
      d: [
            {value: "M90,50c-3,8-0.6,20.3-7,26c-9,8-16,13-28,14c-11.8,1-28-9-34.8-13.3c-8-5.1-13.4-17-10.2-26.7c4-12,6-19.8,13-27c7.3-7.5,15.7-13,27-13c10.7,0,18.8,6.3,27.5,11C85,25,94,39.3,90,50z"},
            {value: "M90,50c0,9.3-3.2,17.8-8.5,24.6C74.2,84,62.8,90,50,90c-11.8,0-22.5-5.1-29.8-13.3C13.9,69.6,10,60.3,10,50c0-10.8,4.3-20.6,11.3-27.8C28.6,14.7,38.7,10,50,10c10.7,0,20.3,4.2,27.5,11C85.2,28.3,90,38.6,90,50z"}
        ],
        easing: 'easeOutQuad',
        duration: 5000,            
        loop: true
})

我希望他们像这支笔一样互相变形:

https://codepen.io/kirillov/pen/ddMLeG

但是相反,我得到了一个非常奇怪的效果:

https://codepen.io/anon/pen/vVoLbQ

0 个答案:

没有答案