GreenSock动效库TweenMax简单使用代码片段

简介: GreenSock动效库TweenMax简单使用代码片段


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
 
<script type="text/javascript">
 
    //demo 1----------------------------------------
    TweenMax.to("CSSselectors", 1, {
        opacity: 0,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: function () {
            //一些动画结束后要触发的动作
            /*document.querySelector("CSSselectors").style.*/
        }
    });
 
    //demo 2----------------------------------------
    TweenLite.to(DOM元素, 1, {
        opacity: 0,
        scale: 1.2,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: completeHandler,
        onCompleteParams: ["传参"]
    });
 
    //demo 3----------------------------------------
    let tl = new TimelineMax({repeat: 0, repeatDelay: 0});
    tl.to(".green", 1, {x: 200})
        .to(".orange", 1, {x: 200, scale: 0.2}, "+=1").addLabel("greyAndPink")
        .to(".grey", 1, {x: 200, scale: 2, y: 20}, "greyAndPink")
        .to(".pink", 1, {x: 200, rotation: 360}, "greyAndPink");
 
</script>


相关文章
|
7月前
|
XML 编解码 前端开发
【web组件库系列】封装自己的字体图标库
【web组件库系列】封装自己的字体图标库
142 0
|
7月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
4月前
|
图形学
小功能⭐️用代码设置Unity属性
小功能⭐️用代码设置Unity属性
|
7月前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
190 1
|
7月前
|
移动开发 小程序 前端开发
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
1156 1
|
7月前
|
API
uniapp中组件库的丰富NumberBox 步进器的用法
uniapp中组件库的丰富NumberBox 步进器的用法
277 0
|
7月前
|
JSON 小程序 JavaScript
小程序如何使用自定义组件
小程序如何使用自定义组件
177 0
|
人工智能 API 图形学
unity基础脚本代码总结
unity基础脚本代码总结
183 0
antd组件库封装44-添加字体变量方案
antd组件库封装44-添加字体变量方案
93 0
antd组件库封装44-添加字体变量方案
|
JavaScript API 容器
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解

热门文章

最新文章