jquery拖拽进度控制元素动画效果带暂停功能3572
var trans3DDemo = $("#trans3DDemo"),
trans3DBoxes = $("#trans3DBoxes"),
boxes = $("#trans3DBoxes div"),
slider = $("#slider"),
play_btn = $("#play_btn").button(),
stop_btn = $("#stop_btn").button(),
reverse_btn = $("#reverse_btn").button(),
threeDTimeline = new TimelineLite({
    onUpdate: updateSlider
}); //允许滑块保持同步动画播放

TweenLite.set(trans3DBoxes, {
    css: {
        transformPerspective: 400,
        perspective: 400,
        transformStyle: "preserve-3d"
    }
});

threeDTimeline.fromTo(trans3DDemo, 2, {
    ease: Power0.easeIn,
    css: {
        autoAlpha: 0
    }
},
{
    css: {
        autoAlpha: 1
    }
}).to(trans3DBoxes, 1, {
    css: {
        rotationY: 30,
        rotationX: 20
    }
}).add("z", "+=0.5");

boxes.each(function(index, element) {
    threeDTimeline.to(element, 1, {
        css: {
            z: getRandom( - 30, 50)
        }
    },
    "z");
})

threeDTimeline.to(trans3DBoxes, 1, {
    css: {
        rotationY: 360,
        z: -180
    },
    ease: Power2.easeOut
},
"+=0.2").to(trans3DBoxes, 1, {
    css: {
        rotationX: 360,
        z: -10
    }
}).to(boxes, 0.5, {
    borderRadius: "15px"
}).to(boxes, 0.5, {
    borderRadius: "45px"
}).to(boxes, 0.5, {
    borderRadius: "18 40px"
}).to(boxes, 0.5, {
    borderRadius: "18px"
}).to(boxes, 0.5, {
    borderRadius: "40px 0px 40px 40px",
    borderColor: "rgba(189, 186, 91, 0.3)"
}).to(boxes, 0.5, {
    borderRadius: "0px"
},
"+=0.2").to(boxes, 0.5, {
    borderRadius: "15px",
    borderColor: "#fff"
}).set(boxes, {
    transformPerspective: 100
}).to(boxes, 0.5, {
    rotationY: 180,
    autoAlpha: 1,
    z: 0
},
"+=0.5").to(trans3DBoxes, 1, {
    css: {
        autoAlpha: 0
    }
});

function updateSlider() {
    slider.slider("value", threeDTimeline.progress() * 100);
}

$("#slider").slider({
    range: false,
    min: 0,
    max: 100,
    step: .1,
    slide: function(event, ui) {
        threeDTimeline.pause();
        threeDTimeline.progress(ui.value / 100);
    }
});

function getRandom(max, min) {
    return Math.floor(Math.random() * (1 + max - min) + min);
}

// seek( ); timeScale( );
$("#play_btn").click(function() {

    if (threeDTimeline.progress() == 1) {
        threeDTimeline.restart();
    } else {
        threeDTimeline.play();
    }
})

$("#stop_btn").click(function() {

    threeDTimeline.pause();

}) $("#reverse_btn").click(function() {

    threeDTimeline.reverse();

})

技术讨论区(0 个讨论)

  1. 请先登录

      发 布