Animation

TimelineMax: 理解Mechanics

先来看一下一些名词定义?Mechanics的定义是:关注对象受力或位移的行为的区域,以及这些对象对周围环境的后续影响。时间轴是按照时间顺序显示事件序列的方法,有时候也被描述为a project artefact。我们结合这两块内容,学习如何控制和配置我们的动画,这样才知道我们要做什么。

TimelineMax:入门

TimelineMaxGASP的一部分,用于制作Web动画。使用TimelineMax可以控制“任何JavaScript可以触及到”的动画序列(如CSS属性和SVG),而且你不需要对JavaScript非常熟练。本系列教程将从非常基础的知识开始讲起,介绍TimelineMax库和它的基础语法,再到mechanics、tweens、贝塞尔曲线以及很多很多东西。学习的过程中,我们将使用一些实际的demo来辅助大家学习。什么是TimelineMax?它和其它的GreenSock动画平台(GSAP)的库有什么不同?为什么比起TimelineLite更需要TimelineMax?我该如何去理解TimelineMax的参数?如果你有以上的这些疑问,那你就来对地方了~

Web动画API教程: 总结

我们前面已经讲解了很多内容,而且希望能够解决Web动画API到底是什么的问题。在总结这个系列时,我们将回顾一下我们已经讨论的内容,然后再看一下有哪些内容还没有实现的。

Web动画API教程5:可爱的运动路径(Motion Path)

随着API规范已经制定好并且通过,运动路径motion path也先后出现了不同的形式。单方向最初看起来可能是Effect的形式(如上一篇中讨论的GroupEffect),但随后Motion Path作为一个CSS模块慢慢的一点一点地上位(在它的规范中)。

Web动画API教程4:GroupEffects 及 SequenceEffects

我们来继续我们关于Web动画API中多动画的探讨,讨论一下现在polyfill中提供的分组和序列功能。

Web动画API教程3:多个动画

在关于AnimationPlayer和时间轴的讨论之后,我们来看看多动画和多player吧。

Web动画API教程2:AnimationPlayer和Timeline

现在我们已经知道如何使用统一Web动画API创建基本动画了,我们来谈谈动画状态及其控制、回调和时间轴。

Web动画API教程1:创建基本动画

我们已经初步了解了统一web动画API的内容,但是我们还没有真正去对规范的细节进行探讨,所以现在开始吧。WAAPI为你提供了比你用于CSS动画更多的控件,但是在了解它们之前,我们先打一下基础:如何使用这个API创建一个基本的动画?

我们来谈谈Web动画API:简介

大概一年之前,Google在Polymer上宣布了Material Design的存在,并且表示将使用polyfill作为即将到来的统一Web动画API标准。我没有听说过这个API,但是我非常好奇,特别是它提到的MotionPath(运动路径)效果。目前尚未实现(你可以在这系列教程的Part 5中找到相关内容),但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画,这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容,polyfill的进展非常平稳,所以是时候来认真研究一下它了。

使用SVG创建Cel动画

如果我告诉你存在一种图像格式和GIF一样,但它是矢量格式的?如果我告诉你这个动画的方向还可以反转?如果我告诉你可以直接拿一张普通的图像,然后让它里边的每一个不同的部分都单独地动起来,而且不同部分的速度也不一样?其实,这种图像格式就是SVG,而且已经存在,并不是我想象出来的,只是还需要一点点温柔的鼓励。

页面

返回顶部