Question

JSFiddle中的代码：

我想使用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);
}

Bullet-Time CSS动画减速

1 个答案: