Animation

理解动画中的线性插值

在传统(手绘)一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。现场传递给助理,一般是实习生或者初级艺术家在此基础上做一些其他性的工作,具体的说,他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅,更自然。还记得在小学的时候,老师告诉你电脑是笨蛋吗?电脑需要被告知一系列的确切步骤,他们才知道需要做什么。今天我们来看看这一序列的步骤或算法,帮助计算机绘制动画关键帧之间必要的中间画。

线性插值

最近在看Canvas的一些动画实例当中,时常看到lerp()这个函数,一直以来并不知道这个函数起什么作用,有什么特性。今天花了一些时间,Google了一下,才知道这个函数是线性插值。那么线性插值是个什么鬼?他在一些程序中又起啥作用?这就是这篇文章要探讨和学习的。

CSS Animations vs Web Animations API

上周,我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议,尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。

CSS自定义属性制作动画

CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同,但这篇文章我们要聊的并不是这个东东,咱们想聊聊CSS自定义属性怎么制作动画。

一起画只百度熊吧

如果你也喜欢萌萌的百度熊,如果你也喜欢SVG,如果你也喜欢动画,那一起动手来写写这个Demo。看看如何使用SVG写一个会动的,萌萌的百度熊

你所不知道的animation-fill-mode细节

这两天一直在探究CSS Animation中animation-fill-mode属性中的细节,那是有原因的,具体原因是什么就不多说了。虽然在《理解animation-fill-mode属性》一文让我稍加对该属性有一定的了解。但还有一些潜在的细节和因素还是不为人知。所以我决定花一定的时间彻底的来剖析animation-fill-mode。如果你感兴趣,请继续往下阅读。

理解animation-fill-mode属性

我相信很多前端开发人员都有基于CSS @keyframes创建动画的经历。甚至其中有很多人创建了一些很复杂的动效和去实验这个特性。如果你想要全面了解这篇文章将要介绍的内容,建议你花点时间阅读我2011年在Smashing Magazine介绍的一个主题,这篇文章也是非常不错的。不过,在今天这篇文章中,我并不想介绍有关于CSS动画中所有的属性,我只想专注于CSS动画中的一个属性:animation-fill-mode属性。这个动画属性对动画影响并不很明显。例如没有人会对CSS动画中animation-nameanimation-duration等属性感到困惑。但对于animation-fill-mode呢?我们接下来通过一些简单的示例来阐述。

这样使用GPU动画

大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分。 例如,使用transform属性的CSS动画看起来比使用lefttop属性的动画更平滑。 但是如果你问,“我如何从GPU获得平滑的动画?”在大多数情况下,你会听到像“使用transform:translateZ(0)will-change:transform这样的建议。

CSS Animation性能优化

CSS Animation是实现Web Animation方法之一,其主要通过@keyframesanimation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,咱们来聊聊CSS Animation性能相关的话题。

【转载】HTML5 控制装置陀螺仪 ( 三轴 )

自从几年前入手智能型手机之后,对于行动装置上特有的陀螺仪 ( 三轴 ) 侦测与感应器就蛮感兴趣的,而相关的应用除了在一些典型的 APP 里头很常见之外 ( 指南针、水平仪、星空定位...等 ),在游戏里头更是屡见不鲜 ( 赛车、跑酷、飞行、滚球...等 ),但撇除 APP 不谈,过去在网页里头要使用陀螺仪的三轴感测,几乎是不可能,应该是说沒这个必要,因为在智能行动装置尚未普及的年代,谁会搬台电脑转来转去呢?

页面

返回顶部