• TweenMax学习一


    TweenMaxjs是一个性能很高的js动画框架,它与css3动画具有时间轴的概念。你可以很方便的把动画添加到一个时间轴队列里面去按照你需要的顺序去执行。

    官网地址: http://greensock.com

    怎么使用:

    首先我们要做的是引入该文件,

    第二步就是使用new关键字创建一个时间轴实例

    var T1;
    T1 = new TimelineMax({
                    //delay: 0.3,
                    //paused: true
                })

    1.如果有一组动画同时开始动画,我们可以使用链式操作的方式实现

    T1 = new TimelineMax({
                // delay: 0.3,
                //paused: true
                onStart: function () {
                    options.onStart();
                },
                onComplete: function () {
                    options.onComplete();
                }
            })
            .fromTo(el.sm1, 1, {
                y: -100,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeOut
            })
            .fromTo(el.sm2, 1, {
                x: 100,
                opacity: 0
            }, {
                x: 0,
                opacity: 1,
                ease: Power3.easeOut
            })
    View Code

    2.如果有一组动画,按时间先后顺序一个一个的出现场景

     我们可以使用FromTo()方法,positio参数时间设置不一样就行了

    T1 = new TimelineMax({
                    //delay: 0.3,
                //paused: true
            })
              .fromTo([$(".Jan_sm_1")], 0.5, {//
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                },0.3)
                .fromTo([$(".Jan_txt_1")], 0.5, {
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                },0.6)
                .fromTo([$(".m-logo")], 0.5, {
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                },0.9)
                .fromTo([$(".sm-2")], 0.5, {
                    y: -20,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                }, 1.5)
    View Code

    也可以通过添加一个标签(label),再相对于这个label去设置时间差

    T1 = new TimelineMax({
                    //delay: 0.3,
                //paused: true
            })
                .add("labal")
                .fromTo([$(".Jan_sm_1")], 0.5, {//
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                },"labal")
                .fromTo([$(".Jan_txt_1")], 0.5, {
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                },'labal+=0.6')
                .fromTo([$(".m-logo")], 0.5, {
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                },'labal+=1')
                .fromTo([$(".sm-2")], 0.5, {
                    y: -20,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                }, 'labal+=2')
    View Code

    也可以定义多条时间轴,把后面的时间轴添加到当前时间轴,就可以按顺序执行了

    T1 = new TimelineMax({
                //delay: 0.3,
                //paused: true
            })
                
                .fromTo([$(".Jan_sm_1")], 0.5, {//
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                }, 1);
    
    
            T2 = new TimelineMax({
                //delay: 0.3,
                //paused: true
            }).fromTo([$(".Jan_txt_1")], 0.5, {
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    //rotation:90,
                    ease: Power3.easeNone
                }, 1)
               
            T3 = new TimelineMax({
                //delay: 0.3,
                //paused: true
            }).fromTo([$(".m-logo")], 0.5, {
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                },1)
                 
            T4= new TimelineMax({
                //delay: 0.3,
                //paused: true
            }).fromTo([$(".sm-2")], 0.5, {
                    y: -20,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                }, 1)
            T1.add(T2).add(T3).add(T4);
    View Code

    注:如果不使用add把他们添加进去的话,4个会同事执行

    3.如果有一组动画,效果相同。只是时间按选后顺序出现的场景

     我们可以使用staggerFromTo()方法

    参数如下

    .staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* )
    第一个参数是目标元素---对谁做动画,可以睡是一组数组对象,可以是一个类似jQuery的对象($(“. myClass”)),也可以直接是一个css选择器(. myClass h2. myClass)
    T1 = new TimelineMax({
                    delay: 0.3,
                    //paused: true
                })
                .staggerFromTo([$(".Jan_sm_1"), $(".Jan_txt_1")], 0.5, {//错层队列动画,适合一组动画效果相同时间按选后顺序出现的场景
                    y: 50,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power3.easeNone
                }, 0.3)
  • 相关阅读:
    [Android开发]cocos2dx工程中接入支付宝sdk
    cocos2dx android SDK接入总结
    Cocos2d-vs避免过长编译的小技巧
    math.h里的数学计算公式介绍
    Cocos Code IDE入门指南
    kbengine引擎的安装
    游戏服务端pomelo完整安装配置过程
    cocos2d-x 两个场景间进行传参数
    cocos2d-x 设置全局可变变量
    如何将cocos2d-x项目打包成一个.exe
  • 原文地址:https://www.cnblogs.com/ruoqiang/p/5717211.html
Copyright © 2020-2023  润新知