使用tweenmax开发动画

在以前,Greensock旗下有多个products, 其中一个是tweenmax - 随着时间的发展, 现在最新的是gsap - https://github.com/greensock/GSAP
今天简单的给大家介绍一下如何使用tweenmax来开发动画

  1. 首先我们需要导入tweenmax的js文件
  2. 使用
1
2
3
4
5
6
7
8
9
10

<div class="box">
test
</div>

<script>
TweenMax.to('.box', 3, {
right: 100,
});
</script>
  1. 比如运行了以上的代码之后, 就可以让此元素向右移动100px

提示: 也可以使用里面的delay,repeat等
提示: 配合CSS也可以做出其他的一些动作,比如放大缩小,边角变化
提示: 配合Easing可以做出其他的一些缓动效果

下一期给大家做一下gsap的简单用法