javascript animation lib greensock gsap介绍

一般前台做动画有以下几种方式:

1. 简单的css transition动画;

2. css animation动画

3. javascript库动画

一般来说css html5动画只适用于简单的形变动画,动画操作的是css某个属性。

但是对于更加复杂的动画,我们可能必须通过javascript来做,其中greensock的gsap就是一个让你发挥无限想象的强大工具

gsap还支持模块化使用,这一点对于es6爱好者模块化编程的工程师来说是一个福音,支持下面的应用模式

npm install gsap --save
import {TweenLite, Elastic, TimelineMax} from "gsap"

gsap动画原理是:

他有一个核心库,可以对任何对象value值做tween过度,如果需要支持特殊的css属性,则可能需要CSSPlugin,最大的TweenMax包含以下内容(好在我们可以通过上面的import命令选择性地导入对应模块!):

TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and all of the eases like Power1, Power2, Power3, Power4, Back, Bounce, Circ, Cubic, Elastic, Expo, Linear, Sine, RoughEase, SlowMo, SteppedEase,

时间: 2024-07-28 22:16:51

javascript animation lib greensock gsap介绍的相关文章

javascript的return语句简单介绍

javascript的return语句简单介绍:return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,有个清晰的把握是非常有必要的.下面就结合实例简单介绍一下return语句的作用.一.用来返回控制和函数结果:通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数.语法格式: return 表达式 代码实例如下: function add(){

javascript继承的实现方式介绍

javascript继承的实现方式介绍:作为面向对象的一门语言,继承自然是javascript所比不可少的特性,下面就简单介绍一下javascript实现继承的几种方式,希望能够对需要的朋友带来一定的帮助,下面进入正题.一.对象冒充: function A() { this.name="蚂蚁部落"; this.address="青岛市南区"; } function B() { this.target="提供免费的教程"; this.newA=A;

HTML5统计图表amCharts JavaScript 统计图控件详细介绍

amCharts控件提供您最需要的JavaScript/HTML5图表.一套包括串行(列,栏,线,区,步线,平滑线,烛台,OHLC图),馅饼 /甜甜圈,雷达/极性和XY /分散/气泡图.amCharts的图表提供了无与伦比的功能和性能,在一个高级的,符合标准的包里. 支持所有高级浏览器 amCharts的JavaScript图表支持所有高级浏览器(包括但不限于)现代火狐,Chrome,Safari,Opera和Internet Explorer的版本.它的iPad,iPhone,iPod Tou

javascript的arguments对象简单介绍

javascript的arguments对象简单介绍:这里以最简单的方式介绍一下arguments对象的用法,先看一段代码: var a=1; var b=2; function mytest(a,b){ var c=a+b; document.write(arguments[0]); } mytest(1,2); 以上代码可以输出传递给函数的第一个参数,也就是说通过类似于数组的索引值可以访问传递给函数的参数,而无需使用参数的名称.这里就介绍这么多了,希望能够给初学者一个最初的理解. 原文地址是

原生javascript获取dom元素简单介绍

原生javascript获取dom元素简单介绍: 使用jQuery可以各种方式获取元素,比如id选择器,类选择器,元素选择器等等,非常的方便. 下面就介绍一下如何利用原生的js实现获取dom元素的功能. 一.通过id获取元素: 最方便的那就是使用document.getElementById()函数. 具体可以参阅document.getElementById()一章节. 二.通过标签获取元素: 使用document.getElementsByTagName()函数. 具体可以参阅documen

JavaScript单元测试框架JsUnit基本介绍和使用

JavaScript单元测试框架JsUnit基本介绍和使用 XUnit framework XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 每一个语言都有一个用于单元测试的XUnit框架,比如Java有JUnit, C++有CppUnit, PHP有PHPUnit, Oracle SQL有UTPL/SQL. JsUnit JsUnit的官网: http://jsunit.net/ JsUnit遵循XUnit的一些惯例: 单元测试在JsUnit

关于ArcGIS API for JavaScript中basemap的总结介绍(一)

实际上basemap这个概念并不只在arcgis中才有,在Python中有一个matplotlib basemap toolkit(https://pypi.python.org/pypi/basemap),是用来实现地理信息可视化的.其中,matplotlib是Python常用的数据绘制包,basemap是matplotlib的一个子包,用来进行地图绘制.本文所指的basemap是指esri提供的基础底图图层. 正式使用basemap是在前一阵做webgis开发的时候,需要在自己的矢量图层下面

Functional Programming in Javascript 中文翻译 —— 目录和介绍

原著:[美] Dan Mantyla 目录 前言1 Javascript函数式编程的力量--举个例子2 函数式编程基础3 建立函数式编程环境4 在Javascript中实现函数式编程的技术5 类型理论6 高级主题以及Javascript的缺陷7 Javascript中的函数式和面型对象编程8 Javascript中的函数式和面型对象编程 关于翻译的这本书 现在市面上有两本专注于javascript函数式编程的书,一本是<Functional Javascript>(下文简称FJS), 另一本就

Unity3D中Javascript的基本使用与介绍详解

欢迎来到unity学习.unity培训.unity企业培训教育专区,这里有很多U3D资源.U3D培训视频.U3D教程.U3D常见问题.U3D项目源码,我们致力于打造业内unity3d培训.学习第一品牌. 在Unity中脚本是必不可少的.因为他将定义你游戏的各种行为和规则.这个教程将介绍JavaScript的基本使用.1.目标 在Unity中,脚本是用来界定用户在游戏中的行为或规则.Unity推荐使用的编程语言是JavaScript,同时也支持C#或Boo. 2.前提本教程的重点是Unity脚本基