• Tween(GreenSock)


    设置参数(set)

    动画执行(from、to、fromTo)

    运动参数(css属性、autoAlpha、x、y、scale、scaleX、scaleY、rotation、rotationX、rotationY、rotationZ、skewX、skewY、className)

    3D参数

    缓动函数(多个分类、easeIn、easeOut、easeInOut)

    延迟(delay)

    重复(repeat、repeatDelay)

    往返(yoyo)

    回调函数及传参(onStart、onUpdate、onComplete、onRepeat)

    刷帧(useFrames)

    延迟调用(delayedCall)

    强制结束(killTweensOf、killDelayedCallsTo、killChildTweensOf、killAll、kill)

     

     

    1、引入TweenMax.js文件

    TweenMax.set('.dv', {

            backgroundColor: 'red'

    });

     

    TweenMax.to('.dv', 10, {

            autoAlpha: 0.8,//到达指定位置时的透明度

            x: 200,//横向位移(单位px)

            y: 100,

            scale: 0.8,//缩放 scaleX、scaleY

            rotation: 180,//旋转rotationX、rotationY、rotationZ

            skewX: 1.2,//横向倾斜

            skewY: 0.5,

            ease: Elastic.easeOut,//缓动

            delay: 2,//动画延迟(2s后开始动画)

            yoyo: true,//像YOYO球一样往返运动,必须和repeat一起使用

            repeat: -1,//重复,-1表示无限循环

            repeatDelay: 1,//每次动画重复间隔1s

            onStart: function(){console.log('start');},//动画开始前

            onUpdate: function(){console.log('update');},//动画过程中

            onComplete: function(){console.log('complete');},//动画完成时

            onRepeat: function(){console.log('repeat');},//动画重复时

            //useFrames: true,//刷帧  1s=24帧  特别是大项目为了防止动画失帧 而采用这种刷帧的

            //方式进行,此时把第二个时间参数改为帧即可

    });

     

    //延迟2s再调用fun方法

    TweenMax.delayedCall(2, fun);

    function fun(){

            console.log('fun');

    }

     

    //禁掉dv的动画,注意添加对象参数

    TweenMax.killTweensOf('.dv');

     

    //禁掉所有的动画 2种方法

    1、TweenMax.killAll();

    2、TweenMax.killChildTweensOf('body');

     

    区别:

    TweenMax.killAll()禁掉所有的动画,可加参数

    TweenMax.killAll( complete:Boolean, tweens:Boolean, delayedCalls:Boolean, timelines:Boolean );

    TweenMax.killChildTweensOf(obj)禁掉obj下子类的所有动画

     

  • 相关阅读:
    软件工程第十四周学习进度条
    软件工程第十五周学习进度条
    课堂练习-买书价格最低
    找水王2
    Struts结合马士兵视频的学习经验
    Spring结合马士兵视频的学习经验
    浅谈 《大型网站技术架构》 五六七章
    以《淘宝网》为例,描绘质量属性的六个常见属性场景
    浅谈架构漫谈
    软件架构设计师工作流程
  • 原文地址:https://www.cnblogs.com/zhengh/p/4819425.html
Copyright © 2020-2023  润新知