git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/volumn

说明

这个动画的效果就是多个线条的高度发生变化,使用了两种写法(css,svg)来实现。

CSS实现

  • 定义线条的节点,可以使用伪元素实现。
  • 使用 CSS3 的 animation 属性给元素定义动画样式。
  • 每个元素定义的动画的延时时间不固定。
@-webkit-keyframes slide{
0%{height:0;}
100%{height:50px;}
}
.m-box .line:nth-child(1){
-webkit-animation:slide 1.2s linear .5s infinite alternate;
}
.m-box .line:nth-child(3){
-webkit-animation:slide 1.2s linear .75s infinite alternate;
}

SVG实现

使用animate元素来实现。原理一样,通过改变元素的高度。

  • x="20",通过改变 x 坐标的值来给动画元素定位。(这里指的橙色线条)
  • 修改 animate 标签上的 begin 属性值来定义元素动画的延时时间。
  • svg 动画无法像 CSS 动画一样,定义轮流反向播放动画的效果。所以动画有些生硬。
<svg width="300" height="300" version="1.2" xml:space="default">
<rect height="0" width="5" rx="2.5" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.5s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="10" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="20" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.75s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="30" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.25s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="40" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.5s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
</svg>

结论

  • svg 动画无须定义样式,完全通过定义标签的属性来定义动画。
  • svg 动画不能定义轮流反向播放动画的效果。

SVG动画实践篇-音量变化效果的更多相关文章

  1. SVG动画实践篇-模拟音量高低效果

    git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/demo/step2/volumn 说明 这个动画的效果就是多个线条 ...

  2. SVG动画实践篇-无中生有的线条动画

    git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/path 说明 这个动画实现的是线条动画,主要用 ...

  3. SVG动画实践篇-字母切换

    git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/letter.change 说明 这个页面实现了 ...

  4. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

  5. SVG动画

    动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...

  6. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

  7. HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  8. 10 个非常实用的 SVG 动画操作JavaScript 库

      SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...

  9. 10 个非常有用的 SVG 动画的 JavaScript 库

    SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库 ...

随机推荐

  1. UVA - 11054 Wine trading in Gergovia 扫描法

    题目:点击打开题目链接 思路:考虑第一个村庄,如果第一个村庄需要买酒,那么a1>0,那么一定有劳动力从第二个村庄向第一个村庄搬酒,这些酒可能是第二个村庄生产的,也可能是从其他村庄搬过来的,但这一 ...

  2. Linux学习-开放源码的软件安装与升级简介

    什么是开放源码.编译程序与可执行文件 我们说过,在 Linux 系统上面,一个文件能不能被执行看的是有没有可执行的那个权限 (具有 x permission),不过,Linux 系统上真 正认识的可执 ...

  3. jenkins配置邮箱时出错

    jenkins配置邮箱时出错: 这有可能是此博客http://www.cnblogs.com/yajing-zh/p/5109517.html在配置jenkins发送邮件时的第4步和第5步中的邮箱不匹 ...

  4. selenium2-元素管理方式及解析

    1.管理文件格式:yaml 2.Yaml里面的内容格式:   3.格式说明: baidu_input后面接上":",直接回车,然后空两格 type与value这两个key是固定 ...

  5. C++实现Behavioral - Observer模式 (转)

    转http://patmusing.blog.163.com/blog/static/13583496020101501923571/ 也称为Dependents或Publish-Subscribe模 ...

  6. HDU 4565 So Easy! 矩阵快速幂

    题意: 求\(S_n=\left \lceil (a+\sqrt{b})^n \right \rceil mod \, m\)的值. 分析: 设\((a+\sqrt{b})^n=A_n+B_n \sq ...

  7. Makefile基础(三)

    第一章:C语言之Makefile基础(一) 第二章:C语言之Makefile基础(二) 再来看一个简单的例子: [root@localhost linux_c]# cat Makefile foo = ...

  8. Python类元编程

    类元编程是指在运行时创建或定制类.在Python中,类是一等对象,因此任何时候都可以使用函数创建新类,而无需用class关键字.类装饰器也是函数,不过能够审查.修改,甚至把被装饰的类替换成其他类.元类 ...

  9. 中国首届CSS开发者大会讲师照片

    中国首届CSS开发者大会讲师照片 Bert Bos Winter 点头猪 灭灭 jaychsu Hax 尤雨溪 一丝 勾三股四 小倩 **

  10. MAC OS X 终端命令入门

    在这里记下..防止丢失 pwd 当前工作目录 cd(不加参数) 进root cd(folder) 进入文件夹 cd .. 上级目录 cd ~ 返回root cd - 返回上一个访问的目录 rm 文件名 ...