<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="刘帅" />
<meta name="generator" content="notepad++" />
<title>animate动画</title>
</head>
<body>
<!--SVG（Scalable Vector Graphics）是可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），
用于描述二维矢量图形的一种图形格式。详情可进链接https://developer.mozilla.org/en-US/docs/Web/SVG-->
<svg width="8cm" height="3cm" viewBox="0 0 800 300">
<desc>几个基本动画元素</desc>
When the current SVG document fragment is rendered as SVG on visual
media, <desc> elements are not rendered as part of the graphics.
Alternate presentations are possible, both visual and aural, which
display the <desc> element but do not display <path> elements or other
graphics elements. The <desc> element generally improves accessibility
of SVG documents.
-->
<!--创建一个白色矩形，笔画颜色为蓝色，画笔宽度为2px-->
<rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2" />
<!--矩形位置和大小的动画-->
<rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255, 255, 0)">
<!--矩形动画时长为9s-->
<animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>
<!--创建新的用户坐标空间，所以text是从新的(0,0)开始，后续的变换都是针对新坐标系的-->
<!--g为group的缩写-->
<g transform="translate(100, 100)">
<!--下面使用了set去动画visibility，然后使用animateMotion，animate和animateTransform执行其他类型的动画-->
<text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden">
动画播放!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="6s" fill="freeze" />
<!--<animateMotion>让图像元素按路径定义的方式运动-->
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS" from="rgb(0, 0, 255)" to="rgb(128, 0, 0)" begin="0s" dur="6s" fill="freeze" />
<!--<animateTransform>指定图形的变换、缩放、旋转和扭曲等。-->
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="0s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="0s" dur="6s" fill="freeze" />
</text>
</g>
</svg>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="刘帅" />
<meta name="generator" content="notepad++" />
<title>animate动画</title>
</head>
<body>
<!--SVG（Scalable Vector Graphics）是可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），
用于描述二维矢量图形的一种图形格式。详情可进链接https://developer.mozilla.org/en-US/docs/Web/SVG-->
<svg width="8cm" height="3cm" viewBox="0 0 800 300">
<desc>几个基本动画元素</desc>
<!--翻译起来太麻烦，索性就不翻译了，如下：
Each container element or graphics element in an SVG drawing
can supply a description string using the <desc> element where the
description is text-only.When the current SVG document fragment is rendered as SVG on visual
media, <desc> elements are not rendered as part of the graphics.
Alternate presentations are possible, both visual and aural, which
display the <desc> element but do not display <path> elements or other
graphics elements. The <desc> element generally improves accessibility
of SVG documents.
-->
<!--创建一个白色矩形，笔画颜色为蓝色，画笔宽度为2px-->
<rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2" />
<!--矩形位置和大小的动画-->
<rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255, 255, 0)">
<!--矩形动画时长为9s-->
<animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>
<!--创建新的用户坐标空间，所以text是从新的(0,0)开始，后续的变换都是针对新坐标系的-->
<!--g为group的缩写-->
<g transform="translate(100, 100)">
<!--下面使用了set去动画visibility，然后使用animateMotion，animate和animateTransform执行其他类型的动画-->
<text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden">
动画播放!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="6s" fill="freeze" />
<!--<animateMotion>让图像元素按路径定义的方式运动-->
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS" from="rgb(0, 0, 255)" to="rgb(128, 0, 0)" begin="0s" dur="6s" fill="freeze" />
<!--<animateTransform>指定图形的变换、缩放、旋转和扭曲等。-->
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="0s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="0s" dur="6s" fill="freeze" />
</text>
</g>
</svg>
</body>
</html>
扫一扫
3869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
