home *** CD-ROM | disk | FTP | other *** search
/ PC World 2004 December / PCWorld_2004-12_cd.bin / novinky / Interval / podklady / hejral / 966 / 0992-anim-key-splines.svg < prev   
Extensible Markup Language  |  2004-10-12  |  2KB  |  55 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2.  
  3. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"   "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd" [
  4.     <!ENTITY st0 "font-family:'Helvetica';">
  5.     <!ENTITY st1 "font-size:30;">
  6. ]>
  7.  
  8. <!--Copyright 1999 Adobe Systems. You may copy, modify, and distribute this file, if you include this notice & do not charge for the distribution. This file is provided "AS-IS" without warranties of any kind, including any implied warranties.-->
  9.  
  10. <svg xml:space="preserve" width="320" height="160" viewBox="-10 -10 840 420">
  11. <title>9.9.2 Demonstruje calcMode="spline" spolu s nastavenim keySplines</title>
  12.  
  13. <rect style="&st0;&st1;fill:none;stroke:gray" x="-8" y="-8" width="420" height="416"/>
  14. <text style="&st0;&st1;fill:gray" x="440" y="50">keySplines="0 0 1 1"</text>
  15. <text style="&st0;&st1;fill:green" x="440" y="90">keySplines=".5 0 .5 1"</text>
  16. <text style="&st0;&st1;fill:red" x="440" y="130">keySplines="0 .75 .25 1"</text>
  17. <text style="&st0;&st1;fill:blue" x="440" y="170">keySplines="1 0 .25 .25"</text>
  18.  
  19. <circle cx="200" cy="300" r="10" style="fill:gray">
  20.  
  21.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  22.  
  23.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  24.  
  25. </circle>
  26.  
  27. <circle cx="200" cy="300" r="10" style="fill:green">
  28.  
  29.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines=".5 0 .5 1" dur="5s" repeatCount="indefinite"/>
  30.  
  31.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  32.  
  33. </circle>
  34.  
  35. <circle cx="200" cy="300" r="10" style="fill:red">
  36.  
  37.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines="0 .75 .25 1" dur="5s" repeatCount="indefinite"/>
  38.  
  39.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  40.  
  41. </circle>
  42.  
  43. <circle cx="200" cy="300" r="10" style="fill:blue">
  44.  
  45.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines="1 0 .25 .25" dur="5s" repeatCount="indefinite"/>
  46.  
  47.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  48.  
  49. </circle>
  50.  
  51. </svg>
  52.  
  53.  
  54.  
  55.