H5前端技术交流

 找回密码
 立即注册
搜索
热搜: CSS Layabox
楼主: leemoon

GSAP教程之gsap.to, gsap.from与gsap.fromTo详解

  [复制链接]

14

主题

15

帖子

3872

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3872
QQ
发表于 2021-3-8 15:46:01 | 显示全部楼层 |阅读模式
gsap.to, gsap.from与gsap.fromTo详解

gsap.to(targets, vars)
产生从初始位置(或状态)到目标位置(或状态)的动画
targets: 产生动画的对象
vars: 目标状态参数
例子:
该动画从当前的位置移动到100的位置
  1. gsap.to("div", {
  2.   duration: 5,
  3.   x: 100
  4. });
复制代码

gsap.from(targets, vars)
产生从设置位置(或状态)到初始位置(或状态)的动画
targets: 产生动画的对象
vars: 设置状态参数
例子:
该动画从100的位置移动到初始位置
  1. gsap.from("div", {
  2.   duration: 5,
  3.   x: 100
  4. });
复制代码

gsap.fromTo(targets, vars, vars)
产生从开始位置(或状态)到结束位置(或状态)的动画
targets: 产生动画的对象
vars(第1个): 开始状态参数
vars(第2个): 结束状态参数
例子:
该动画从100的位置移动到300的位置
  1. gsap.fromTo("div", {
  2.   x: 100
  3. },{
  4.   duration: 5,
  5.   x: 300
  6. });
复制代码

targets
设置动画的对象,可以是“.class”、“id”等选择器文本(GSAP内使用document.querySelectorAll(), 具体可参考该用法),也可以是对元素、泛型对象甚至对象数组。

vars
包含要设置动画的所有属性/值的对象,以及任何特殊属性,如ease、duration、delay或onComplete(如下所列)。


vars参数详解

callbackScope
用于所有回调(onStart、onUpdate、onComplete等)的范围(this句柄)。
在所有回调中this默认指向该tween。若设置callbackScope ,this则指向该设置对象。

data
将任意数据赋给该属性(字符串或对象引用等),以便可以在任何地方tween.data访问该数据。

delay
动画开始前的延迟量(秒)。
例子:
在2秒后,向右移动100
  1. gsap.to("div", {
  2.   delay: 2,
  3.   duration: 2,
  4.   x: 100
  5. })
复制代码

duration
动画持续的时间(秒)。默认值:0.5。
例子:
用2秒的时间向右移动100
  1. gsap.to("div", {
  2.   duration: 2,
  3.   x: 100
  4. })
复制代码

ease
动画的运动方式。比如“elastic”(弹性), “strong.inOut”(强烈的先快后慢)等,默认值:“power1.out”(渐缓)
例子:
向右运动100,动画过程是强烈的先快后慢

  1. gsap.to("div", {
  2.   duration: 2,
  3.   x: 100,
  4.   ease: "strong.inOut"
  5. })
复制代码

id
为tween实例分配id(可选),以便之后使用gsap.getById()来获取该tween。
例子:
  1. gsap.to("div", {
  2.   id: "myTween",
  3.   duration: 2,
  4.   x: 100
  5. })

  6. gsap.getById("myTween")
复制代码

immediateRender
通常在不设置delay(延迟)的情况下,tween会在下一帧进行渲染,如果设置为true, 将会强制它在实例化时立即呈现。默认值:false。
由于gsap.from和gsap.fromTo 他们需要从一个状态开始运动,初始状态需要在实例化时立即渲染呈现。所以在它们的fromvars 中immediateRender是默认为true, 而在gsap.to的vars中默认为false。
例子:
当immediateRender为false时,不立即渲染到起始位置,而等到2秒延迟后,才从起始位置开始运动。 而设置true时,则在实例化时就立即渲染到起始位置。
  1. gsap.from("div", {
  2.   delay: 2,
  3.   x: 500,
  4.   immediateRender: false
  5. })
复制代码

inherit
通常tween的属性从其所属timeline的defaults继承而来,但是可以通过设置inherit:false来禁止继承, 具体可参考
gsap.defaults详解

lazy
当tween第一次渲染并读取其初始值时,GSAP将尝试延迟值的写入,直到当前的tick(更新循环)的最后再进行写入,这样可以提高性能。因为它避免了浏览器读/写/读/写的频繁操作,这种频繁的操作会极大的消耗性能并造成布局抖动。设置lazy:false便禁用这种延迟渲染,但是不建议禁用。默认值:true。

onComplete
动画完成时调用的函数。

onCompleteParams
传递给onComplete函数的参数数组。
例子:

  1. gsap.to("div", {
  2.   x: 500,
  3.   onComplete: complete,
  4.   onCompleteParams: [2, "str"]
  5. })

  6. function complete(i, str){
  7.   //i = 2, str = "str"
  8. }
复制代码

onRepeat
当动画重复时调用的函数。需要设置repeat(大于0)才会有效。

onRepeatParams
传递给onRepeat 函数的参数数组。

onReverseComplete
当动画从反方向再次达到开始位置时要调用的函数。需要设置reversed: true

onReverseCompleteParams
传递给onReverseComplete函数的参数数组。

onStart
动画开始时要调用的函数。

onStartParams
传递给onStartParams函数的参数数组。

onUpdate
每次动画更新时(每帧)调用的函数。

onUpdateParams
传递给onUpdate函数的参数数组。

overWrite
如果设置true, 该对象的其他动画(任何属性)就会被停止;如果设置auto,只会停止其他动画的相关属性动画;如果false,则不停止任何动画,最后呈现的动画效果是各个动画相互作用的结果。 默认值:false
例子:
  1. gsap.to("div", {
  2.   x: 500,
  3.   y: 500
  4. })

  5. gsap.to("div", {
  6.   x: 300,
  7.   overwrite: false,
  8. })
复制代码
如果设置false(或不设置),2个动画都正常运行,div的x值是2个动画相互作用的结果。
如果设置true, 直接会停止第一个动画(x,y的动画都会被停止),最终呈现的是x运动到300,而y没有变化(不会运动到500)。
如果设置auto,  只会停止第一个动画的x动画,对于y的动画不受影响,最终呈现的是x运动到300,y运动到500。

paused
如果设置true,动画将在创建时立即暂停。默认值:false
例子:

  1. let tween = gsap.to("div", {
  2.   x: 500,
  3.   paused: true
  4. });
  5. tween.play();
复制代码

repeat
设置动画重复的次数。 设置1为重复两次, 默认值:0。设置-1为无限重复。
例子:

  1. let tween = gsap.to("div", {
  2.   x: 500,
  3.   repeat: 2
  4. });
复制代码
该动画共运动了3次。


repeatDelay
每次动画重复之间等待的时间(秒)。默认值:0

repeatRefresh
设置true 会导致重复的动画失效,因为每次完成一次后,会重新更新其开始和结束值。如果属性使用的动态值(随机或函数),会得到特别的动画效果。默认值:false。
例子1:
从0位置向右运动500,重复5次。

  1. gsap.to("div", {
  2.   x: 500,
  3.   repeat: 5
  4. });
复制代码
如果设置repeatRefresh:true后则看起来只会重复一次。因为每次重复都会重新更新开始和结束值,第2次重复时起始值更新为500,结束值也是500。所以第2次到第5次位置未发生任何变化。

  1. gsap.to("div", {
  2.   x: 500,
  3.   repeat: 5,
  4.   repeatRefresh: true
  5. });
复制代码
例子2:
从0位置向右移动一个随机位置,重复5次。关于random的用法请参考gsap.utils详解。

  1. gsap.to("div", {
  2.   x: "random(200, 500)",
  3.   repeat: 5
  4. });
复制代码
如果设置repeatRefresh:true后每次重复都会重新计算随机值,div会连续做5次运动,每次运动的距离随机。这就产生了特别的动画效果,所以设置repeatRefresh:true 就特别适合该类型的动画效果。

  1. gsap.to("div", {
  2.   x: "random(200, 500)",
  3.   repeat: 5,
  4.   repeatRefresh: true
  5. });
复制代码

reversed
如果设置true,动画将调转方向超其开始方向移动。由于开始已经是初始位置,设置true后动画将显示为暂停。默认值:false。
例子:

  1. gsap.to("div", {
  2.   delay: 2,
  3.   duration: 2,
  4.   x: 500,
  5.   onComplete: function(){
  6.     this.reversed(true);
  7.   }
  8. });
复制代码

runBackwards
如果设置true, 动画将翻转其起始值和结束值,但对于ease不会反转。可以通过设置true将gsap.to 转换为gsap.from。默认值:false。
例子:
下面2个动画是一样的效果,并且gsap.from内部也是这么处理。

  1. gsap.to("div", {
  2.   x: 500,
  3.   runBackwards: true,
  4. });
复制代码

stagger
如果是多个动画目标,可以通过设置类似stagger:0.1(每个目标动画开始之间间隔0.1秒)来错开每个动画。或可以设置参数对象来实现更高级的动画效果,具体参考
staggers详解
例子:
所有的div都向右移动500,每个div间隔0.2秒开始移动。

  1. gsap.to("div", {
  2.   x: 500,
  3.   stagger: 0.2
  4. });
复制代码

startAt
定义任何属性的起始值(即便它们没有设置动画)。
例子:

  1. gsap.to("div", {
  2.   x: 500,
  3.   startAt: {
  4.     y: 500,
  5.     alpha: 0.5
  6.   }
  7. });
复制代码

yoyo
如果设置true,则每隔一次的重复都将以反方向的方向运动,动画呈现来回运动的效果。单次运动无效,需要配合repeat使用。默认值:false。
例子:

  1. gsap.to("div", {
  2.   x: 500,
  3.   repeat: 5,
  4.   yoyo: true
  5. });
复制代码

yoyoEase
允许你改变yoyo过程中的ease。可以指定特定的ease(例如:“power2.in”),可以设置true来翻转原本的ease。默认值:false。 另外:启动了该属性后,yoyo会自动设置true。
例子1:
如果不设置yoyoEase:true,yoyo过程应该是逐渐加快,设置后原本的ease进行了翻转,变为逐渐减慢。

  1. gsap.to("div", {
  2.   x: 500,
  3.   repeat: -1,
  4.   yoyoEase: true
  5. });
复制代码
例子2:
这里对yoyo过程设置了一个弹性的ease。

  1. gsap.to("div", {
  2.   x: 500,
  3.   repeat: -1,
  4.   yoyoEase: "elastic"
  5. });
复制代码

keyframes
对同一对象的一连串的动画(关键帧动画)。和一连串的gsap.to等效。
例子:
沿x轴向右运动100,停顿1秒,再沿x轴向右运动到200的位置,同时y轴运动到200。

  1. gsap.to("div", {
  2.   keyframes: [
  3.     {
  4.       x: 100
  5.     },
  6.     {
  7.       delay: 1,
  8.       x: 200,
  9.       y: 200
  10.     }
  11.   ]
  12. });
复制代码


vars 属性的Function类型参数
通过使用function类型参数来实现更复杂的动画效果。
例子1:
每个div的运动的y值不同,按顺序依次多100。第一个div运动到{x:100, y:0}的位置,第2个div运动到{x:100,y:100}的位置,第3个div运动到{x:100,y:200}的位置,依次类推。
  1. gsap.to("div", {
  2.   x: 100,
  3.   y: function(index, target, targets){
  4.     return index * 100;
  5.   }
  6. });
复制代码

例子2:
偶数索引的div沿y轴运动100,其他div则y保持不变。

  1. gsap.to("div", {
  2.   x: 100,
  3.   y: function(index, target, targets){
  4.     return index % 2 === 0 ? 100 : 0;
  5.   }
  6. });
复制代码
参数:
index: 当前运动对象的索引
target:当前运动对象
targets: 全部运动对象的数组

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|武汉明昇时代科技有限公司 ( 鄂ICP备18027164号-1 )

GMT+8, 2022-8-11 10:38 , Processed in 0.126990 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表