GSAP的香,我来带你get~时入1k算少的!!

·  阅读 5227
GSAP的香,我来带你get~时入1k算少的!!

我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情

最近这一个月以来,我是真的忙,月初公司硬性要求加班到9点,为了冲项目进度,连着加了两周~有些人可能觉得9点很早了,但是对于我来说,超过6点下班都是在折磨我,我宁可工资少点也别让我加班,因为下班后,我可以用GSAP时入1k啊,那到9点我不是入了3k?

GSAP操控球球

静态效果

image.png

引入GSAP让球动起来

在head标签中加入GSAP

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

gsap.to()

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

demo1.gif 代码如下,是不是非常简单!

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

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

demo2.gif 代码还是一如既往的简单:

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

gsap.from()

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

demo3.gif

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

gsap.timeline()

顾名思义,timeline就是时间线,知道这个方法是走一个执行队列的: demo4.gif

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为无限运动:

demo5.gif

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属性来定义的:

demo6.gif

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

demo7.gif

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缓动效果

最近做的小项目

uniapp+gsap搞的,花了大概2小时,1小时在写样式...这个玩意报价2k~ 所以时入1k没毛病了

demo.gif

未完待续,持续更新

最近太忙,国庆加料!还不会GSAP的小伙伴一起来学习呀~

码上掘金自己动手试试吧:

如果觉得写的不错,请不要吝惜您的赞呀!最后祝大家都时入过k!

分类:
前端
收藏成功!
已添加到「」, 点击更改