TypeScript TimelineLite.set函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中TimelineLite.set函数的典型用法代码示例。如果您正苦于以下问题：TypeScript set函数的具体用法？TypeScript set怎么用？TypeScript set使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了set函数的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: TimelineLite

const goToNextSlide = ($slideOut: JQuery, $slideIn: JQuery)=> {
    const tl = new TimelineLite();

    const $slideOutH1 = $slideOut.find('h1');
    const $slideOutP = $slideOut.find('p');
    const $slideInH1 = $slideIn.find('h1');
    const $slideInP = $slideIn.find('p');

    tl
        .set($slideIn, {y: '100%', autoAlpha: 1, className: '+=active'})
        .set($slideOut, {className: '-=active'})
        .to($slideOut, 0.5, {y: '-100%', ease: Power3.easeInOut}, 0)
        .to($slideIn, 0.5, {y: '-=100%', ease: Power3.easeInOut}, 0);
};

开发者ID:martin-fabbri，项目名称:greensock-playground，代码行数:14，代码来源:main.ts

示例2: goToNextSlide

    const $slideOutP = $slideOut.find('p');
    const $slideInH1 = $slideIn.find('h1');
    const $slideInP = $slideIn.find('p');

    tl
        .set($slideIn, {y: '100%', autoAlpha: 1, className: '+=active'})
        .set($slideOut, {className: '-=active'})
        .to($slideOut, 0.5, {y: '-100%', ease: Power3.easeInOut}, 0)
        .to($slideIn, 0.5, {y: '-=100%', ease: Power3.easeInOut}, 0);
};

$slideNavNext.click((e)=> {
    e.preventDefault();
    const $slideOut = $('.homeSlide.active');
    const $slideIn = $slideOut.next();
    goToNextSlide($slideOut, $slideIn);
});
//endregion

const initTl = new TimelineLite({paused: true});
initTl
    //hide all the slides except the active one
    .set($homeSlide.not($activeSlide), {autoAlpha: 0})
    //disable arrow down on pageload
    .set($slideNavPrev, {autoAlpha: 0.2});





initTl.play();

开发者ID:martin-fabbri，项目名称:greensock-playground，代码行数:31，代码来源:main.ts

示例3: TimelineLite

import * as TimelineLite from 'TimelineLite';
import 'CSSPlugin';
import 'EasePack';
import 'DrawSVGPlugin';
import 'AttrPlugin';
import 'MorphSVGPlugin';

//region Element Selectors
const $hippo = document.getElementById('hippo');
const $elephant = document.getElementById('elephant');
//endregion

//region SVG animations

const tl = new TimelineLite();

tl
    .set($elephant, {
        alpha: 0
    })
    .to($hippo, 2, {
        morphSVG: {
            shape: '#elephant',
            shapeIndex: 'auto'
            //shapeIndex: -1
        },
        ease: Bounce.easeOut
    });

//endregion

开发者ID:martin-fabbri，项目名称:greensock-playground，代码行数:30，代码来源:main.ts

示例4: TimelineLite

const $path = $('#path');
const $circle = $('circle');
const $ellipse = $('ellipse');
const $rect = $('rect');
const $polyline = $('polyline');

//region Animation Config
const duration = 1;
const infiniteRepeatLoop = -1;
//endregion


//region Timeline Setup
const curbTl = new TimelineLite();

curbTl
    .set('circle', {stroke: 'red', strokeWidth: 6})
    .fromTo($path, duration,
        {drawSVG: '0% 10%'},
        {drawSVG: '90% 100%', delay: 0.5, ease: Bounce.easeOut}
    )
    .from($circle, duration, {drawSVG: 0})
    .from($ellipse, duration, {drawSVG: 0})
    .from($rect, duration, {drawSVG: 0})
    .from($polyline, duration, {drawSVG: 0})
    // .from($path, duration, {
    //     drawSVG: '50% 50%',
    //     delay: 0.5
    // })
;

//endregion

开发者ID:martin-fabbri，项目名称:greensock-playground，代码行数:32，代码来源:main.ts

示例5: TimelineLite

import 'CSSPlugin';
import 'EasePack';
import 'DrawSVGPlugin';
import 'AttrPlugin';
import 'MorphSVGPlugin';

//region Element Selectors
const $monstaPath = $('.monsta path');
const $arms = $('#arms');
//endregion

//region Animation Configuration
const duration = 1;
//endregion

//region Animation Sequence
const tl = new TimelineLite();

tl
    .set($monstaPath, {
        stroke: '#6ffee8',
        visibility: 'visible'
    })
    .fromTo($monstaPath, duration,
        {drawSVG: '50% 50%'},
        {drawSVG: true, ease: Power2.easeOut}
    );

//endregion

开发者ID:martin-fabbri，项目名称:greensock-playground，代码行数:29，代码来源:main.ts

示例6: TimelineLite

const $tomato = $('#tomato');
const $tomatoLeft = $('.tomatoLeft');
const $tomatoRight = $('.tomatoRight');
const $tomatoLeaves = $('.tomatoLeaves');
//endregion

//region Animation Configuration
const duration = 1;
//endregion

//region SVG animations
const tl = new TimelineLite();

tl
    .set($bracketLeft, {
        //alpha: 0,
        xPercent: -200
    })
    .set($bracketRight, {
        //alpha: 0,
        xPercent: 200
    })
    .set($tomato, {
        //alpha: 0,
        yPercent: -200,
        xPercent: 2,
        rotation: 13,
        transformOrigin: 'center center'
    })
    .set($tomatoLeft, {
        xPercent: 23.6

开发者ID:martin-fabbri，项目名称:greensock-playground，代码行数:31，代码来源:main.ts

注：本文中的TimelineLite.set函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。