zoukankan      html  css  js  c++  java
  • 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下子类的所有动画

     

  • 相关阅读:
    进程和程序的区别
    【Docker】5. 常用命令 — 镜像命令
    【Docker】4. 运行镜像的流程、docker工作原理
    【Docker】3. 配置阿里云镜像加速
    【Docker】2. Docker的架构介绍、安装与卸载 (CentOS 7)
    【Docker】Docker概述
    【Git】5. 远程库(GitHub)相关操作
    【Git】4. 团队内、跨团队协作机制
    【Git】3. Git重要特性-分支操作,合并冲突详解
    线性插值编写可视化代码
  • 原文地址:https://www.cnblogs.com/zhengh/p/4819425.html
Copyright © 2011-2022 走看看