![]() Sarah Drasner has a guide on how you can replace some of it’s features. The structure for the text animation is relatively straightforward we just create five 'use' elements which reference the main text.Update December 2015: At the time of this update, SMIL seems to be kinda dying. ![]() Animates 360 degrees around the point 195.5,105.5 over 1250 ms As you can see, we reset the rotated transform, so the animation keeps resetting. You can see this in our following animation routine, let us take it that this line of code is being called in a loop. The only thing you have to be careful with rotations is that if it rotates 360 degrees or more, then a further rotate applied the animation will go the wrong direction. The clock animation is a relatively straightforward operation. Transform: 'r0,' + (treeDim.x + (treeDim.width / 2)) + ',' + (treeDim.y + treeDim.height) Transform: 'r8,' + (treeDim.x + (treeDim.width / 2)) + ',' + (treeDim.y + treeDim.height) Transform: 'r0,' + (leavesDim.x + (leavesDim.width / 2)) + ',' + (leavesDim.y + leavesDim.height) This animation triggers once the other has finished Transform: 'r25,' + (leavesDim.x + (leavesDim.width / 2)) + ',' + (leavesDim.y + leavesDim.height) ![]() TreeDim is the bounding box dimension of the tree Tree is the tree element we want to rotate LeavesDim is the bounding box dimension of leaves Leaves are the leaves element we want to rotate We can also take full advantage of the excellent easing algorithms that snap.svg has built into it. It's a pretty simple concept, all we do is animate the whole tree by a small amount, and then at the same time we animate the leaves of the tree further. If the leaves were the same colour we could have used a path transform for the animation, but in our case the two-part animation was the better option. The tree animation is a two part rotate animation to get more of a realistic bend during the animation. **ĬarStartMatrix and carMidMatrix initialises our Snap Matrix The only thing that makes it more complex is because of the easing it can make it appear difficult to achieve. This animation is just a simple translation combined with a rotation. The animation for the Hill Valley SVG has four principal components, with this particular animation we will use the easing algorithms provided by Snap.svg. ![]() Load our external SVG Snap.load('img/hill-valley.svg', function (response) ) First step is to include it in our project there are many ways to do this, which you can find here Initialise Snap SVG element // HTML The beauty of Snap.svg is that it is simple to get set up and gives us a tremendous amount of functionality out of the box to manipulate our SVG's. Remove all unused layers and group elements that you feel will be linked together in animation. The biggest thing that will make working with SVG a breeze is to be very organised with your layering and grouping. We recommend you check out this article by Sara Soueidan which has some great tools to help you out. Now rather than putting the vast subject of optimisation into this particular article. The first part of any SVG project should be spent optimising your SVG's, hopefully in your case you have either created them yourself or will have a nice SVG supplied by your design team. There are a few different implementations, some with the focus more on the Snap.svg side of things, then also combining both Snap.svg and CSS animations. ![]()
0 Comments
Leave a Reply. |