2024年前端最新前端动画库GSAP 入门学习详解(1)，蚂蚁金服前端面试经历

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

简介：

GSAP的全名是 GreenSock Animation Platform

一直发展到今天已经是 3.x 版本，这是一个适用于现代浏览器的专业 Javascript 动画库

超过1100万个网站，其中包括超过50%的获奖网站!主要品牌都使用 GSAP

官网地址如下：

GSAP 3 Is Available Now! - Blog - GreenSock

Vue里面 基于侦听器的动画，也是借助于GSAP。

GSAP 优点：

• 疯狂的快
• 异常的强大
• 兼容性好
• ······

缺点：

• 动画过多

---

GSAP基本使用

官网地址: https://greensock.com/gsap/

文档地址: https://greensock.com/get-started/

核心语法

GSAP 远在 flash 繁荣的时代就存在，所以核心是补间动画

GSAP 则是补间动画，主要有4个分类：

• gsap.to()从元素的起始值开始，动画到我们指定的结束值
• gsap.from() 反过来。 我们指定起始值，动画到结束值
• gsap.fromTo() - 我们定义起始值和结束值。
• sap.set() - 立即设置属性 (无动画)

常见属性

GSAP	CSS	解释
x: 100	transform:translateX(100px)	水平移动
y: 100	transform:translateY(100px)	垂直移动
xPercent:-50	transform:translateX(-50%)	水平移动(元素宽度的百分比)
yPercent:-50	transform:translateY(-50%)	水平移动(元素高度的百分比)
rotation:360	transform:rotate(360deg)	旋转(度)

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注