摩托车3d建模入门（GSAP动画库入门基础示例）
摩托车3d建模入门（GSAP动画库入门基础示例）https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.jsGSAP既然这么好，我们如何安装和引用呢？有兴趣的可以访问官网，查看更多相关资料：https://greensock.com/说了这么多我们来看官方的视频介绍吧（英文原声视频，没有字幕翻译，请大家多多包涵），顺便练练英语听力，
大家好，在我们谈论网页动画时，我们第一时间会想到用JQuery的animate()方法或者CSS3的animation和transition。今天的这篇文章，我将给大家推荐另一个可选方案，一款专业的Web动画库GSAP，通过这款工具你能做出绚丽复杂的动画效果，通过本篇文章的学习，你将会学习到什么是GSAP，以及相关的入门基础知识。
一、什么是GSAP？GSAP全称是GreenSock Animation Platform，是一个JS动画框架。
GSAP有两个版本，一个为ActionScript 版本，已经在flash平台上运行多年，是一个“轻量级”、“高效率”、强大的2D动画引擎，一直深受ASer（学ActionScript的人都叫自己 ASer）的欢迎，学AS的人，没有一个说是不知道、没使用过GSAP的。
GSAP JS顾名思义是指GSAP的js版本，GSAP JS是GreenSock公司新出的一个2D动画引擎，可以说是AS版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是JQuery的20倍（动画方面的性能）。
有兴趣的可以访问官网，查看更多相关资料：https://greensock.com/
二、 GSAP的特点- 运行速度快，GSAP专注优化动画的性能，尽量接近与CSS一致的高性能。
- 轻量与模块化。将功能进行拆分，让核心框架保持轻量，TweenLite包非常小，同时提供了TweenLite TimelineLite TimelineMax 和 TweenMax不同功能的动画模块，可以按需使用，无需依赖。
- 零插件依赖，你不需要引入其他第三方插件。
- 灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。
- 任何对象都可以实现动画。
说了这么多我们来看官方的视频介绍吧（英文原声视频，没有字幕翻译，请大家多多包涵），顺便练练英语听力，
三、 如何安装与引用？
GSAP既然这么好，我们如何安装和引用呢？
- 去官网下载核心库的JS文件：gsap.min.js，目前版本大小不到60K。
- 通过CDN的方式引用：
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js
- 通过npm或yarn安装，安装命令分别如下：
npm install gsap
yarn add gsap - 同时还支持 React、Vue 、Angular
说了这么多，我们来看看如何使用，这里介绍的是JS原生的使用方式，如果你感兴趣 React、Vue 、Angular 的使用方式，请访问官网。这里我将通过心爱的小摩托示例，带着大家熟悉下最基础最核心的API。
1、准备基础环境
- 首先我们需要引用核心的JS文件：gsap.min.js
- 其次再引用一个简易版的常用图标CSS库，这里有我们心爱的小摩托:
图标文件：https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css - 接下来我们准备HTML内容，示例代码如下：
<div class="sky">
<i class="fa fa-motorcycle"></i>
</div>
<div class="ground"></div>
i 标签的内容就是引入 font-awesome 图标库的小摩托图标
- 最后我们编写基本的CSS内容，代码如下：
body { margin: 0; }
.fa-motorcycle {
color: #333;
font-size: 50px;
line-height: 30px;
margin-top: 68px;
margin-left: 20px;
}
.sky {
background-color: #adf;
height: 100px;
}
.ground {
background-color: #778;
width: 100%;
height: 30px;
}
完成后的界面效果，如下图所示：
淡蓝色好比天空，灰色好比地面，地面上停了一辆酷酷的黑色摩托车，准备工作到此完成，我们来利用 GSAP 的 API 开动摩托车吧！
2、使用 gsap.to() 方法，让小摩托向前600px
gsap.to() 就是告诉动画对象，最终要达到的运动状态，这个函数有两个关键参数：
- 第一个参数告知需要绑定哪个动画对象
- 第二个参数就是要告知动画最终效果的对象：动画时长、是旋转还是位移变化、或者其它属性的变化
js的代码文件如下：
const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle {
duration:2
x:"600px"
});
上述代码告知我们的小摩托，需要在2秒内向前开动600px，duration是动画时长的设定，x表示在横轴方向位移，这里你还可以用left:"600px" 但是你需要在CSS的 .fa-motorcycle 中添加 position: relative 属性，否则你看不到动画效果。
3、使用 gsap.from() 方法，让小摩托向前600px
这个函数的功能与gsap.to()的调用方法一致，你需要告知函数现有的状态是从原来的哪个状态转换过来的，就好像把过去发生的动作回放了一遍 。
首先我们修改 .fa-motorcycle 类 ，让摩托车先向右移动600px
.fa-motorcycle{
color: #333;
font-size: 50px;
line-height: 30px;
margin-top: 68px;
margin-left: 20px;
position: relative;
left: 600px;
}
接下来我们修改js文件：
const cycle=document.querySelector(".fa-motorcycle");
gsap.from(cycle {
duration:5
left:"0px"});
4、多个动画同时执行，让小摩托更加拉风
接下来，为了让我们骑着心爱的小摩托更加拉风，我们让动画由远及近逐渐显示，同时并非直线骑行，往下移动20px。这些动作都是同时进行的，我们可以同时添加多个gsap.from()或gsap.to()，示例代码如下：
const cycle=document.querySelector(".fa-motorcycle");
gasp.to(cycle {
duration:2
x:"600px"});
gsap.from(cycle {
duration: 2
opacity:0});
gasp.to(cycle {
duration:2
y:"20px"});
这里我们用到了opacity 属性，让我们的小摩托先隐藏起来 然后逐渐显示；y:"20px"，其意思就是往下移动20px。
5、多个动画属性写在一起，变成蓝色小摩托
黑色的小摩托虽然拉风，偶尔也需要换下口味，我们把灰色的小摩托在运动过程中变成蓝色的小摩托，你可以一口气将想要改变的属性写在一个动画对象里，示例代码如下：
const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle {
duration:2
x:"600px"
y:"20px"
color:"blue"
});
6、添加过渡效果，让小摩托运动更加自然
为了让运动效果更加自然，我们需要添加一些过渡效果，比如css动画里常见的linear ease-in ease-out ease-in-out，这些运动效果，GSAP也是支持的，这里我使用了 ease-in-out 这个属性，慢慢加速起来然后慢慢停下来，这样骑摩托才安全，如下代码所示：
const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle {
duration:2
x:"600px"
ease:Power4.easeInOut
});
这里你可能注意到了，我们这里使用了Power4，这个属性，其实这个属性有 Power0~4 这几个属性，这个属性从低到高依次增强动画的运动属性，感兴趣的话可以亲自尝试下。
7、添加 Transformation 变换属性，秀一把车技
学了这么多，接下来我们秀一把车技，将车把抬高45度，在加一些反弹动效，让效果更加接近真实的物理世界。这里我们用到了rotation属性，进行角度的旋转，以及Bounce反弹的动效属性，最后别忘记改变角度旋转的作用点，是在车后轮，这里用到了transformOrigin进行更改，最终完成的代码效果如下图所示：
const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle {
duration:2
x:"600px"
ease:Power2.easeOut
});
gsap.from(cycle {
duration:1
rotation:-45
transformOrigin:"10px bottom"
ease:Bounce.easeOut
});
小节
今天的内容就和大家分享到这里，感谢你的阅读，希望能引起你对 GSAP 的兴趣，并能在项目中进行尝试。如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，后续会持续分享这个库的案例，欢迎持续关注。
