子弹时间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); 
}