SVG滤镜及动画效果

创建剪切
渐变效果
遮罩效果
嵌入光栅图像

剪切
创建剪切
擦除已经创建的元素的部分内容。
Coding
<defs>
<clipPath id="clipname">
<rect x="x" y="y" width="width" height="height" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#clipname)" />

例子

渐变效果
渐变
有两种类型的渐变：线性渐变和径向渐变。
定义渐变
必须给渐变内容指定一个id属性，以供元素调用。
为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。
调用渐变
<element fill="url(#gradient)" stroke="url(#gradient)" />

线性渐变
<linearGradient>
线性渐变沿着直线改变颜色。
Coding
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="begin" stop-color="color_begin" />
…………
<stop offset="end" stop-color="color_end" />
</linearGradient>
</defs>

例子

径向渐变
<radialGradient>
从一个点开始发散绘制渐变。
Coding
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="begin" stop-color="color_begin" />
…………
<stop offset="end" stop-color="color_end" />
</radialGradient>
</defs>

例子

遮罩效果
Masking
使用透明度和灰度值遮罩计算得的软边缘。
Coding
<defs>

嵌入光栅图像
<image>
SVG的<image>元素允许在一个SVG对象内部呈现光栅图像。
Coding
<image xlink:href="URL" x="x" y="x" width="width" height="height" />
特别说明
如果你没有设置x属性或y属性，它们自动被设置为0。
如果你没有设置height属性或width属性，它们自动被设置为0。
如果width属性或height等于0，将不会呈现这个图像。

SMIL animation概览
animation元素及效果概览
animation参数详解
动画的暂停与播放

SMIL animation概览
SMIL
Synchronized Multimedia Integration Language——同步多媒体集成语言
功能
动画元素的数值属性（X, Y, …）
动画属性变换（平移或旋转）
动画颜色属性
沿着运动路径运动

animation元素及效果概览

<set>
设置，在特定时间之后修改某个属性值。
Coding
<svg width="400" height="400">
<circle cx="200" cy="200" r="50" style="fill:#ff6600" >
<set attributeName="r" attributeType="XML" to="80" begin="3s" />
</circle>
</svg>

例子

<animate>
基础动画元素，实现单属性动画过渡效果。
Coding
<svg width="400" height="400">
<circle cx="200" cy="200" r="50" style="fill:#ff6600" >
<animate attributeName="r" from="50" to="80" begin="0s" dur="3s" />
</circle>
</svg>

例子

<animateTransform>
实现transform变换动画效果。
Coding
<svg width="400" height="400">
<circle cx="200" cy="200" r="50" style="fill:#ff6600" >
<animateTransform attributeName="transform" begin="0s" dur="3s"
type="scale" from="1" to="1.5" />
</circle>
</svg>

例子

<animateMotion>
让SVG各种图形沿着特定的path路径运动。
Coding
<svg width="800" height="800">
<polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" style="fill: #ff6600;" >
<animateMotion path="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0
1, 100 100" dur="3s" rotate="auto" />
</polygon>
</svg>

例子

组合动画
多个动画组合于一个元素，构成复杂动画。
Coding
<svg width="400" height="400">
<circle cx="200" cy="200" r="50" style="fill:#ff6600" >
<animate attributeName="r" from="50" to="80" begin="0s" dur="3s" />
<animate attributeName="opacity" to="0" begin="0s" dur="3s" />
</circle>
</svg>

SVG animation参数详解

attributeName = <attributeName>
要变化的元素属性名称，可以是元素的属性，也可以是CSS属性。
attributeType = "CSS | XML | auto"
三个固定参数，CSS/XML/auto，表明attributeName属性值的列表。
SVG animation参数详解
from, to, by, values
from：动画的起始值。
to：指定动画的结束值。
by：动画的相对变化值。
values：用分号分隔的一个或多个值，可以看出是动画的多个关键值点。

begin, end
begin指动画开始的时间，end指动画结束的时间；
begin="value1;value2"：value1s之后动画走一下，value2s时候动画再走一下；
offset-value：偏移值；
syncbase-value：基于同步确定值；
event-value：与事件相关联的值；
repeat-value：重复多少次之后执行；
accessKey-value：定义快捷键，按下某个按键动画开始；
wallclock-sync-value：真实世界的时钟时间定义；
indefinite：无限等待。

dur
动画持续时间，常规时间值或者"indefinite"， "indefinite"为动画时间无限。
calcMode, keyTimes, keySplines
控制动画快慢曲线。
discrete：from值直接跳到to值；
linear：animateMotion元素以外元素的calcMode默认值，动画从头到尾的速率都是一致的；
paced：通过插值让动画变化步调平稳均匀；
spline：插值定义贝塞尔曲线。

repeatCount, repeatDur
repeatCount表示动画执行次数；repeatDur定义重复动画的总时间。
fill
表示动画间隙的填充方式；
remove：默认值，动画结束直接回到开始的地方；
freeze：动画结束后保持动画结束之后的状态。
SVG animation参数详解
accumulate="sum"
动画结束时候的位置作为下次动画的起始位置。

暂停
svg.pauseAnimations();
播放
svg.unpauseAnimations();
继续已经暂停的动画。

posted @ 2018-12-07 10:54 键1234 阅读(635) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

键1234

SVG滤镜及动画效果

公告