上图为SVG图片轮播,每个图展示3秒,循环展示
图片使用公众号图片地址,设置背景图片,设置svg动效连续移动
使用<g>标签
参考文档
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
这个元素用来对其他svg元素分组,是一个容器
并且<g>标签定义的属性和动画会作用在容器中的子元素上
所以本文的动效会作用在<g>标签上
参考案例
使用<foreignObject>标签
这个标签可以用来插入外部html元素,也就是可以在svg中引入html或者引入子svg
参考文档
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
参考案例
所以本文的三个图片会分别使用这个标签来放置在同一个svg标签中
使用<animateTransform>标签
这个标签用来设置属性动画,其效果主要是设置平移,缩放,旋转或者倾斜等
参考文档
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform
参考示例
本文会用到属性
设置动画效果为平移
attributeName=”transform”
type=”translate”
设置时间轴和位移距离和速度曲线
values=””
keyTimes=””
keySplines=””
设置动画起始时间,执行时间和执行次数
begin=””
dur=””
repeatCount=””
其中贝塞尔曲线是速度动画执行的效果
取值为红框部分,可以使用在线工具获取常用的值
为了使轮播首位循环展示
这里设置每个图片展示3秒,总共展示3图,所以动画执行总时间是3*3=9秒(特别注意,如果是4图,那就是总执行12秒,以此类推)
同时keyTimes设置的时间间距也为3秒,也就是3/9=0.3333的数值间隔,如果展示时间变化,总执行时间也有联动变化
END.
