变开动效他有一个专业名词,叫作 Morphing Animation,简单地说从一种图形平滑过渡到另一张图形,也就是把两个(或多个)图形在变化时间上作线性的内插。而这种动画效果在Web上的使用也越来越频繁,比如说,两个状态下图标变形有一个动画效果。既然变形动效越来越受青眯,那么今天就来和大家聊聊如何创建变形动效的效果。
如果你阅读过上一篇《初探GSAP》文章,我想你对GSAP有了一个初步的认识。而且文章中也提到过,使用gsap.timeline()这个API可以帮助我们轻易的控制动画的时序。换句话说,让我们控制动画变得更简单,效果更好。今天这篇文章,我想花更多的时间和大家一起来探讨GSAP中的Timeline,即 gsap.timeline()的使用。
gsap.timeline()
时至今日在Web中开发动效有很多种方式,有纯CSS的方式(Animations和Transitions),也有Web Animation API和SVG Animation,还有很多优秀的JavaScript库(比如,Anime.js、KUTE.js、Mo.js等)。在WebGL方面有Three.js、PixiJS、Babylon.js和PlayCanvas等。除此之外,业内还有一个制作动画非常出色的平台,那就是GSAP(GreenSock Animation Platform的简称)。在接下来的日子中,将会不间断的发布一些关于GSAP制作动效相关的教程,今天这篇文章,主要和大家先探讨一些GSAP的基础知识。
当你需要一些比较高级的功能的时候,GSAP的插件是非常棒的。我在这篇教程中介绍的BezierPlugin插件,可以使得几乎所有的属性沿着一条由一组点/值定义的贝塞尔曲线路径运动。在正式进入学习之前,我们需要先花点时间来学习贝塞尔曲线到底是什么,以及它是如何诞生的。
在这篇教程中,我们将学习如何控制动画,根据需求,使用一个叫做addPause()的方法。准备好了吗?开始吧!addPause()方法是一种控制方法,允许开发者在时间轴上的任何位置放置一个暂停。这比使用一个回调函数来暂停另一个函数要精确得多(这是在addPause()出现之前大家不得不采用的方法)。这个控制方法还可以插入一个特殊的回调,在特定的时间戳或标签暂停时间轴的播放。这样做有助于确保,如果虚拟播放指针稍微超过了暂停的位置,它可以回到那个设置暂停的位置。
addPause()
在以前,动画Tweening是描述一帧一帧序列的术语,有时候也被称为in-between。放置在一个运动结束,要进行下一个运动前,中间创建一个流畅的过渡。年纪比较大的同学可能会记得Flash;这个应用程序在引用帧移动时使用了这个术语。我们先来仔细观察几个示例。
in-between
先来看一下一些名词定义?Mechanics的定义是:关注对象受力或位移的行为的区域,以及这些对象对周围环境的后续影响。时间轴是按照时间顺序显示事件序列的方法,有时候也被描述为a project artefact。我们结合这两块内容,学习如何控制和配置我们的动画,这样才知道我们要做什么。
TimelineMax是GASP的一部分,用于制作Web动画。使用TimelineMax可以控制“任何JavaScript可以触及到”的动画序列(如CSS属性和SVG),而且你不需要对JavaScript非常熟练。本系列教程将从非常基础的知识开始讲起,介绍TimelineMax库和它的基础语法,再到mechanics、tweens、贝塞尔曲线以及很多很多东西。学习的过程中,我们将使用一些实际的demo来辅助大家学习。什么是TimelineMax?它和其它的GreenSock动画平台(GSAP)的库有什么不同?为什么比起TimelineLite更需要TimelineMax?我该如何去理解TimelineMax的参数?如果你有以上的这些疑问,那你就来对地方了~