How to create a simple spinning animation for an image in React

Question

I'm using reactjs with material-ui styling, to create a dapp and have an image (circular in shape) which i want to spin continuously which customizable spin speed, maintaining a smooth flow. The spin speed needs to be customizable in which i feed a speed value to the component and it'd spin in that speed accordingly. Any ideas how to go by? Thanks.

PS: this is not related to 'loading components', loading animation, or loading image in any way. also, a solution which can be implemented using withStyles() of material-ui would be preferred. Thanks.

Situs

this link might be useful to you: create-css3-spinning-preloader, the tutorial demonstrated a way to build a continuously spinning circle in pure css, which you can customize the spin speed by changing the spin second in this line: animation: spin 2s linear infinite; – Upi

I had already considered this, but could you please tell me how we could feed custom speed value from the props of the component? – Situs

the 2s is animation-duration while it defines how much time is needed to do one animation cycle, the linear part defines the animation is at constant speed. spin 2s linear infinite; means doing one spin will use two seconds. You can change the animation-duration to a custom value. You might refer to this link for more about css animation: link – Upi

if you want to pass the speed value using Javascript, it would be like this in Reactjs <div style={{animationDuration = '2s'}}/> – Upi

In your case you might want to use something like <div style={{animationDuration = this.state.customSpdValue}}/> – Upi

Answer 1

I'm writing this answer with respect to my comments above:

First, define a css animation keyframe to do a spin:

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

Next, in your constructor, define the speed value:

constructor(props) {
 super(props);
 this.state = {
  speed: 3
 }
}

finally, make use of inline styling in ReactJS to pass a custom speed value from state (or sth like this.props.customSpdProps if you want to pass from props):

<img style={{animation: `spin ${this.state.speed}s linear infinite`}} src={SampleImg} alt="img"/>

Upi

I'd also like to add that in case of dealing with material-ui using withStyles() function, the 'styles' obj/function can be described like this: const styles = theme => ({ spinningImg: { animationName: 'spin', animationIterationCount: 'infinite', animationTimingFunction: 'linear', }, '@keyframes spin': { '0%': { transform: 'rotate(0deg)', }, '100%': { transform: 'rotate(360deg)', }, }, }); – Situs

Answer 2

Control spin speed by setting an initial property then propagate it to a react hook to be dynamically changed.

const SPEED = 0;

const kind  = React.createElement,
container = "react-container";

const tags  = {
    cat     : document.querySelector('[data-cat]'),
    burger  : document.querySelector('[data-burger]')
}

class Main extends React.Component {
    constructor(props){
        super(props)
    }

    componentDidMount() {
        alert("say cheeze!")
    }

    render() {
        const kinds = [];
        Object.keys(tags).map(function(key, index) {
            const targets = { 
                key : index, 
                tag : tags[key].tagName.toLowerCase(), 
                src : tags[key].src, 
                SPEED
            }
            kinds.push(kind(Spin, targets))
        });
        return kinds
    }
}

const Spin = function(props) {
    const [speed, go] = React.useState(props.SPEED);    
    const startSpin = function() {
        go(speed + 1)
    };
    React.useEffect(function() {
        startSpin()
    }, []);
    return kind(props.tag, { style : { animation : `spin ${speed}s linear infinite` }, src : props.src })
}

Demo https://gif.com.ai?id=QmagKQ16ZhwPMGunhWuiKydEJFW3y4MprxYeTNjbC87MxZ

From: https://dev.to/egfx/thinking-in-gif-with-react-5am0

Esbensen