使用精灵创建Java旋转

Question

我正在创建一个旋转环的动画。

悬停时，右侧旋转180度，暂停并旋转回到起始位置。 如果用户在动画制作时将光标从圆环上移开，则需要将其从当前打开的帧反转。

作为前端开发人员，我在动画方面没有丰富的经验，因此对使用技术的任何建议都将不胜感激。

目前，我正在使用带有sprite的CSS动画，如下所示，但是它缺乏从用户离开戒指时的帧反转的功能。

这是我的工作示例，它的灵感来自http://renren.com/

使用CSS的示例

 $('body').on('mouseenter', '.item', function() { $(this).removeClass('unactive').addClass('active'); }); $('body').on('mouseleave', '.item', function() { $(this).removeClass('active').addClass('unactive'); }); 

 .content { width: 150px; height: 150px; background-color: #EBEBEB; } .content.ring { background: url(http://a.xnimg.cn/nx/apps/login/cssimg/qrcode1-t.jpg) 0 0 no-repeat } .active .content { background-position: 0 -1800px; -moz-animation: movedown 2000ms steps(12) forwards; -webkit-animation: movedown 2000ms steps(12) forwards } .unactive .content { -moz-animation: moveup 2000ms steps(7) forwards; -webkit-animation: moveup 2000ms steps(7) forwards } @-moz-keyframes movedown { 0% { background-position: 0 0 } 100% { background-position: 0 -1800px } } @-moz-keyframes moveup { 0% { background-position: 0 -1800px } 100% { background-position: 0 -2850px } } @-webkit-keyframes movedown { 0% { background-position: 0 0 } 100% { background-position: 0 -1800px } } @-webkit-keyframes moveup { 0% { background-position: 0 -1800px } 100% { background-position: 0 -2850px } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> HTML <div class="item active"> <div class="content ring"> </div> </div> 

我也找到了像motio这样的插件

所以我的问题是，CSS能够拥有如此多的控制权吗？或者CANVAS或其他jQuery插件会更适合吗？

编辑

尽管我开始编写脚本来帮助控制动画，但仍然很难弄清楚这一点。

我试图控制背景位置以控制精灵旋转。

使用JavaScript的示例

 ;(function($) { var Ring = function (options) { // context var self = this; // defaults var currFrame = 1, totalFrames, width, height, timeout; // default frame array var framesObj = {}; // option defaults self.class = ""; self.spriteHeight = ""; //properties based on options if (typeof options != 'undefined' && options != undefined && options != null) { self.class = options.class; self.spriteHeight = options.spriteHeight; self.speed = options.speed; } // fire off everything you need self.init = function () { self.buildArr(); } // check for the container dimentions self.frameDimentions = function () { // double check we have a class to select the container with var container = self.class ? true : false; // I know I could just write self.class in the if.. if ( container ) { var container = $("." + self.class + ""); var containerHeight = container.outerHeight(); var containerWidth = container.outerWidth(); return [containerHeight,containerWidth]; } console.log("Please provide a class"); } // calculate frames eg 3000 into 150 per frame is 20.. self.calcFrames = function() { var totalFrames = parseInt(self.spriteHeight) / self.frameDimentions()[0]; return totalFrames; } self.buildArr = function() { // these values need to be pushed in to the arr for (var i = 0; i < self.calcFrames(); i++) { framesObj[(i+1)] = self.frameDimentions()[0]*i; } } self.startForwardAnimation = function(){ // to stop manic clicking../hover.. if( currFrame <= 1 ) { timeout = setInterval( updateFrameForward, self.speed); } } self.startBackwardAnimation = function(){ // to stop manic clicking../hover.. console.log("start backward animation"); if( currFrame != 1 ) { backTimeout = setInterval( updateFrameBackward, self.speed); } } self.stopAnimation = function(){ //currFrame = 1; clearTimeout(timeout); } self.reset = function(){ clearTimeout(timeout); clearTimeout(backTimeout); currFrame = 1; } self.info = function(){ $('.info').html(currFrame); } // if currFrame less than total frames // add one to it // update the current frame variable // stop and clear timer when reach the end function updateFrameForward(){ //check if we are in available frames.. if ( currFrame == self.calcFrames() ) { self.stopAnimation(); self.reset(); } $("." + self.class + "").css({ 'background-position-y': "-" + framesObj[currFrame] + "px" }); self.info(); currFrame = currFrame + 1; } function updateFrameBackward(){ if( currFrame <= 1 ) { self.stopAnimation(); self.reset(); } $("." + self.class + "").css({ 'background-position-y': framesObj[currFrame] + "px" }); self.info(); console.log(currFrame); currFrame = currFrame - 1; } } var ringAniamtion = new Ring({ class: "animate", spriteHeight: "3000", speed: "20" }); $('body').on('mouseenter', '.animate', function(event){ event.preventDefault(); console.log("mouse enter"); ringAniamtion.buildArr(); ringAniamtion.startForwardAnimation(); }); $('body').on('mouseleave', '.animate', function(event){ event.preventDefault(); console.log("mouse leave"); ringAniamtion.stopAnimation(); ringAniamtion.startBackwardAnimation(); }); $('body').on('click', '.stop', function(event){ event.preventDefault(); ringAniamtion.reset(); }); })( jQuery ); // timeout = setTimeout('timeout_trigger()', 3000); // clearTimeout(timeout); 

 .content { width: 150px; height: 150px; background: url(http://a.xnimg.cn/nx/apps/login/cssimg/qrcode1-t.jpg) 0 0 no-repeat; cursor: pointer; } 

 <div class="content animate"> </div> <div class="info"> </div> <a href="" class="stop">stop</a> 

Answer 1

我在第二个代码段中找到了解决方法。

;(function($) {

var Ring = function (options) {

    // context
    var self = this; 

    // defaults
    var currFrame = 1, totalFrames, width, height, timeout;

    // default frame array
    var framesObj = {};

    // option defaults
    self.class = ""; 
    self.spriteHeight = ""; 

    //properties based on options
    if (typeof options != 'undefined' && options != undefined && options != null)
    {
        self.class = options.class;
        self.spriteHeight = options.spriteHeight;
        self.speed = options.speed;
    }

    // fire off everything you need
    self.init = function () 
    {
       self.buildArr();
    }

    // check for the container dimentions
    self.frameDimentions = function () 
    {
        // double check we have a class to select the container with
        var container = self.class ? true : false;
        // I know I could just write self.class in the if..
        if ( container )
        {
            var container =  $("." + self.class + "");
            var containerHeight = container.outerHeight();
            var containerWidth = container.outerWidth();
            return [containerHeight,containerWidth];
        }
        console.log("Please provide a class");
    }

    // calculate frames e.g. 3000 into 150 per frame is 20..
    self.calcFrames = function() 
    {
        var totalFrames = parseInt(self.spriteHeight) / self.frameDimentions()[0];
        return totalFrames;
    }

    self.buildArr = function() 
    {
        // these values need to be pushed in to the arr
        for (var i = 0; i < self.calcFrames(); i++) {
            framesObj[(i+1)] = self.frameDimentions()[0]*i;
        }   
    }

    self.startForwardAnimation = function(){
       // to stop manic clicking../hover..
       if( currFrame <= 1 )
       {
           timeout = setInterval( updateFrameForward, self.speed);
       }
    }
    self.startBackwardAnimation = function(){
       // to stop manic clicking../hover..
       console.log("start backward animation");
       if( currFrame != 1 )
       {
           backTimeout = setInterval( updateFrameBackward, self.speed);
       }
    }
    self.stopAnimation = function(){
       //currFrame = 1;
       clearTimeout(timeout);
    }
    self.reset = function(){
       clearTimeout(timeout);
       clearTimeout(backTimeout);
       currFrame = 1;
    }
    self.info = function(){
        $('.info').html(currFrame);
    }

    // if currFrame less than total frames
    // add one to it
    // update the current frame variable
    // stop and clear timer when reach the end
    function updateFrameForward(){
        //check if we are in available frames..
        if ( currFrame == self.calcFrames() )
        {
            self.stopAnimation();
            self.reset();
        }
        $("." + self.class + "").css({
              'background-position-y': "-" + framesObj[currFrame] + "px"
        });
        self.info();
        currFrame = currFrame + 1;
    }
    function updateFrameBackward(){

        if( currFrame <= 1 )
        {
            self.stopAnimation();
            self.reset();
        }
        $("." + self.class + "").css({
              'background-position-y': framesObj[currFrame] + "px"
        });  
        self.info();
        console.log(currFrame);
        currFrame = currFrame - 1;
    }
}

var ringAniamtion = new Ring({
    class: "animate",
    spriteHeight: "3000",
    speed: "20"
});

$('body').on('mouseenter', '.animate', function(event){
    event.preventDefault();
    console.log("mouse enter");
    ringAniamtion.buildArr();
    ringAniamtion.startForwardAnimation();

});

$('body').on('mouseleave', '.animate', function(event){
    event.preventDefault();
    console.log("mouse leave");
    ringAniamtion.stopAnimation();
    ringAniamtion.startBackwardAnimation();
});

$('body').on('click', '.stop', function(event){
    event.preventDefault();
    ringAniamtion.reset();
});

})( jQuery );