欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

svg动画实例解析

程序员文章站 2023-11-12 19:50:52
svg动画 首先,根据基础篇我们可以知道svg里面有很多元素,如果我们需要让他们动起来,我们可以用svg里面的animate元素。 pia个最简单的例子,一条线,他开始的位置会横向移动。(由于我不...

    svg动画

    首先,根据基础篇我们可以知道svg里面有很多元素,如果我们需要让他们动起来,我们可以用svg里面的animate元素。

    pia个最简单的例子,一条线,他开始的位置会横向移动。(由于我不会做gif,所以你们自己试试吧,我就不放动态图了^v^)

    再来个例子

    同理的,只是会跑到200然后再回来

    我们讲下animate元素里面的参数的意义吧。

    attributename 属性名称。就是你要修改的是当前所在元素的哪个属性

    attributetype

    dur 持续时间

    repeatcount重复次数。数值 或indefinite(无限)

    calcmode 指定动画的插值模式,也就是动画的效果

    discrete 离散。从一个值调到另一个值

    linear 线性。从一个值类似滑动到另一个值

    paced 匀速。匀速变化。如果定义了paced则 keytimes keysplines会被忽略

    spline 贝塞尔曲线。曲线的点在 keysplines 属性中定义

    keytimes 类似css的@keyframes(如果不知道是什么,请先了解css的动画,css的动画相对于svg简单些)设置0~1过程中不同的时间点,以;分割

    values 和keytimes对应,即在不同时间内到达何种位置

    keysplines 以;分割。比如 a,b,c,d; 这一组的意思是cubic-bezier(a,b,c,d)。而由于这个是表示两个时间点之间的动画,所以它的数值会是keytimes的数量-1

    from to 从哪开始,从哪结束
    by 变化值,当有to的时候,这个失效

    这里有几个例子,先扔这把

    这个的效果就是长方形不断改变宽度