必威体育下载克里斯蒂安·海尔曼

“动画”标签的文章

使用canvas进行动画制作,并使用JavaScript创建CSS3动画

星期一,9月5日2011年

昨天我们去了a克拉科夫的酷公园,波兰他们都在哪里儿童物理实验(和我):

物理公园展览

一直让我着迷的事情之一是非同心圆变成三维圆锥体的视觉错觉。拍下以下照片:

non-concentric圈

然后旋转它,你就明白我的意思了(视频screenr)。

现在,回来后(像其他孩子一样)我想为自己重新制作这个,事实上很简单的HTML5帆布.如果你得到下面的嵌入,然后单击“播放”按钮查看结果。

检查源代码。从本质上说,你所做的就是用黑白交替的颜色绘制一些同心圆,然后缩小它们的半径。你不用保持圆心不变,而是用正弦波把圆心向后移动。

动画的工作原理很简单,只需旋转画布的中心-不需要计算循环的旋转。

这也是让我感到不适的地方:主图像没有改变,我们只是旋转betway体育官方网画布,在动画中不需要绘制循环。虽然性能似乎不错(至少在这台MacBook Air上是这样)。我很确定没有计算圆的动画会更平滑,资源消耗更少。这就是为什么我在一个画布上画圆圈,然后把它复制成动画的图像。你可以看到这两幅油画(一幅浅灰色的油画)在这个演示.再一次,如果你得到下面的嵌入,然后单击“播放”按钮查看结果。

下一步就是接受大家现在告诉你的建议并思考CSS动画,因为它是硬件加速和更好(需要引文,但那是我得到的印象)。我所做的就是旋转画布,这样做似乎是个好主意。所以,在里面下一个例子是CSS只在作画时使用帆布:

光滑!我喜欢。我不喜欢的是现在它在歌剧中没有任何作用。另一件让我恼火的事是CSS非常冗长,因为我必须为每个浏览器重复使用不同前缀的所有动画信息和关键帧。

所以我想看看我能不能用CSS支持动画时,动态创建动画。这是可以做到的,但不是那么容易。检查结果.

这似乎很管用,在Opera和其他浏览器中尝试它,以查看不同之处并获取使用哪种动画的信息。如果我使用转换而不是动画,那就更简单了。现在看来,你不能进入,轻松创建和更改关键帧。这篇文章有关于这个问题的更多信息乔·兰伯特又做了一次展示.这让你怀疑我们是否应该在JS和CSS动画。

谷歌又在玩球了——很漂亮,但仍然没有HTML5

星期一,2月7日,2011年

正如刚刚宣布的-谷歌IO会议注册是开放的,他们创造了一个非常酷的倒计时动画:

谷歌I / O

在博客中,他们把酷倒计时描述为HTML5:

如果你喜欢我们的 HTML5倒计时,继续关注更多惊喜。我们会在网站上向您公布2011年谷歌I/O的最新发展,在twitter(@googleio)和google buzz上。早点去买票——去年我们的票以创记录的时间卖光了。

虽然很棒,没有什么新鲜事HTML现在就在那里。这一次不需要美化——代码根本没有缩小或压缩,其中包括我喜欢的评论,谢谢你们!似乎大部分的工作都是由马特·金完成的,球使用box2D物理引擎。

奇怪的是,但是它不使用帆布标签的动画(如box2d所做的),但是创建的图像会四处移动。我想这是一个性能问题,但是看到这个工商管理硕士倒计时半分钟后,它的风扇就开始运转了,但效果并不太好。

由谷歌IO网站上的脚本创建的图像

也没有任何新语义的迹象HTML源文件中的元素-而不是头文件,section和footer有带id的div。有一个无脚本元素告诉人们去whatbrowser.org下载一个更好的浏览器,如果它不适合您,还可以下载动画的屏幕截图。这是让人们兴奋的好方法,但我不知道你为什么需要a无脚本不管怎样,当你生成球的所有图像时。只需在页面加载时替换此消息。

把记录放在这里,感谢您保持源代码开放,谷歌!

8位乐高动画,盲飞客,代码协作,英国邮政编码和SVG的IE

星期一,8月24日,2009年

今天早上让我开心的事情:

TTMMHTM:马里奥·本托,YUI3,可访问性的采访中,英国可穿戴计算纸浆小说印刷术和活性炭

星期二,7月21日,2009年