home *** CD-ROM | disk | FTP | other *** search
/ PC World 2006 February / PCWorld_2006-02_cd.bin / novinky / Interval / podklady / hejral / 1145 / 0992-anim-key-splines.svg < prev    next >
Extensible Markup Language  |  2005-05-05  |  2KB  |  57 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 version="1.1" baseProfile="tiny" 
  11.      xmlns="http://www.w3.org/2000/svg"
  12.      xml:space="preserve" width="320" height="160" viewBox="-10 -10 840 420">
  13. <title>9.9.2 Demonstruje calcMode="spline" spolu s nastavenim keySplines</title>
  14.  
  15. <rect style="&st0;&st1;fill:none;stroke:gray" x="-8" y="-8" width="420" height="416"/>
  16. <text style="&st0;&st1;fill:gray" x="440" y="50">keySplines="0 0 1 1"</text>
  17. <text style="&st0;&st1;fill:green" x="440" y="90">keySplines=".5 0 .5 1"</text>
  18. <text style="&st0;&st1;fill:red" x="440" y="130">keySplines="0 .75 .25 1"</text>
  19. <text style="&st0;&st1;fill:blue" x="440" y="170">keySplines="1 0 .25 .25"</text>
  20.  
  21. <circle cx="200" cy="300" r="10" style="fill:gray">
  22.  
  23.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  24.  
  25.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  26.  
  27. </circle>
  28.  
  29. <circle cx="200" cy="300" r="10" style="fill:green">
  30.  
  31.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines=".5 0 .5 1" dur="5s" repeatCount="indefinite"/>
  32.  
  33.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  34.  
  35. </circle>
  36.  
  37. <circle cx="200" cy="300" r="10" style="fill:red">
  38.  
  39.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines="0 .75 .25 1" dur="5s" repeatCount="indefinite"/>
  40.  
  41.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  42.  
  43. </circle>
  44.  
  45. <circle cx="200" cy="300" r="10" style="fill:blue">
  46.  
  47.     <animate attributeName="cy" values="400;0" calcMode="spline" keySplines="1 0 .25 .25" dur="5s" repeatCount="indefinite"/>
  48.  
  49.     <animate attributeName="cx" values="0;400" calcMode="spline" keySplines="0 0 1 1" dur="5s" repeatCount="indefinite"/>
  50.  
  51. </circle>
  52.  
  53. </svg>
  54.  
  55.  
  56.  
  57.