跳过主要内容

vars

vars: 对象

通过构造函数传递给原始时间轴的配置对象，例如gsap.timeline({onComplete: func});

细节​

这个vars传递给构造函数的对象，其中包含你希望时间轴具有的所有属性/值。

    属性

    描述

  • autoRemoveChildren

    Boolean如果autoRemoveChildren设置为true，一旦子补间动画/时间轴完成，它们将自动被销毁/移除。这通常是不理想的，因为它会阻止时间倒退（比如你想要reverse()反向播放autoRemoveChildren: true.

  • callbackScope

    对象用于所有回调函数（onStart, onUpdate, onCompleteonStart, onComplete等）的作用域。作用域是回调函数内部this所指向的对象。this refers to inside any of the callbacks.

  • defaults

    对象一种简单设置默认值的方式，这些值会被子动画继承。详见“defaults”部分。

  • delay

    数字动画开始前的延迟时间（秒）。

  • onComplete

    函数动画完成后应调用的函数。

  • onCompleteParams

    数组要传递给onCompleteonUpdategsap.timeline({onComplete: myFunction, onCompleteParams: ["param1", "param2"]});.

  • onInterrupt

    动画中断时要调用的函数。注意：如果动画正常完成则不会触发此函数。

  • onInterruptParams

    要传递给onInterrupt函数的参数数组。例如，gsap.to(".class", {x:100, onInterrupt:myFunction, onInterruptParams:["param1", "param2"]});.

  • onRepeat

    函数动画每次重复时应调用的函数。

  • onRepeatParams

    数组要传递给onRepeatonUpdategsap.timeline({onRepeat: myFunction, onRepeatParams: ["param1", "param2"]});.

  • onReverseComplete

    函数当动画从反方向回到其开始位置时应调用的函数。例如，如果reverse()reverse()time reaches 0, onReverseComplete回调将被调用。当动画放置在一个被反转播放的时间轴实例中并反向播放到（或超过）起始位置时也会发生这种情况。

  • onReverseCompleteParams

    数组要传递给onReverseCompleteonUpdategsap.timeline({onReverseComplete: myFunction, onReverseCompleteParams: ["param1", "param2"]});.

  • onStart

    函数当动画开始时（当它的timeprogress0从0

  • onStartParams

    数组要传递给onStartonUpdategsap.timeline({onStart: myFunction, onStartParams: ["param1", "param2"]});.

  • onUpdate

    函数每次动画更新时（动画活动期间每一帧）应调用的函数。

  • onUpdateParams

    数组要传递给onUpdateonUpdategsap.timeline({onUpdate: myFunction, onUpdateParams: ["param1", "param2"]});.

  • paused

    Boolean如果true，动画将在创建后立即暂停。

  • repeat

    数字初始播放后应该重复的次数。例如，如果repeat设置为1repeat:1-1. repeat值应始终为整数。

  • repeatDelay

    数字repeatDelayrepeat设置为2和repeatDelay设置为1repeatDelay:1

  • repeatRefresh（重复刷新）

    设置repeatRefresh: true导致一个重复的时间轴在每次完整迭代时（不包括yoyo效果）重新计算invalidate()所有子动画的当前值，并记录它们的起始/结束值。这对于使用动态值（相对、随机或基于函数的值）时很有用。例如，x: "random(-100, 100)"在每次重复时都会获得一个新的随机x值。duration, delay，以及staggerdo非refresh（刷新）。

  • smoothChildTiming

    Boolean控制是否自动重新定位子动画（改变它们的startTimestartTimereverse()restart()smoothChildTiming设置为falsetruestartTimeleftHow to timelines work?”部分。

  • 哟哟（yoyo）

    Boolean如果true，每隔一次重复周期将以相反方向运行，使补间看起来来回切换（向前然后向后）。这对reversed属性。例如，如果设置为repeat设置为2和yoyo设置为false，看起来就像：起点 - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - 终点。但如果设置为yoyo设置为true，看起来就像：起点 - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - 终点。

目录