GSAP常用方法和事件

最新推荐文章于 2024-06-10 18:32:55 发布

YY小怪兽

最新推荐文章于 2024-06-10 18:32:55 发布

阅读量488

点赞数

文章标签： javascript ajax 服务器

本文链接：https://blog.csdn.net/lihui61357457/article/details/121603460

版权

详情可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-GSAP动画常用方法</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<button class="start">开始</button>
<button class="paused">暂停</button>
<button class="toggle">切换</button>
<button class="restart">重新开始</button>
<script>
    let tm = TweenMax.to(".box", 3, {
        x: 500,
        paused: true
    });
    // console.log(tm);
    //控制播放
    let oStartBtn = document.querySelector(".start");
    oStartBtn.onclick = function () {
        tm.play();
    }
    //控制暂停
    let oPauseBtn = document.querySelector(".paused");
    oPauseBtn.onclick = function () {
        tm.pause();
    }
    //控制切换
    let oToggleBtn = document.querySelector(".toggle");
    oToggleBtn.onclick = function () {
        // tm.paused(true);
        // tm.paused(false);
        // console.log(tm.paused());
        tm.paused(!tm.paused());
    }
    //控制重新开始
    let oRestartBtn = document.querySelector(".restart");
    oRestartBtn.onclick = function () {
        tm.restart();
    }
</script>
</body>
</html>

    let obj = {name: "lnj"};
    TweenMax.to(".box", 3, {
        x: 500,
        delay: 3,
        //设置开始动画事件
        onStart:function(a, b, c){
            // console.log("动画开始了", a, b, c);
            console.log(this);
        },
        //传递给开始时间参数
        onStartParams:["123", "456", "789"],
        //指定开始事件当中的this
        onStartScope: obj,
    });

YY小怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GSAP常用方法和事件

详情可见<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06-GSAP动画常用方法</title> <script src="js/TweenMax.js"></script> <style> *{ margin: 0;
复制链接

扫一扫