click 文字可以 点击 图片不起作用_SVG图片也可以实现动画效果

SVG图片可以做成动画？对，你没有看错，SVG图片是可以做出动画效果的，而且还可以做成可交互的动画。

是不是迫不及待的想看看，想学学？

今天我就带着大家一起来做一个可交互的svg动画。内容会涉及一点点前端的代码，如果你不会也没关系，跟着做完就会了。

先来个最终效果

点击炮竹许下心愿

怎么样，效果还不错吧~~~

接下来，就是干货讲解了，注意看

1、先做一个背景图(不管你是用PS、Sketh，还是别的什么软件)，保存为jpg格式。本实例的背景图为：640*750px

2、接下来，需要做4张小图，分别保存为svg格式。

注意事项：文字一定要转为形状！！！文字一定要转为形状！！！文字一定要转为形状！！！

3、开始准备构建svg图片。

你有代码编辑器的可以用编辑器，没有的话可以用系统自带的记事本，将下面这段代码copy到你的记事本中，保存(与第一步做的背景图保存在同一目录下，格式为svg，例如：动画.svg)。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">svg>

代码说明：

background-image:url(“背景图片的路径”)  

4、加入文字“点击炮竹许下心愿”

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">    <g>        <text x="200" y="540" fill="#F03A51" style="font-size: 30px">点击炮竹许下心愿text>    g>svg>

代码说明：

x：代表横坐标

y：代表纵坐标

fill：文字颜色

font-size：文字大小

5、给文字加上动效

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">    <g>        <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite">animate>        <text x="200" y="540" fill="#F03A51" style="font-size: 30px">点击炮竹许下心愿text>    g>svg>

代码说明：

介绍下

attributeName ，为动画控制的属性，这里为opacity透明度。

begin ，为动画开始时间，可以理解为延迟时间。0s表示立即开始动画。也可以是分号分隔的一组值，例如beigin="3s;5s"，表示的是3s之后动画开始，6s时候动画再重新开始(如果之前动画没走完，会立即停止从头开始)。

dur ，为动画时间，dur越小，动画越快。

values ，表示attributeName指定属性的值变化,可以是一个值，也可以是用分号分隔的多个值，这里的"1;0;1"表示“不透明->透明->不透明”，即闪烁效果。

repeatCount ，表示动画重复次数，indefinite=无数次

到这一步，可以预览一下你的svg图片(不会预览的，直接用你的浏览器打开svg图片)。

文字是不是一闪一闪的啦 ~

6、加入一个炮竹和一个心愿签。

同样用代码编辑器(或是记事本)打开你的“炮竹.svg”和“心愿签1.svg”。

是不是看到了一大堆的代码，这个时候不要慌，我们掐头去尾取中间，把和忽略，剩下的全部copy，然后到你的贴到svg动画的代码中。

示例：

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">    <g>        <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite">animate>        <text x="200" y="540" fill="#F03A51" style="font-size: 30px">点击炮竹许下心愿text>    g>    <g>        <g style="transform: translate(140px, 580px);">            这里粘贴你的炮竹代码        g>        <g style="transform: translate(120px, 560px);opacity: 0">            这里粘贴你的心愿签代码        g>    g>svg>

代码说明：

transform: translate(x, y)：分别是你炮竹、心愿签的位置，对应横坐标和纵坐标。需要调整好位置。

7、给炮竹、心愿签加入动效。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">    <g>        <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite">animate>        <text x="200" y="540" fill="#F03A51" style="font-size: 30px">点击炮竹许下心愿text>    g>    <g>        <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never">animateTransform>        <g style="transform: translate(140px, 580px);">            这里粘贴你的炮竹代码        g>        <g style="transform: translate(120px, 560px);opacity: 0">            <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never">animate>            这里粘贴你的心愿签代码        g>    g>svg>

代码说明：

type，attributeName="transform"的值，可以是 translate、scale、rotate、skewX、skewY。

fill ，动画间隙的填充方式。支持参数有：freeze、remove。remove是默认值，表示动画结束直接回到开始的地方。freeze表示动画维持结束后的状态。

restart ，支持的参数有always、whenNotActive、never。always是默认值，表示每点一次重新执行动画；whenNotActive表示动画正在进行的时候不能重启动画；never表示动画仅执行一次。

begin ，延迟时间，上面已讲过，这里补充下click，表示点击后立即触发， click+2表示点击后2秒触发。

现在我们已经实现了点击爆竹后升天的效果。

最后，剩下两个爆竹，只需按照以上步骤，替换心愿签的图片，然后调整位置即可，这里就不再说了。

这篇文章可能对设计师、交互设计师来说，稍稍有一点深奥，不过没关系。如果有看不懂的地方，欢迎在公众号给我留言，我会一一帮助大家解决问题的。

如果感觉这篇文章帮到了你，记的点赞、关注哦~！

/  E N D  /