TweenMax学习小计

这篇博客介绍了TweenMax这款强大的前端动画插件,包括如何进行链式运动、处理多个元素的运动、运用贝塞尔曲线以及设置回调函数。通过实例展示了如何实现元素的位移、透明度、缩放等属性的变化,以及如何通过staggerTo方法实现多个元素的同步动画,并利用回调函数增强交互体验。
摘要由CSDN通过智能技术生成

TweenMax是一款前端动画插件,可以做出很多效果,灵活性很高,最近闲暇之余学了一下,顺便做点记录。

插件的安装很简单,直接用script引入即可使用:

<script src="./js/TweenMax.min.js"></script>

开始的时候需要初始化一个对象:

var t = new TimelineMax();

to:单个元素,运动到某一点

t.to('.box', 3, { // 3秒时间内移动到绝对位置x=400的地方
		left: 400 // 绝对位移
	});

还有很多效果可以添加,比如Linear,Back,Bounce,Cire,Cubic,Elastic,Quad,Sine,Quint等,每个效果都有三种进出方式:easeIn、easeOut、easeInOut。

t.to('.box', 3, {
	  left: 400, // 绝对位移
//        ease: Linear.easeIn
//        ease: Linear.easeOut
//        ease: Linear.easeInOut

//        ease: Back.easeIn
//        ease: Back.easeOut
//        ease: Back.easeInOut

//        ease: Bounce.easeIn
//        ease: Bounce.easeOut
//        ease: Bounce.easeInOut

//        ease: Circ.easeIn
//        ease: Circ.easeOut
//        ease: Circ.easeInOut

//        ease: Cubic.easeIn
//        ease: Cubic.easeOut
//        ease: Cubic.easeInOut

//        ease: Elastic.easeIn
//        ease: Elastic.eas
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值