动态改变序列帧动画的图片路径及对应div容器的className

接上一篇文章内容，当对应的风向改变时，动效会改变，即动态改变bacground-image中的图片路径。
代码如下：

// 动效容器对应的className动态改变
<div className={`animation dynamic-animation-${classUrl}`} ></div>

// JavaScript
const [classUrl, setClassUrl] = useState(null);
//当参数改变时，给classUrl赋值
//useEffect(()=>{
//	if(){
//		setClassUrl();
//	}
//},[])

	//scss
	@mixin generateAnimation($imgCount, $pathPrefix) {
		@keyframes dynamicAnimation#{$select} {
			@for $i from 0 through $imgCount {
				$percentage: ($i * 100%) / $imgCount;
				$imageUrl: url('../#{$pathPrefix}#{$i}.png');
				#{$percentage} {
					background-image: $imageUrl;
				}
			}
		}
	}

	$className: (
		'imgs/G-Z-D/G-Z-D': 'G-Z-D',
		'imgs/G-Z-Z/G-Z-Z': 'G-Z-Z',
		'imgs/G-Z-G/G-Z-G': 'G-Z-G',
	);
	$imgSum: 35;
	$select: '';
	
	@each $prefix, $selector in $className {
		$select: $selector;
		.dynamic-animation-#{$selector} {
			@include generateAnimation($imgSum, $prefix);
			animation-name: dynamicAnimation#{$selector};
		}
	}

例如，当图片路径为’…/imgs/G-Z-G/G-Z-G…‘时，对应的className为’dynamic-animation-G-Z-G’