siri 声波效果. 请自备支持 HTML5 的浏览器

2014-06-14 15:32:33 +08:00
 liaa
demo: http://blog.kidliaa.com/demo/siri%20wave

前两天特别想亲手写一个siri打开时的动画效果. 发现这个siri动画效果并不是那么简单. 当初认为用bezier曲线就能做到,后来发现没那么简单...搜索后发现完成这样的效果需要用到一个方程:

1. 衰弱方程

尼玛,根本就没接触过啊(大学不是学数学的).方程也就算了,尼玛还要自己调参数. 深深的挫败感,我还是好好学习去吧.

PS: v2ex上做交互的大牛,希望听一下你们是怎么学习(数学怎么学,如何在代码中实践)
8659 次点击
所在节点    分享创造
28 条回复
liteneo
2014-06-14 15:38:38 +08:00
感觉更像水波。。。
liaa
2014-06-14 15:44:38 +08:00
@liteneo 它们本来就很像的...
dongbeta
2014-06-14 16:17:07 +08:00
振幅不变化好生硬,如果可以监测鼠标点击模拟声音输入的强度来调整振幅的话,就太好了。
liaa
2014-06-14 16:19:39 +08:00
@dongbeta 目前是根据背景音乐来调整幅度的.

PS: 请使用Chrome观看
ChiangDi
2014-06-14 18:08:18 +08:00
优雅,艺术
RIcter
2014-06-14 19:36:42 +08:00
好贊!!!!
求放到github 0w0
xxr3376
2014-06-14 20:36:57 +08:00
@liaa 可以考虑调用Audio API,直接读取麦克风的声音呀!以及求github开源!
liaa
2014-06-14 21:07:59 +08:00
@RIcter @xxr3376 直接看index.js就好了. 如果想要控制曲线的化.可以修改 Noise和F参数

Noise: 控制震动幅度(0~1, 越大曲线震动的越高)
F : 控制单个波浪起伏的个数

目前我就是读取音源的声音大小来更新这两个值的.
xxr3376
2014-06-14 21:25:58 +08:00
@liaa Thx
zhujinliang
2014-06-14 21:51:34 +08:00
挺不错,赞一个
同用到数学公式时深深的挫败感
RIcter
2014-06-14 22:19:27 +08:00
@liaa 震動的寬度範圍能不能調整,我想再讓它往兩邊拉伸一下>_>
liaa
2014-06-14 22:25:37 +08:00
@RIcter 调整K值即可
Mutoo
2014-06-14 23:22:29 +08:00
推荐你一个大神的博客 acko.net
他的两个讲座非常棒:
Making Things With Maths
Making WebGL Dance
Dzinlife
2014-06-14 23:47:28 +08:00
liaa
2014-06-14 23:58:24 +08:00
@Dzinlife 是的,在这基础上做的...
Dzinlife
2014-06-15 03:13:11 +08:00
@liaa 哦,那就根本没牵扯到图形算法嘛,不过你改变系数的时候至少要做一层缓冲,突变是非常生硬的。
cnallenzhao
2014-06-15 03:25:34 +08:00
背景音很好听,求一发。。
GPU
2014-06-15 14:18:30 +08:00
Chrome 35 稳定版 , 加载5分钟反应呢?
Vindia
2014-06-15 14:20:41 +08:00
@liaa 求BGM
GPU
2014-06-15 14:21:09 +08:00
@liaa 好吧 。第一次加载没反应 。需要刷新一下才加载成功 。还有可以自定义歌曲吗?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/117485

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX