Is it possible to animate a shape?

[Nikolina]

Hello,

I am trying to animate a shape (circle) to slide from left to right. I see that there are Animations components available and I have gone through examples. However, since all examples are made as Class components, and the way I draw the shape is with function component drawCircle(), I'm having trouble understanding how to access the circle object inside the component where I'm actually doing the animation.

drawCircle():

import { Circle, geometry } from '@progress/kendo-drawing';
const { Circle: GeomCircle } = geometry;

export default function drawCircle(surface) {
  const geometry = new GeomCircle([ window.innerWidth / 2,  window.innerHeight / 2 ], 40);
    const circle = new Circle(geometry, {
        stroke: { color: "red", width: 1 },
        fill: {color: "red"},
    });

  surface.draw(circle);
}

AnimateCircle:

import * as React from 'react';
import { Zoom } from '@progress/kendo-react-animation';

class AnimateCircle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;
        const children = show ? (<p>Effect</p>) : null;

        return (
          <div>
            <dl>
              <dt>
                Zoom:
              </dt>
              <dd>
                <button className="k-button" onClick={this.onClick}>Animate</button>
              </dd>
            </dl>

            <Zoom>
              {children}
            </Zoom>
          </div>
        );
    }
}

export default AnimateCircle;

So, my idea was to somehow pass the circle object to a render method. Just like there is the paragraph Effect, I want to have that circle. I get an error that objects cannot be passed as React children.

I would appreciate if somebody could point me in the right direction.

 

[Stefan]

Hello, Nikolina,

Animating the circle is possible, the main idea is that we need to animate the DOM element that has the Circe on it. This may require re-drawing the circle.

I made an example showcasing this:

https://stackblitz.com/edit/react-guo6jg-zimu7p?file=app%2Fmain.jsx

Regards,
Stefan
Progress Telerik

[Nikolina]

Aha, I see! It did not occur to me that it might be necessary to re-draw the object. Thank you so much for this example.