GSAP参数的箭头函数的运用方法和示例

(参数) => { 函数体 }是ES6中引入的特性，叫箭头函数，一种简洁的函数定义方式，在GSAP中利用箭头函数，可以实现更多变化的动画。

箭头函数有两种基本语法，分别是

(参数) => { 函数体 }
(参数) => 表达式

示例：

//一般函数
function add(a, b){
	return a + b;
}

//箭头函数
const add = (a, b) => a + b;

在GSAP插件中的使用

(参数) => 表达式 的形式

1、动态计算属性值：根据索引设置不同的 x 和 y 值

gsap.to('.box', {
    x: (index) => index * 100, // 根据索引设置 x 的值
    y: (index) => index % 2 === 0 ? 0 : 50, // 根据索引的奇偶性设置 y 的值
    duration: 1,
    stagger: 0.5, // 延迟
});

• index 是目标元素的索引，从0开始。
• x 的值根据索引线性增加。
• y 的值根据索引的奇偶性设置为 0 或 50。

2. 基于元素属性动态计算：根据元素宽度设置 x 的值

gsap.to('.box', {
    x: (index, target) => target.offsetWidth * index, // 根据元素宽度和索引设置 x 的值
    duration: 1,
});

• target 是当前目标元素。
• target.offsetWidth 是元素的宽度。
• x 的值根据元素宽度和索引动态计算。

(参数) => { 函数体 } 的形式

根据索引和元素内容设置属性

gsap.to('.box', {
    x: (index, target) => {
        const content = target.textContent; // 获取元素内容
        if (content === 'A') return 0; // 如果内容是 'A'，x 为 0
        if (content === 'B') return 100; // 如果内容是 'B'，x 为 100
        return 200; // 其他情况，x 为 200
    },
    duration: 1,
});

• target.textContent 获取元素的内容。
• 根据内容动态设置 x 的值。