现代 CSS

Animation

DIY Web Animations: Promise + rAF + Transition

Web Animation API非常的棒。除了能很好的支持平常动画之外。我发现还可以使用Promise、rAF和CSS Transition来重新创建它们,结果类似人体工程学。

【转载】WAAPI

WAAPI 让我们能够构建动画并控制动画的播放。WAAPI 向开发者开放了浏览器的动画引擎,开发者可以通过 Javascript 接口来操作该引擎。该 API 是基于 CSS 动画和 CSS 过渡实现的,并且考量了未来可能会增加的动画效果。它是 Web 平台支持的实现动画的最高效的方式之一,在该方式下浏览器能够进行内部优化,因而不再需要所谓的黑科技、强制性的技巧和 requestAnimationFrame 方法。通过 WAAPI,我们可以很大程度上将交互动画从样式转移到 JS 上,将行为与表现分离。我们不再需要依赖很多的 DOM 技巧来控制动画的播放,比如直接赋值 CSS 属性或者切换类名。并且与简单、声明式的 CSS 不同,JS 允许我们动态地改变样式属性或播放选项。对需要构建自定义动画库和开发动画接口的开发者来说,WAAPI 可能是最酷的工具了。让我们来看看它都可以做什么。

CSS Animations vs Web Animations API

JavaScript提供了动画原生API,被称为Web Animations API。在这篇文章中我们称之为WAAPI。MDN有详细的文档,而且@Dan Wilson写了一个系列的文章来介绍WAAPI。在这篇文章中,我们将比较WAAPI和CSS Animation之间的差异。

渐进式动画解决方案

今天聊的内容是淘宝虚拟互动实验室的@渚薰大神 在2017年06月在北京GMTC大会上分享的一个主题。未能亲临听到相关的精彩分享,但还算是有幸的,在内部听到@渚薰大神 的分享。个人对Web动画这方面的课程非常的感兴趣,而且现在和团队一直在致力于手淘互动动效相关的研究。经历了从Gif、视频到CSS Animation的零至一的过程,并且致力于JavaScript驱动的动效开发,以及现在致力于研究的数据化驱动的动效。这样的一个过程是幸福的,而且也是具有挑战力的。我想很多喜欢动画的同学也对这样的一个课程会感兴趣,所以接下来,我们根据@渚薰大神分享的PPT的思路来聊聊渐进式动画解决方案

使用浏览器开发者工具检测CSS动画性能

CSS动画性能非常好。虽然是简单的几个动画元素,如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂,网站的用户可能很快就会发现,并且有可能让用户觉得恶心。反而得不到相应的好评。在这篇文章中,我将介绍浏览器开发者工具的一些有用的功能,这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样,当你的动画看起来有点卡(帧率图有点波涛汹涌),你会找到地应的方法知道为什么为会这样以及如何解决它。

理解动画中的线性插值

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

线性插值

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

CSS Animations vs Web Animations API

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

CSS自定义属性制作动画

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

一起画只百度熊吧

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

页面

返回顶部