How to create an animation and structure-there to be reusable?

Asked

Viewed 34 times

0

I created an animation of a "spinner" like webwhatsapp, but this animation I created from the standard mode through the .scss and @keyframes. I searched the angular documentation and found that there is a library for animations, but honestly I did not understand very well how to use the same to have the desired effect as I did with the .scss.

Well currently my animation is in .scss of the component and operating which is:

div {
    display: flex;

    svg {
        animation: rotate 2s linear infinite;
        -webkit-animation: rotate 2s linear infinite;
        -ms-animation: rotate 2s linear infinite;
        -moz-animation: rotate 2s linear infinite;
        -o-animation: rotate 2s linear infinite;

        circle {
            stroke-linecap: round;
            animation: dash 1.5s ease-in-out infinite;
            -webkit-animation: dash 1.5s ease-in-out infinite;
            -ms-animation: dash 1.5s ease-in-out infinite;
            -moz-animation: dash 1.5s ease-in-out infinite;
            -o-animation: dash 1.5s ease-in-out infinite;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -o-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes rotate {
            100% {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -o-transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1, 150; /* 1%, 101% circumference */
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 90, 150; /* 70%, 101% circumference */
                stroke-dashoffset: -35; /* 25% circumference */
            }
            100% {
                stroke-dasharray: 90, 150; /* 70%, 101% circumference */
                stroke-dashoffset: -124; /* -99% circumference */
            }
        }
        @-webkit-keyframes dash {
            0% {
                stroke-dasharray: 1, 150; /* 1%, 101% circumference */
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 90, 150; /* 70%, 101% circumference */
                stroke-dashoffset: -35; /* 25% circumference */
            }
            100% {
                stroke-dasharray: 90, 150; /* 70%, 101% circumference */
                stroke-dashoffset: -124; /* -99% circumference */
            }
        }
    }
}

And this is what I tried to do with the native angular library, but without success, nothing happens:

<div>
    <svg [@rotate] [style.height]="height" [style.width]="width" viewBox="0 0 44 44">
        <circle
            cx="22"
            cy="22"
            r="20"
            [@dash]
            [ngStyle]="{
                fill: circleFill ? circleFill : 'none',
                stroke: circleStroke ? circleStroke : 'none',
                strokeWidth: circleStrokeWidth ? circleStrokeWidth : '4'
            }"
        ></circle>
    </svg>
</div>


@Component({
    selector: 'app-spinner',
    templateUrl: './spinner.component.html',
    styleUrls: ['./spinner.component.scss'],
    animations: [
        trigger('rotate', [
            transition('* => void', [
                style({
                    animation: 'rotate 2s linear infinite',
                }),
                animate(
                    2000,
                    keyframes([
                        style({
                            transform: 'rotate(360deg)',
                        }),
                    ])
                ),
            ]),
        ]),
        trigger('dash', [
            transition('* => void', [
                style({ animation: 'dash 1.5s ease-in-out infinite' }),
                animate(
                    1500,
                    keyframes([
                        style({
                            strokeDasharray: '1, 150',
                            strokeDashoffset: 0,
                        }),
                        style({
                            strokeDasharray: '90, 150',
                            strokeDashoffset: -35,
                        }),
                        style({
                            strokeDasharray: '90, 150',
                            strokeDashoffset: -124,
                        }),
                    ])
                ),
            ]),
        ]),
    ],
})
export class SpinnerComponent implements OnInit {
    @Input() height = '65px';
    @Input() width = '65px';
    @Input() circleFill = 'none';
    @Input() circleStroke = '#acb9bf8f';
    @Input() circleStrokeWidth = '4';
    @Input() circleStrokeLinecap = 'round';

    constructor() {}

    ngOnInit(): void {}
}
  • It was not very clear your doubt, want to know how to reuse the animation you made with scss is this?

  • @Leandrade no.. My animation is in the code of . scss is correct and working, what I would like to know is how to convert this model to angular Animation.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.