GSAP操控球球

静态效果

引入GSAP让球动起来

在head标签中加入GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
复制代码

gsap.to()

GSAP有几个核心的方法，最核心的莫过于to了。我们来看看它有啥魔力

代码如下，是不是非常简单！

gsap.to('.item1', {
    duration: 2,
    y: 200
})
复制代码

我们试着把另外几个球也动起来：

代码还是一如既往的简单：

gsap.to('.item1, .item2, .item3, .item4, .item5', {
    duration: 2,
    y: 200
})
复制代码

gsap.from()

俗话说有来就有往，有to自然得有from,from的用法和to可以说一模一样：

gsap.from('.item1, .item2, .item3, .item4, .item5', {
    duration: 2,
    y: 200
})
复制代码

gsap.timeline()

顾名思义，timeline就是时间线，知道这个方法是走一个执行队列的：

const tl = gsap.timeline();
tl.to('.item1', {
    duration: 1,
    y: 200
});
tl.to('.item2', {
    duration: 1,
    y: 200
});
tl.to('.item3', {
    duration: 1,
    y: 200
});
tl.to('.item4', {
    duration: 1,
    y: 200
});
tl.to('.item5', {
    duration: 1,
    y: 200
});
复制代码

上面代码有点多，gsap好用就在于它不可能让你写重复的代码,上面代码可以这么写：

const tl = gsap.timeline({
    defaults: {
        duration: 1,
        y: 200
    }
});
tl.to('.item1', {})
    .to('.item2', {})
    .to('.item3', {})
    .to('.item4', {})
    .to('.item5', {});
复制代码

至于是否还有更简写的方式我还没摸透，毕竟才刚入门，希望有懂的大佬评论区留言讨论。

repeat参数

顾名思义就是重复运动的次数，-1为无限运动：

const tl = gsap.timeline({
    defaults: {
        duration: 1,
        y: 200
    }
});
tl.to('.item1', { repeat: -1 })
    .to('.item2', {})
    .to('.item3', {})
    .to('.item4', {})
    .to('.item5', {});
复制代码

可以看到，我们给第一个球加了个repeat:-1，它开始无限次运动了。

yoyo参数

大家玩过yoyo球吗？那种甩出去又收回来，往复运动就是yoyo属性来定义的：

const tl = gsap.timeline({
    defaults: {
        duration: 1,
        y: 200
    }
});
tl.to('.item1', { repeat: -1, yoyo: true })
    .to('.item2', {})
    .to('.item3', {})
    .to('.item4', {})
    .to('.item5', {});
复制代码

第一个球开始做往复运动了~不过它这个效果有点违背牛顿定律，我们改改缓动效果

ease参数

power1

const tl = gsap.timeline({
    defaults: {
        duration: 1,
        y: 200,
        ease: 'power1.in'
    }
});
tl.to('.item1', { repeat: -1, yoyo: true })
    .to('.item2', {})
    .to('.item3', {})
    .to('.item4', {})
    .to('.item5', {});
复制代码

power分4个等级分别是power1-power4，大家可以自行研究下 GSAP缓动效果

GSAP动画