优联前端（GSAP）
关注
分享
扫一扫
文章平均质量分 68
https://ufrontend.com
优联前端
技术实力：主流技术全覆盖，Web前端技术，微信小程序，2D/3D游戏技术，动画交互技术等主流技术全覆盖，轻松实现客户项目需求。
动画交互技术：公司引入动画交互技术，优化产品细节及用户体验。
性能优化：公司对项目加载速度、卡顿、性能等方面做严格测试和优化，确保产品在各个平台终端运行流畅。
项目管理：专业化的项目管理，管理中融入产品化思维，确保项目准时高质量交付。
用户体验：用户体验设计与交互技术结合，深度挖掘用户需求，提高产品可用性，增强用户粘性。
企业邮箱：info@ufrontend.com
企业官网：https://ufrontend.com
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
GSAP教程之tween.duration()和tween.totalDuration()的区别
该动画repeat=2, 一共运动3次，2次重复延迟1秒，那么。是获取或设置动画的时长，不包含重复或延迟。设置1时，动画的时长由原本的2变为1，则。这里注意延迟不压缩。是包含重复和重复延迟。设置5时，反过来推算。在例如：设置10时，原创 2024-05-14 09:00:00 · 460 阅读 · 0 评论 -
GSAP教程之tween.progress()和tween.totalProgres()、tween.time()和tween.totalTime()区别
从第一次运动开始到第3次运动结束，整个过程从0到1，包含了重复和重复延迟。为0.5时运动了1次半，而在第3次运动中设置则运动了半次。是设置播放头到当前（或最后一次）的位置。在该例子中，会运动3次（含2次重复），每次运动中，都会从0开始到1结束，它包含重复和重复延迟。是以整个动画作为一个过程，包含了重复和重复延迟。为0.5时，运动了2次半。是获取或设置当前进度，不包含重复和延迟，而。接例1，分别在3次运动中分别执行以下代码。为0.5，它都运动了1次半，故。会发现在第一次运动中设置。是包含了重复和延迟。原创 2024-05-13 09:27:38 · 708 阅读 · 0 评论 -
GSAP教程之Tween详解
具体请参考。原创 2024-05-07 09:00:00 · 1454 阅读 · 0 评论 -
GSAP教程之gsap.utils详解
gsap.utils提供了非常实用的方法集合，其中过很多可以返回函数，以便直接在tween中使用，特别是多对象动画时，将会每个目标调用一次，而不是为每个目标使用相同值。例子：为每个目标动画调用random产生不同的y值。原创 2024-05-10 09:00:00 · 2147 阅读 · 0 评论 -
GSAP教程之 Staggers 详解
创建交错动画，设置动画之间的间隔效果，所有的tween都有stagger属性，它可以是一个数字，一个对象，或一个函数。原创 2024-05-09 09:00:00 · 1082 阅读 · 0 评论 -
GSAP教程之gsap.config与gsap.defaults详解
用来配置GSAP的一些全局设置，如autoSleepforce3D和units。和不同，是用来设置tween的默认参数。原创 2024-05-08 09:00:00 · 772 阅读 · 0 评论 -
GSAP教程之gsap.to, gsap.from与gsap.fromTo详解
第一个div运动到{x:100, y:0}的位置，第2个div运动到{x:100,y:100}的位置，第3个div运动到{x:100,y:200}的位置，依次类推。如果false，则不停止任何动画，最后呈现的动画效果是各个动画相互作用的结果。如果属性使用的动态值（随机或函数），会得到特别的动画效果。通常在不设置delay(延迟)的情况下，tween会在下一帧进行渲染，如果设置为true, 将会强制它在实例化时立即呈现。如果设置true，则每隔一次的重复都将以反方向的方向运动，动画呈现来回运动的效果。原创 2024-05-06 09:49:48 · 2701 阅读 · 0 评论