GSAP做的轨道运动动画 - 踏得网

gsap,轨道

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1990
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var R = 290,
    dur = 7,
    totalCount = 3, // Try to change "totalCount" to for example 7 or even 30 :D
    Ease = Linear.easeNone; // dont forget to change ease type, for example Expo.easeOut

for (var i = totalCount - 1; i--;) {
    var cloneG = document.querySelector('.g1').cloneNode();
    document.querySelector('svg').appendChild(cloneG)
};

var tl = new TimelineLite()
    .staggerTo(".g1", dur, {
        bezier: {
            curviness: 1.5,
            values: [{
                x: 0,
                y: 0
            }, {
                x: R / 2,
                y: R / 2
            }, {
                x: 0,
                y: R
            }, {
                x: -R / 2,
                y: R / 2
            }, {
                x: 0,
                y: 0
            }]
        },
        rotation: 1080,
        repeat: -1,
        ease: Ease,
        transformOrigin: 'center'
    }, dur / totalCount)
    .to("svg", dur * 2, {
        rotation: -360,
        ease: Power0.easeNone,
        repeat: -1
    }, 0)
    .time(dur); // you can remove .time(dur) to start normally :)

编译

CSS

HTML

<script src="/libs/gsap/TweenMax.min.js"></script>
<svg xmlns="https://www.w3.org/2000/svg" width="350" height="350" viewBox="-100 0 400 400">
    <path class='g2' fill='#E52738' stroke='rgba(255,255,255,.5)' stroke-width='3' d="M200 190.1c0-1.1-.3-1.6-1.4-1.9-2.9-.9-5.8-1.9-8.7-2.8-.8-.3-1.2-.7-1.4-1.6-.8-4.5-1.8-8.9-2.6-13.4-.1-.4.2-1.1.5-1.5.8-.8 1.7-1.4 2.5-2.2l6-5.1c-1.4-3.4-2.7-6.6-4-10-3.6.3-7.1.5-10.5.8-1.1.1-1.7-.2-2.3-1.1-2.5-3.9-5.1-7.8-7.7-11.6-.5-.8-.6-1.3-.2-2.1 1.5-2.9 2.9-5.9 4.5-8.8.5-1 .5-1.6-.3-2.4-1.9-1.8-3.8-3.6-5.6-5.6-.8-.9-1.5-.8-2.4-.3-2.8 1.5-5.7 2.9-8.5 4.4-1 .5-1.7.4-2.7-.3-3.7-2.6-7.5-5.1-11.2-7.5-1.8-1.2-1.9-1.2-1.7-3.4.3-2.6.4-5.2.6-7.8.1-.9-.3-1.4-1.2-1.8-2.5-1-5.1-2-7.6-3.1-1-.4-1.5-.2-2.1.6-1.5 1.9-3.2 3.6-4.6 5.6-1.3 1.8-2.5 2.1-4.6 1.5-3.5-1-7.2-1.4-10.8-2-1.3-.2-2.2-.7-2.6-2.2-.7-2.7-1.8-5.4-2.6-8.1-.3-1-.8-1.4-1.9-1.4-2.6.1-5.2.1-7.9 0-1 0-1.5.3-1.8 1.3-.8 2.7-1.9 5.3-2.6 8.1-.4 1.6-1.4 2.1-2.8 2.3-3.8.6-7.6 1.4-11.4 2.2-1.2.3-1.9.2-2.7-.8-2-2.5-4.2-5-6.3-7.4-.5-.5-.9-1-1.7-.6-3 1.2-6 2.4-9.2 3.7.3 3.8.5 7.4.8 11 .1 1.1-.3 1.8-1.3 2.4-3.8 2.4-7.6 5-11.4 7.5-.9.6-1.6.7-2.6.2-2.9-1.5-5.9-2.9-8.8-4.5-.8-.4-1.4-.4-2 .3-1.9 2-3.8 3.9-5.8 5.8-.8.8-.8 1.4-.3 2.3 1.5 2.9 2.9 5.8 4.4 8.7.5.9.5 1.6-.2 2.4-.6.6-1.1 1.3-1.5 2-2 3-3.9 6.1-5.9 9.1-.3.5-.9 1-1.3 1-1.7 0-3.4-.2-5.2-.3-2.1-.1-4.3-.2-6.4-.4-.7 0-1.2.2-1.5.9l-3.6 9c.4.4.7.6 1 .9 2.6 2.2 5.1 4.4 7.7 6.5 1.1.9 1.3 1.7 1 3.1-.9 3.7-1.5 7.5-2.2 11.2-.2 1-.5 1.7-1.6 2-3.3 1-6.7 2.2-10 3.2-1.2.4-1.7.9-1.6 2.2.1 2.6.1 5.1 0 7.7 0 1.1.3 1.7 1.4 2 3.4 1 6.8 2.2 10.2 3.3 1.1.3 1.5 1 1.6 2 .5 3.1.8 6.3 1.7 9.2.9 2.7.2 4.3-2 5.9-2.5 1.8-4.8 4-7.2 6.1 1.3 3.1 2.5 6.1 3.7 9.1.4.9 1 1 1.8.9 1-.1 2.1-.2 3.1-.3 2.2-.1 4.4-.2 6.6-.4 2-.2 1.9-.2 2.9 1.4 2.4 3.7 4.8 7.4 7.3 11 .7 1 .8 1.7.3 2.7-1.5 2.9-3 5.9-4.5 8.8-.4.8-.3 1.3.3 1.9 2 1.9 3.9 3.8 5.8 5.8.7.8 1.4.9 2.3.4 2.9-1.5 5.9-3 8.8-4.5.7-.3 1.3-.5 2 0 3.9 2.7 7.8 5.2 11.7 7.9.4.3.8.8.8 1.2 0 1.7-.2 3.4-.3 5.2-.2 2.3-.3 4.7-.4 7 0 .4.3 1.1.7 1.2 3 1.3 6.1 2.5 9.2 3.8.5-.6 1-1.2 1.5-1.7 2.2-2.6 4.3-5.1 6.5-7.7.5-.6 1-1.1 2-.9 3.9.8 7.9 1.6 11.8 2.3 1.1.2 1.6.7 1.9 1.7 1.1 3.4 2.3 6.8 3.4 10.3.3 1 .7 1.5 1.9 1.4 2.6-.1 5.2-.1 7.9 0 1.1 0 1.6-.4 1.9-1.4 1.1-3.4 2.3-6.7 3.3-10.1.4-1.4 1.2-1.8 2.4-2 3.1-.5 6.4-.8 9.4-1.7 2.7-.9 4.2-.2 5.7 2 1.7 2.4 3.8 4.6 5.8 6.9 2.9-1.2 5.6-2.3 8.4-3.4 1.7-.7 1.7-.7 1.4-2.5-.1-.6-.1-1.3-.1-1.9-.1-2.3-.1-4.7-.4-7-.2-1.5.3-2.1 1.4-2.8 3.8-2.4 7.5-4.9 11.1-7.4.9-.6 1.5-.7 2.4-.2 2.9 1.5 5.9 3 8.8 4.5.9.5 1.5.4 2.2-.3 1.8-1.9 3.7-3.8 5.7-5.7.8-.7.9-1.3.4-2.3-1.5-2.9-3-5.9-4.5-8.8-.3-.7-.5-1.3 0-2 2.8-4.2 5.6-8.4 8.3-12.6.4-.6.8-.9 1.5-.9.6 0 1.2 0 1.7.1 2.7.2 5.3.3 8 .6.9.1 1.4-.3 1.8-1.2 1-2.5 1.9-5 3-7.4.4-1 .3-1.6-.6-2.3-2.4-2-4.8-4.1-7.2-6.1-.5-.4-.8-.8-.7-1.6.9-4.1 1.7-8.3 2.4-12.4.2-1.4.9-1.9 2.1-2.3 2.7-.8 5.4-1.8 8.1-2.6 1-.3 1.4-.8 1.4-1.9-.1-2.8-.1-5.5 0-8.2zm-99.3 29.7c-13.6.5-25.9-11.5-25.8-25.8.1-11.3 7.8-21.4 18.6-24.7v-15.7h13v15.2c11.7 2.7 20.4 13.5 20.2 25.8-.3 13.4-11.9 25.8-26 25.2z"
    />
    <path class='g1' fill='silver' stroke='rgba(0,0,0,.5)' stroke-width='3' d="M149.9 34.7l-3.3-8.1c-.3-.8-.8-.9-1.6-.9-3.8.3-7.6.6-11.5.9-.8.1-1.4-.2-2-.8-2.2-2.4-4.5-4.7-6.8-7.1-.3-.4-.7-.9-.7-1.4-.1-.9 0-1.7 0-2.6.2-3.5.5-6.9.7-10.5C121.8 3 119 2 116.3.8c-1-.4-1.6-.3-2.3.6-2.2 2.7-4.6 5.4-6.8 8.1-.6.7-1.2 1-2.1.9-3.3-.6-6.7-.6-10.1-.2-1 .1-1.6-.1-2.2-.9-2.3-2.8-4.7-5.6-7-8.4-.7-.8-1.3-1.1-2.4-.6-2.3 1-4.6 2-7 2.8-1.2.4-1.5 1.1-1.4 2.3.2 1.6.2 3.2.3 4.7.2 2 .3 4.1.5 6.1.1.9-.1 1.5-.9 2.1-2.8 2.1-5.3 4.6-7.3 7.4-.5.7-1.1 1-2 .9-1.7-.1-3.5-.2-5.2-.3-1.8-.1-3.7-.1-5.5-.5-1.1-.2-1.5.1-1.8 1-.9 2.4-1.9 4.9-3 7.3-.5 1.1-.2 1.7.6 2.5 2.7 2.2 5.3 4.4 7.8 6.7.5.4 1 1.1 1 1.7-.1 3-.6 6 0 8.9.5 2.4-.6 3.5-2.2 4.8-2.4 1.9-4.7 4-7.1 6 1.2 3 2.4 6 3.6 8.9.3.7.7.9 1.4.8 1.1-.1 2.1-.2 3.2-.3 2.5-.1 4.9-.2 7.4-.4.8-.1 1.3.1 1.8.7 2.3 2.9 4.9 5.6 7.9 7.7.7.5.9 1.1.9 2-.1 1.5-.2 3-.3 4.4-.2 2.1-.3 4.3-.5 6.4-.1.7 0 1 .7 1.3l9 3.6c.4-.5.8-.9 1.2-1.3 2-2.3 3.9-4.6 5.8-6.9 1.1-1.4 2.2-2.5 4.1-1.7.3.1.6 0 .9 0 2.3-.1 4.6-.1 6.9-.3 1.1-.1 1.9.2 2.6 1.1 2.1 2.6 4.2 5 6.3 7.5.7.9 1.3 1 2.4.6 1.9-.8 3.8-1.6 5.7-2.3 2.9-1.2 3-1.4 2.5-4.5 0-.1-.1-.2-.1-.3-.1-2.9-.3-5.8-.4-8.7 0-.5.3-1.1.7-1.4 2.7-2.2 5.1-4.6 7.2-7.3.5-.7 1.1-.9 2-.8 3.6.3 7.2.5 10.9.8.9.1 1.4-.3 1.7-1.1.9-2.4 1.9-4.9 3-7.3.4-1 .3-1.7-.6-2.4-2.5-2.1-5-4.3-7.5-6.3-1.3-1-1.4-2.1-1.3-3.6.2-2.3.2-4.7 0-7-.1-1.3.1-2.2 1.2-3.1 2.9-2.3 5.7-4.8 8.6-7.2.7-.3 1.1-.7.8-1.6zm-45.5 38v6.9h-8.8v-6.8C84.8 70.9 76.5 62 76.5 50.1c0-11.9 8.1-21.1 19.1-22.9v-6.8h8.8v6.9c11.3 2.2 18.4 12.1 18.4 22.7-.1 11.4-8 20.5-18.4 22.7z"
    />

</svg>