캔버스 앱에서 SVG 애니메이션을 효율적으로 사용
단 하나의 svg 이미지에 초점을 맞춘 게시물을 본 적이 있지만 해당 이미지 중 어느 것도 내 사용 사례에 맞지 않습니다. 모든 svg 이미지를 사용하는 프로세스를 찾고 내 취향에 맞게 조정하고 완료하고 싶었습니다. 앞서 말했듯이 애니메이션을 만드는 데 하루를 보내고 싶지 않았습니다. 나는 심지어 svg 애니메이션을 배우는 길을 걸었습니다. 시원했지만 시간이 많이 걸렸습니다.
그런 다음 쉬운 방법을 찾았습니다.
먼저 사용하려는 svg 이미지를 다운로드합니다. 나는 일반적으로 https://icons8.com 또는 https://www.iconfinder.com으로 이동하여 내 사용 사례에 맞는 아이콘을 검색하고 svg 이미지만 찾습니다. 올바른 svg 이미지를 찾으면; 로컬에서 다운로드하십시오. 그런 다음 재미있는 부분이 있습니다. 애니메이션을 만드는 것입니다. 이를 위해 https://app.svgator.com이라는 멋진 svg 애니메이터 웹 사이트를 우연히 발견했습니다. 이 웹사이트에 가입하시면 웹사이트 둘러보기를 안내해 드립니다. SVGator 사용 방법에 대한 자세한 내용은 this blog을 참조하십시오. 하지만 간단한 데모도 보여드리겠습니다.
이 예제에서는 애니메이션을 위해 아래 이미지를 사용하고 있습니다. 여기에 svg 이미지를 업로드할 수 없지만 유사한 이미지를 얻으려면 이 페이지link를 따르십시오.
이미지가 있으면 SVGator로 이동하여 새 프로젝트를 클릭합니다. 그런 다음 SVG 파일을 업로드하라는 메시지가 표시됩니다. 이제 애니메이션을 적용할 이미지 부분을 선택합니다. 그 아래에는 타임라인 컨트롤이 있습니다. 거기에 "애니메이션 추가"버튼이 있습니다. 클릭하면 선택한 부품 유형에 사용할 수 있는 모든 애니메이션이 표시됩니다. 이 경우 경로를 선택하면 많은 애니메이션 속성을 얻게 됩니다. "회전"을 선택하겠습니다.
이제 타임라인에 키프레임이 추가됩니다. 타임라인 표시기를 3초에 놓습니다. 표시; 마우스 오른쪽 버튼을 클릭하고 키프레임을 복제합니다. 다음 이미지와 같이 오른쪽 패널의 변환 섹션에서 "회전"을 편집합니다.
완료되면 프로필 아이콘 옆에 있는 상단 표시줄의 재생 버튼을 사용하여 애니메이션을 실행할 수 있습니다. 그러면 다음과 같은 애니메이션 이미지가 생성됩니다.
내보내기 버튼 사용; svg 파일을 다운로드할 CSS로 내보낼 수 있습니다. 다음 형식을 사용하여 캔버스 앱에서 이미지 구성 요소의 이미지 속성에 해당 svg 파일의 내용을 복사합니다.
"data:image/svg+xml,"&EncodeUrl("<svg id='eclasfwtqu7q1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
viewBox='0 0 80 80' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'>
<style>
<![CDATA[
#eclasfwtqu7q4_tr {
animation: eclasfwtqu7q4_tr__tr 3000ms linear 1 normal forwards
}
@keyframes eclasfwtqu7q4_tr__tr {
0% {
transform: translate(39.999999px, 39.950002px) rotate(0deg)
}
100% {
transform: translate(39.999999px, 39.950002px) rotate(360deg)
}
}
]]>
</style>
<g id='eclasfwtqu7q2'>
<g id='eclasfwtqu7q3'>
<g id='eclasfwtqu7q4_tr' transform='translate(39.999999,39.950002) rotate(0)'>
<path id='eclasfwtqu7q4'
d='M64.700000,40C64.700000,39.700000,64.700000,39.400000,64.700000,39.100000L74.800000,35.800000L70.600000,23L60.500000,26.300000C60.200000,25.800000,59.800000,25.300000,59.400000,24.800000L65.700000,16.200000L54.800000,8.200000L48.500000,16.800000C47.900000,16.600000,47.300000,16.400000,46.700000,16.200000L46.700000,5.600000L33.300000,5.600000L33.300000,16.200000C32.700000,16.400000,32.100000,16.600000,31.500000,16.800000L25.200000,8.200000L14.300000,16.100000L20.600000,24.700000C20.200000,25.200000,19.900000,25.700000,19.500000,26.200000L9.400000,22.900000L5.200000,35.800000L15.300000,39.100000C15.300000,39.400000,15.300000,39.700000,15.300000,40C15.300000,40.300000,15.300000,40.600000,15.300000,40.900000L5.200000,44.200000L9.400000,57L19.500000,53.700000C19.800000,54.200000,20.200000,54.700000,20.600000,55.200000L14.300000,63.800000L25.200000,71.700000L31.500000,63.100000C32.100000,63.300000,32.700000,63.500000,33.300000,63.700000L33.300000,74.300000L46.800000,74.300000L46.800000,63.800000C47.400000,63.600000,48,63.400000,48.600000,63.200000L54.800000,71.800000L65.700000,63.900000L59.400000,55.300000C59.800000,54.800000,60.100000,54.300000,60.500000,53.800000L70.600000,57L74.800000,44.200000L64.700000,40.900000C64.700000,40.600000,64.700000,40.300000,64.700000,40ZM71,46.100000L68.700000,53.200000L59.200000,50.100000L58.600000,51.100000C58,52.200000,57.200000,53.200000,56.400000,54.100000L55.600000,55L61.500000,63.100000L55.400000,67.500000L49.500000,59.400000L48.500000,60C47.400000,60.500000,46.200000,60.900000,45,61.100000L43.800000,61.400000L43.800000,71.400000L36.300000,71.400000L36.300000,61.400000L35.100000,61.100000C33.900000,60.800000,32.700000,60.400000,31.600000,60L30.500000,59.500000L24.600000,67.600000L18.500000,63.200000L24.400000,55.100000L23.600000,54.200000C22.800000,53.300000,22.100000,52.300000,21.400000,51.200000L20.800000,50.200000L11.300000,53.300000L9,46.100000L18.500000,43L18.400000,41.800000C18.400000,41.200000,18.300000,40.600000,18.300000,39.900000C18.300000,39.200000,18.300000,38.600000,18.400000,38L18.500000,36.800000L9,33.900000L11.300000,26.800000L20.800000,29.900000L21.400000,28.900000C22,27.800000,22.800000,26.800000,23.600000,25.900000L24.400000,25L18.500000,16.900000L24.600000,12.500000L30.500000,20.600000L31.600000,20.100000C32.700000,19.600000,33.900000,19.200000,35.200000,19L36.400000,18.700000L36.400000,8.700000L43.900000,8.700000L43.900000,18.700000L45.100000,19C46.300000,19.300000,47.500000,19.700000,48.600000,20.100000L49.700000,20.600000L55.600000,12.500000L61.700000,16.900000L55.800000,25L56.600000,25.900000C57.400000,26.800000,58.100000,27.800000,58.800000,28.900000L59.400000,29.900000L68.900000,26.800000L71.200000,33.900000L61.700000,37L61.800000,38.200000C61.800000,38.800000,61.900000,39.400000,61.900000,40.100000C61.900000,40.800000,61.900000,41.400000,61.800000,42L61.500000,43L71,46.100000Z'
transform='translate(-39.999999,-39.950002)' fill='rgb(0,0,0)' stroke='none' stroke-width='1' />
</g>
<path id='eclasfwtqu7q5'
d='M40,26.800000C32.700000,26.800000,26.800000,32.700000,26.800000,40C26.800000,47.300000,32.700000,53.200000,40,53.200000C47.300000,53.200000,53.200000,47.300000,53.200000,40C53.200000,32.700000,47.300000,26.800000,40,26.800000ZM40,50.200000C34.400000,50.200000,29.800000,45.600000,29.800000,40C29.800000,34.400000,34.400000,29.800000,40,29.800000C45.600000,29.800000,50.200000,34.400000,50.200000,40C50.200000,45.600000,45.600000,50.200000,40,50.200000Z'
fill='rgb(0,0,0)' stroke='none' stroke-width='1' />
</g>
</g>
</svg>")
캔버스 앱에 코드를 추가하면 아래와 같이 표시됩니다.
이제 이미지가 계속 반복되도록 하려면 SVGator에서 속성을 하나 더 변경해야 합니다. 이는 다음 스크린샷에 나와 있습니다.
이것이 멋진 애니메이션을 만드는 데 도움이 되기를 바랍니다.
내 Power Platform Dev Newsletter를 구독하는 것을 잊지 마세요
Reference
이 문제에 관하여(캔버스 앱에서 SVG 애니메이션을 효율적으로 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/powermaverick/efficiently-use-svg-animations-in-canvas-apps-1kjc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
