1 / 14

SVG Animation(SMIL)

SVG Animation(SMIL). Relationship to SMIL Animation. Animate allows scalar attributes and properties to be assigned different values over time Set

dorit
Download Presentation

SVG Animation(SMIL)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SVG Animation(SMIL)

  2. Relationship to SMIL Animation • Animate • allows scalar attributes and properties to be assigned different values over time • Set • a convenient shorthand for 'animate', which is useful for assigning animation values to non-numeric attributes and properties, such as the 'visibility' property • AnimateMotion • moves an element along a motion path • AnimateColor • modifies the color value of particular attributes or properties over time

  3. extensions to SMIL Animation • AnimateTransform • modifies one of SVG's transformation attributes over time, such as the transform attribute • path attribute (AnimateMotion) • mpath element (AnimateMotion) • keyPoints attribute (AnimateMotion) • rotate attribute(AnimateMotion)

  4. Animate • Target attribute: • attributeName • attributeType = “CSS|XML|auto” • Timing control • Begin • Dur • End • Min • Max • Restart • Repeatcount • Fill

  5. Set • The 'set' element provides a simple means of just setting the value of an attribute for a specified duration. • to <set attributeName="visibility" attributeType="CSS"to="visible"begin="3s"dur="6s"fill="freeze" />

  6. animateMotion • Path • Path • mpath • keyPoints • Rotate • Origin <animateMotiondur="6s"repeatCount="indefinite"path="M100,250 C 100,50 400,50 400,250"rotate="auto" />

  7. animateColor • From • To <animateColorattributeName="fill" attributeType="CSS"from="rgb(0,0,255)"to="rgb(128,0,0)"begin="3s"dur="6s"fill="freeze" />

  8. animateTransform • Translate • Scale • Rotate • skewX • skewY <rect transform=“skewX(30)rotate(90)scale(2)" ... /> <rect transform=“skewX(30)"...> <animateTransformattributeName="transform" attributeType="XML" type="rotate"from="0"to="90"dur="5s"fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="scale"from="1"to="2"dur="5s"fill="freeze"/> </rect>

  9. Example • Exsample1 • 原始檔 • svg • Exsample2 • 原始檔 • svg

  10. SVG的色彩效果

  11. filter <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="400" height="400"> <defs> <filter id="Gaussian_Blur1"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> </filter> </defs> <rect x="59" y="77" width="163" height="34" style="filter:url(#Gaussian_Blur1);fill:rgb(128,128,0);stroke:rgb(128,0,128);stroke-width:5;" /> </svg>

  12. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"> <defs> <filter id="Turbulence"> <feTurbulence baseFrequency="0.03 0.02" numOctaves="2" type="turbulence" result="turbulenceOutput"/> <feComposite in="turbulenceOutput" in2="SourceAlpha" operator="in"/> </filter> </defs> <path d="M193.1 79.292 C224.16 88.7968 242.127 121.499 232.627 154.414 C223.127 187.328 239.995 220.003 271.913 229.504 C303.83 239.006 336.35 218.61 345 188.876 C323.124 264.909 248.755 285.576 198.994 270.349 C149.231 255.12 98.1789 196.096 120.144 119.992 C129.376 88.0081 162.039 69.7869 193.1 79.292 zM167.341 136.242 C167.341 141.144 170.673 145.311 176.03 145.311 C181.386 145.311 184.242 140.899 184.242 136.242 C184.242 131.584 180.796 127.762 175.91 127.785 C171.025 127.809 167.341 131.339 167.341 136.242 z" style="fill:rgb(192,192,255);stroke:rgb(130,0,61);stroke-width:1;filter:url(#Turbulence);" /> </svg>

  13. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"> <defs> <linearGradient id="violet-orange" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad" gradientUnits="objectBoundingBox"> <stop offset="0%" style="stop-color:rgb(216,192,216);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(175,23,87);stop-opacity:1"/> </linearGradient> </defs> <ellipse cx="204" cy="193.5" rx="75" ry="67.5" style="fill:url(#violet-orange);stroke:rgb(74,74,80);stroke-width:1"/> < /svg>

  14. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"> <defs> <radialGradient id="fade-to-black" cx="20%" cy="48%" r="50%" fx="50%" fy="10%" spreadMethod="pad" gradientUnits="objectBoundingBox"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="229.5" cy="200.5" rx="112.5" ry="100.5" style="fill:url(#fade-to-black)"/> </svg>

More Related