Js动画库

ScrollMagic

• ScrollMagic是一个滚动视差插件
• ScrollMagic本身比较简单,只包含2个类:
  • ScrollMagic.Controller 一个控制器类,用于总体的调度
  • ScrollMagic.Scene 一个场景类,用于设计具体的变换
• 需要注意的是,它本身并没有集成animation的控制方法,动画的实现需要引入插件GSAP或者Velocity

GSAP

• GSAP是一个从flash时代一直发展到今天的专业动画库

• GSAP优点

  • 速度快
  • 轻量与模块化
  • 没有依赖
  • 灵活控制

• GSAP版本: TweenLite,TimelineLite,TimelineMax,TweenMax,建议在开发中使用TweenMax这个全功能的js文件,它包括了GreenSock动画平台的所有核心的功能

  //从当前位置到指定位置
  TweenMax.to();
  TweenMax.staggerTo();
  //从指定位置到当前位置
  TweenMax.from();
  TweenMax.staggerFrom();
  //从第一个指定的位置到第二个指定的位置
  TweenMax.fromTo();
  TweenMax.staggerFromTo();
  

Velocity

• Velocity 是一个简单易用,性能极高,功能丰富的轻量级JS动画库
• 它能和 jQuery/Zepto 完美协作,并和$.animate()有相同的API,但它不依赖jQuery,可以单独使用,Velocity不仅包含了$.animate() 的全部功能,还拥有:颜色动画,转换动画(transforms),循环,缓动,SVG动画,和滚动动画等特色功能
• Velocity基本使用
  • 导入Velocity文件
  • 利用Velocity实现动画
  • 配合jQuery使用: 必须先导入jQuery,再导入velocity

ScrollMagic

• 使用ScrollMagic,可以容易地让动画和滚动条的动作同步
• 使用ScrollMagic,可以容易地把视差效果添加到网站中
• ScrollMagic特点
  • 优化性能
  • 轻量级(压缩后只有6kb)
  • 灵活可扩展
  • 兼容移动设备
  • 强大的事件管理
  • 支持响应式网页设计
  • 面向对象的编程方式和链式编程方式
  • 代码可读性强
  • 支持两个方向的滚动
  • 支持在div容器中滚动
  • 完善的调试和日记记录功能
• 如果需要结合Velocity来使用,那么在创建场景的时候就不能指定有效范围