本文整理汇总了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);
};示例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();示例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
示例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示例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
示例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