javascript - 子弹时间 CSS 动画减速

Question

JSFiddle 中的代码:

http://jsfiddle.net/wardrobe/6UVDD/

我想使用 jQuery 将 CSS 动画原子的动画速度减慢为在鼠标悬停时爬行，但要使用某种缓动来实现。我可以让 jQuery 很容易地将播放状态更改为暂停，但要慢到爬行似乎更难。

HTML

<div id="atom">
            <div id="cloud">
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                    </div>
                </div>
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                    </div>
                </div>
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                    </div>
                </div>
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                    </div>
                </div>
                <div id="nucleus"></div>
            </div>
        </div>

CSS:

#atom { position: absolute; top: 50%; left: 50%; width:300px; margin-left: -170px; margin-top: -146px; transition: all 1.5s; }

#cloud { width:300px; height:300px; -webkit-perspective: 1000; position:relative; -webkit-animation-play-state:paused;}

#nucleus { position:absolute; top:50%; left:50%; margin: -10px 0 0 -10px; width:25px; height:25px; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; background: #272727;}

.orbit { position:absolute; top:0; left:0; width:300px; height:300px; border-radius:300px; -webkit-border-radius:300px; -moz-border-radius:300px; border:5px solid #ccc; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(80deg) rotateY(20deg);}

#cloud .orbit:nth-child(2) {-webkit-transform: rotateX(80deg) rotateY(70deg)}
#cloud .orbit:nth-child(3) {-webkit-transform: rotateX(80deg) rotateY(-20deg)}
#cloud .orbit:nth-child(4) {-webkit-transform: rotateX(80deg) rotateY(-50deg)}

#cloud .orbit:nth-child(2) .path, #cloud .orbit:nth-child(2) .electron {-webkit-animation-delay: -1.0s}
#cloud .orbit:nth-child(3) .path, #cloud .orbit:nth-child(3) .electron {-webkit-animation-delay: -1.5s}
#cloud .orbit:nth-child(4) .path, #cloud .orbit:nth-child(4) .electron {-webkit-animation-delay: -0.5s}

.path { width:300px; height:300px; position:relative; -webkit-transform-style: preserve-3d; -webkit-animation-name: pathRotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

.electron { position: absolute; top:-5px; left:50%; margin-left:-5px; width:10px; height:10px; border-radius:10px; background:#ccc; -webkit-animation-name: electronFix; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

@-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } }

@-webkit-keyframes electronFix { from { -webkit-transform: rotateX(90deg) rotateY(0deg); } to { -webkit-transform: rotateX(90deg) rotateY(-360deg); } }

JS:

$(function() {
    $("#atom").mouseover(function() { 
        $( ".path" ).animate({"-webkit-animation-duration": "25s"}, {duration: 'slow'});
        $( ".electron" ).animate({"-webkit-animation-duration": "25s"}, {duration: 'slow'});
    }).mouseout(function() { 
        $( ".path" ).animate({"-webkit-animation-duration": "2s"}, {duration: 'slow'});
        $( ".electron" ).animate({"-webkit-animation-duration": "2s"}, {duration: 'slow'});
    });
});

谢谢

Answer 1

我知道如何做到这一点的最简单方法是使用类似 GSAP 的东西，它可以很容易地实现此功能。如果没有像 GSAP 这样的库，您可能可以，但它会非常复杂、耗时、可能神经质，并且性能更差

但是，当像 GSAP 这样的库时引入它变得更简单一些。希望评论对解释代码有所帮助

基本上我使用 GSAP 重新创建了动画，将它们放在时间轴上，并在悬停时减慢了时间轴

Demo

// Used to change the timings of all animations collectively
var timeline = new TimelineMax({}),
    electrons = document.querySelectorAll('.electron'),
    paths = document.querySelectorAll('.path'),
    startDuration = 2,
    delay = 0.5,

    // Gets the start of the last electron
    lastTweenStartTime = (electrons.length - 1) * delay,

    // Calculates when the last electron is done animating
    lastTweenEndTime = lastTweenStartTime + startDuration;

// Apply the GSAP animation to each electron and path
for (var i = 0; i < electrons.length; i++) {
    // Create the individual delay to create offset
    var myDelay = (i * delay);
    orbit(electrons[i], paths[i], myDelay);
}

// Slow the animation on mouseover
document.getElementById("atom").onmouseover = function () {
    TweenLite.to(timeline, startDuration, {
        timeScale: 0.1
    });
}
// Set the animation back to normal on mouse leave
document.getElementById("atom").onmouseout = function () {
    TweenLite.to(timeline, startDuration, {
        timeScale: 1
    });
}

// Repeat it when the last electron is done animating
timeline.add(repeat, lastTweenEndTime);

// Start ahead so there is no load time
timeline.seek(1.5);

// Give each electron and path their individual animations
function orbit(electron, path, delay) {
    var e = TweenMax.fromTo(electron, startDuration, 
    // Initial rotationX of 90 to make dots visible
    {   rotationX: '90' },
    // Keep the dots upright for the duration of the animation
    {
        rotationZ: '-360',
        rotationX: '90',
        ease: Linear.easeNone,
        repeat: 1
    });
    var p = TweenMax.to(path, startDuration, {
        rotationZ: '360',
        ease: Linear.easeNone,
        repeat: 1
    });
    // Add that animation to the total timeline
    timeline.add([e, p], delay);
}

// Repeat the animation
function repeat() {
    timeline.play(lastTweenStartTime);
}