Capture the state of a Css animation

Question

Capture the state of a Css animation

Navigation

#1 by (2 votes)

1

Greetings, I have the following div spinning with @Keyframes. What I need is that when you click on the same div, capture the current angle it is in.

const go = document.querySelector('#box');
const box = document.querySelector('.box');
const rpm = 30;
const timeout = 30;
let tid = null; // timeout id

const sec = 60 / parseInt(rpm);
const millisec = parseInt(timeout) * 1000;

$( document ).ready(function() {
    rotate.stop();
    rotate.start(sec, millisec);
});

go.addEventListener('click', () => {
    //CAPUTA ANGULO ACTUAL DEL DIV BOX
});


const rotate = {
    stop() {
        if (tid) {
            window.clearTimeout(tid);
        }
        box.removeAttribute('style');
        box.classList.remove('animated');
    },
    start (sec, millisec) {
        box.style.animationDuration = '${sec}s';
        box.classList.add('animated');
        tid = window.setTimeout(() => {
                box.classList.remove('animated');
    }, millisec);
    }
}

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw{
    height: 15rem;
    width: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    width: 100%;
    height: 100%;
    background-color: aqua;
}
.box.animated {
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="draw">
    <div class="box" id="box"></div>
</section>
<script src="jquery.min.js"></script>
<script src="script3.js"></script>
</body>
</html>

javascript jquery html5 css3

asked by Alejandro Gutierrez 26.12.2016 в 13:33

source

1 answer

Animations CSS3 or JAVASCRIPT [closed] Nginx + php7.1 + Vagrant

score 2 · Accepted Answer

You can use this function, extracted from the answer in English of Stack over flow. Where you are sent by parameter the id of the element you want to get the rotation. The values of the css are obtained, the two points are obtained and the angle is calculated. The function atan2 gets the angle between two coordinates or vectors in radians. After obtaining that result, it is parsed to degrees 180 / Math.PI

In this link you can see the Angle between two points of the angle

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}

const go = document.querySelector('#box');
const box = document.querySelector('.box');
const rpm = 30;
const timeout = 30;
let tid = null; // timeout id

const sec = 60 / parseInt(rpm);
const millisec = parseInt(timeout) * 1000;

$( document ).ready(function() {
    rotate.stop();
    rotate.start(sec, millisec);
});

go.addEventListener('click', () => {
   var angulo = getRotationDegrees($('#box'));
   alert(angulo);
});

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}


const rotate = {
    stop() {
        if (tid) {
            window.clearTimeout(tid);
        }
        box.removeAttribute('style');
        box.classList.remove('animated');
    },
    start (sec, millisec) {
        box.style.animationDuration = '${sec}s';
        box.classList.add('animated');
        tid = window.setTimeout(() => {
                box.classList.remove('animated');
    }, millisec);
    }
}

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw{
    height: 15rem;
    width: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    width: 100%;
    height: 100%;
    background-color: aqua;
}
.box.animated {
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="draw">
    <div class="box" id="box"></div>
</section>
<script src="jquery.min.js"></script>
<script src="script3.js"></script>
</body>
</html>