说一下【GSAP3教程】如何创建一个 Tween

上一篇就简单说了下GSAP2和GSAP3的区别,也简单说了gsap.to()的使用方法,这篇主要说如何创建一个Tween。

1 创建Tween的三个方法

gsap有三个方法可以快速创建一个Tween:

  1. gsap.to(targets, vars )
    从原本属性变化到 vars 中定义的属性
  2. gsap.from(targets, vars )
    从 vars 中定义的属性 变化到 原本属性
  3. gsap.fromTo(targets, fromVars , toVars)
    从 fromVars 中定义的属性 变化到 toVars 中定义的属性

参数

targets:这可以是选择器文本,如”.class”, “#id”等(GSAP内部使用document.querySelectorAll()),或者它可以是对元素的直接引用,通用对象,甚至是对象数组。

vars:一个对象,包含你想要动画的所有属性/值,以及任何特殊属性,如ease, duration, delay,或onComplete。

2 Tween使用方法

我们用gsap的上面三个方法实现一个css平移效果。

1. gsap.to()

gsap.to('#box', { duration: 5, x: 500 })

id为box的元素,从初始位置5秒钟在x轴平移500像素,

2. gsap.from()

gsap.from('#box', { duration: 5, x: 500 })

id为box的元素,从500像素的位置5秒钟平移到初始位置,

3. gsap.fromto()

gsap.fromTo('#box', {x:-100} , { duration: 5, x: 500 })

id为box的元素,从x轴-100像素的位置,5秒钟移动到500像素的位置

注意:这里有个需要注意的地方,就是在 fromTo 方法中, duration 等动画属性,需要放置在 toVars 参数中, 不能放置在 fromVars 中。

vars这个对象里我们还可以使用一些高级用法,想要对动画增加一些事件,那就可以使用onStart、onUpdate、onComplete 等回调方法 。那我们就可以这么使用

gsap.to('#box', { 
    duration: 5, 
    x: 500,
    onStart: function() {
        // 这里写逻辑
    },
    onUpdate: function() {
        // 这里写逻辑
    }
})

同时我们可以控制Tween,调用方法时,会返回一个实例,我们就可以通过这个实例来对这个动画进行控制。

var tween =  gsap.to('#box',{ duration: 5, x: 500 })
document.querySelector("#play").onclick = () => tween.play(); 
document.querySelector("#pause").onclick = () => tween.pause(); 
document.querySelector("#resume").onclick = () => tween.resume(); 
document.querySelector("#restart").onclick = () => tween.restart(); 

通过对实例方法的调用,就可以控制动画。这里只是部分方法,具体请看官方文档。下篇文章我们讲解使用时间轴。

正文完