Graphical Web 2016: SVG Animations

Transcript

1. SVG Animations Jacob Tomlinson Senior Engineer Informatics Lab
2. Designing Correcting Styling Animating Limitation
4. Designing
8. Correcting
9. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 207 222" style="enable-background:new 0 0 207 222;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#BEC945;} .st2{fill:#E466A1;} .st3{fill:#36B7BC;} </style> <g> <polygon class="st2" points="102.3,13.5 99.3,8.8 102.3,6.9 "/> <polygon class="st2" points="102.3,13.5 105.3,8.8 102.3,6.9 "/> </g> <g> <polygon id="_438677864_12_" class="st2" points="14.6,162.3 12.1,167.3 8.9,165.6 "/> <polygon id="_438677888_12_" class="st2" points="14.6,162.3 9,162 8.9,165.6 "/> </g> <g> <polygon id="_376294400_12_" class="st2" points="190.8,162.3 196.4,162 196.5,165.6 "/> <polygon id="_376294568_12_" class="st2" points="190.8,162.3 193.3,167.3 196.5,165.6 "/>
10. <polygon points="371.9,179.5 419.3,226.9 419.3,152 "/> <polygon points="466.6,179.5 419.3,226.9 419.3,152 "/> <polygon points="371.9,179.5 382.1,264 354.1,230.3 "/> <polygon points="466.6,179.5 456.4,264 484.4,230.3 "/> <polygon points="218.1,323 282.8,305.7 217.9,268.2 "/> <polygon points="265.4,241 282.8,305.7 217.9,268.2 "/> <polygon points="265.4,241 333.5,292 318.3,250.9 "/> <polygon points="265.4,527.9 282.8,463.2 217.9,500.7 "/> <polygon points="218.1,445.9 282.8,463.2 217.9,500.7 "/> <polygon points="265.4,527.9 333.5,476.9 318.3,518 "/> <polygon points="466.6,589.4 419.3,542 419.3,616.9 "/> <polygon points="371.9,589.4 419.3,542 419.3,616.9 "/> <polygon points="466.6,589.4 456.4,504.9 484.4,538.6 "/> <polygon points="371.9,589.4 382.1,504.9 354.1,538.6 "/> <polygon points="620.4,445.9 555.7,463.2 620.6,500.7 "/> <polygon points="573.1,527.9 555.7,463.2 620.6,500.7 "/> <polygon points="573.1,527.9 505,476.9 520.2,518 "/> <polygon points="573.1,241 555.7,305.7 620.6,268.2 "/> <polygon points="620.4,323 555.7,305.7 620.6,268.2 "/> <polygon points="573.1,241 505,292 520.2,250.9 "/> <polygon points="484.9,176 502.2,240.7 539.7,175.8 "/> <polygon points="566.9,223.4 502.2,240.7 539.7,175.8 "/> <polygon points="271.6,223.4 336.3,240.7 298.8,175.8 "/> <polygon points="353.6,176 336.3,240.7 298.8,175.8 "/> <polygon points="353.6,592.9 336.3,528.2 298.8,593.1 "/> <polygon points="271.6,545.6 336.3,528.2 298.8,593.1 "/> <polygon points="566.9,545.6 502.2,528.2 539.7,593.1 "/>
12. Styling
14. <div class="jumbotron"> {% include images/background.svg %} <div class="container"> {% include images/logo.svg %} <p class="strapline">Visualising the Connected World</p> </div> </div>
15. <div class="jumbotron"> <svg id="background" ... > ... </svg> <div class="container"> <svg id="logo" ... > ... </svg> <p class="strapline">Visualising the Connected World</p> </div> </div>
17. $logo_blue: #36B7BC; $logo_pink_strong: #E5007E; ... #background { .main { fill: $logo_blue; } .accents { fill: $logo_pink_strong; } ... }
19. Animating
20. @keyframes color-cycle { 0% { fill: $logo_pink; } 50% { fill: $logo_green; } 100% { fill: $logo_blue; } }
21. @mixin color-cycle-animation($delay, $time) { animation: color-cycle #{$time + $delay}s ease infinite; animation-direction: alternate; }
22. #logo { @for $i from 1 through 2 { .inner polygon:nth-child(#{$i}n) { @include color-cycle-animation($i, 2) } } }
25. Limitations
26. One animation per selector
27. #logo { .elements { @include color-cycle-animation($i, 2) @include rotation-animation(720) } }
28. #logo { .elements.color { @include color-cycle-animation($i, 2) } .elements.rotate { @include rotation-animation(720) } }
29. Cross browser compatibility
32. Thank You