Graphical Web 2016: SVG Animations

Transcript

1. SVG Animations Jacob Tomlinson Senior Engineer Informatics Lab

2. Designing Correcting Styling Animating Limitation

3. None

4. Designing

5. None
6. None
7. None

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 "/>
11. None

12. Styling

13. None

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>
16. None

17. $logo_blue: #36B7BC; $logo_pink_strong: #E5007E; ... #background { .main { fill:

    $logo_blue; } .accents { fill: $logo_pink_strong; } ... }
18. None

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) } } }
23. None
24. None

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

30. None
31. None

32. Thank You