I was looking at easy way to create animations in canvas apps; as I have seen so many community members have been creating beautiful apps using animations. But I didn’t want to spend too much time animating but deliver quick value to the users by building something that not only gets the job done but also looks good.
I had seen some post which were focused on just one svg images but none of those images fit my use case. I wanted to find a process to use any svg image, tweak it to my liking and get it done. As said earlier, I did not want to spend a day creating animation. I even went down a path of learning to animate svg; though it was cool but was time-consuming.
Then I found an easy way.
First download any svg image you would want to use. I normally go to https://icons8.com or https://www.iconfinder.com search for the icon that would fit my use case and look for svg images only. Once you have found the right svg image; download it locally. Then comes the fun part – animating it. For that I stumbled upon a nice svg animator website called https://app.svgator.com. Sign up for this website and it will guide you through the tour of the website. Read this blog on more details on how to use SVGator. But I will show you a quick demo as well.
I am using the the below image for animating in this example. As I cannot upload svg image here but if you want to get the similar image you can follow this link.
Once you have the image, head over to SVGator and click on New Project. It will then ask you to upload your SVG file. Now, select the part of the image that you want to animate. Below that is a timeline control; and there you will find “Add animation” button. Clicking that will show you all the animations available for the type of part you have selected. In this case when you select path you get lot of animation properties. We will select “Rotate”.
Now a keyframe will be added to the timeline. Put your timeline indicator at 3 sec. mark; right click and duplicate the keyframe. Edit “Rotate” under Transform section on the right-hand panel as shown in the following image:
Once done you can run the animation by using the play button at the top bar next to you profile icon. This will result in the following animated image:
Using the Export button; you can export it in CSS that will download the svg file. Copy the contents of that svg file on an image property of an image component in canvas app using the following format:
"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>")
After adding the code in canvas apps it would look like below:
Hope this helps you create some nice animations.
Don’t forget to subscribe to my Power Platform Dev Newsletter
Top comments (0)