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上做交互的大牛,希望听一下你们是怎么学习(数学怎么学,如何在代码中实践)
8660 次点击
所在节点    分享创造
28 条回复
Exin
2014-06-15 20:35:32 +08:00
求BGM
liaa
2014-06-15 22:18:17 +08:00
@cnallenzhao @Vindia @Exin http://blog.kidliaa.com/demo/siri%20wave/sound.mp3

@Dzinlife 是的,也发现这个问题. 接下来要弄这个(其实现在还不知道怎么弄).
Dzinlife
2014-06-15 23:51:05 +08:00
liaa
2014-06-16 01:10:07 +08:00
@Dzinlife 使用之后效果真的很明显,谢谢指点.

让我想到了这句话:
Math is hard, use computer.
Computer is hard, use Math.

另外希望能指点一下应该如何系统的来学习这些东西.上网搜了Interactive Design之类的,也没能看到一些好的答案.
Dzinlife
2014-06-16 02:08:40 +08:00
@liaa 这类东西似乎是 processing 拥有最多的教学资源。D3.js 和 paper.js 官网的showcase里不少大牛的blog也不错。还有就是 codepen.com
vagrancy
2015-01-16 14:13:42 +08:00
这个波形的算法,在音乐比较激烈的情况,由于波形衰减速度过慢,导致整个波形一直维持在一个水平上看不出变化,哪个参数能够加快衰减速度呢。
vagrancy
2015-01-16 15:51:33 +08:00
@liaa 请作者关注下啊
liaa
2015-01-16 17:53:11 +08:00
@vagrancy Dzinife 的公式

const double ALPHA = 0.05;
resultSpeed = ALPHA * currentSpeed + (1.0 - ALPHA) * resultSpeed;

修改ALPHA 参数。

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

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

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

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

© 2021 V2EX