本文整理汇总了TypeScript中ionic-angular.Animation类的典型用法代码示例。如果您正苦于以下问题：TypeScript Animation类的具体用法？TypeScript Animation怎么用？TypeScript Animation使用的例子？那么, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了Animation类的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: init
init() {
const css = this.plt.Css;
const ele = this.leavingView.pageRef().nativeElement;
const imgElement = ele.querySelector('img');
const backdropElement = ele.querySelector('ion-backdrop');
const toPosition = this.leavingView.data.position;
const fromPosition = imgElement.getBoundingClientRect();
const flipS = toPosition.width / fromPosition.width;
const flipY = toPosition.top - fromPosition.top;
const flipX = toPosition.left - fromPosition.left;
const backdropOpacity =backdropElement.style['opacity'];
const backdrop = new Animation(this.plt,backdropElement);
const image = new Animation(this.plt, imgElement);
image.fromTo('translateY', `${0}px`, `${flipY}px`)
.fromTo('translateX', `0px`, `${flipX}px`)
.fromTo('scale', 1, flipS)
.beforeStyles({ [css.transformOrigin]: '0 0' })
.afterClearStyles([css.transformOrigin]);
backdrop.fromTo('opacity', backdropOpacity, 0);
this.easing('ease-in-out')
.duration(150)
.add(backdrop)
.add(image);
}示例2: overrideAnimation
overrideAnimation(inboxItemWrapper: InboxItemWrapper, elementRef: ElementRef, currentPosition: number, originalNewPosition: number, maximumAchievedVelocity: number, minSuggestedVelocity: number): Animation{
let velocity = Math.max(Math.abs(maximumAchievedVelocity), minSuggestedVelocity);
let transitionTimeInMillis = Math.abs(Math.floor(currentPosition/velocity));
inboxItemWrapper.setState();
let animation = new Animation(elementRef, {renderDelay: 0});
animation.fromTo('translateX', `${currentPosition}px`, `${0}px`);
animation.duration(transitionTimeInMillis);
return animation;
}示例3: init
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
let wrapper = new Animation(ele.querySelector('.dropdown-wrapper'));
wrapper.fromTo('opacity', 0.99, 0);
backdrop.fromTo('opacity', 0.08, 0);
this
.easing('ease')
.duration(500)
.add(backdrop)
.add(wrapper);
}示例4: init
public init() {
const ele = this.enteringView.pageRef().nativeElement;
const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
wrapper.beforeStyles({ 'transform': 'scale(0)', 'opacity': 1 });
wrapper.fromTo('transform', 'translate(-500px)', 'translate(0px)');
wrapper.fromTo('opacity', 0.1, 1);
this
.element(this.enteringView.pageRef())
.duration(500)
.easing('cubic-bezier(.1, .7, .1, 1)')
.add(wrapper);
}示例5: constructor
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
backdrop.fromTo('opacity', '0.5', '0');
this
.easing('ease-out')
.duration(150)
.add(backdrop)
.add(wrapper);
}示例6: doResetAnimation
doResetAnimation(newYValue: number) {
let animation = new Animation(this.backdrop, {renderDelay: 0});
let backdropAnimation = new Animation(this.backdrop, {renderDelay: 0});
backdropAnimation.fromTo('opacity', this.backdrop.nativeElement.style.opacity, '1.0');
let buttonAnimation = new Animation(this.btnContainer, {renderDelay: 0});
buttonAnimation.fromTo('translateY', `-100px`, `0px`);
let imageAnimation = new Animation(this.nonScaledImageEle, {renderDelay: 0});
imageAnimation.fromTo('translateY', `${newYValue}px`, `0px`);
animation.duration(250).easing('ease').add(backdropAnimation).add(buttonAnimation).add(imageAnimation).play();
}示例7: scaleFrom
scaleFrom(lowResImgWidth) {
const highResImgWidth = this.element.clientWidth;
const imageTransition = this.imageAnimation
.fromTo('scale', lowResImgWidth / highResImgWidth, 1)
.duration(100)
.easing('ease-in-out')
.play();
}示例8: doSwipeToDismissAnimation
doSwipeToDismissAnimation(viewPortHeight: number, differenceY: number, newYValue: number, velocity: number) {
let animation = new Animation(this.nonScaledImageEle, {renderDelay: 0 });
let to: number;
if ( differenceY < 0 ) {
to = 0 - viewPortHeight - 20;
animation.fromTo('translateY', `${newYValue}px`, `${to}px`);
} else {
to = viewPortHeight + 20;
animation.fromTo('translateY', `${newYValue}px`, `${to}px`);
}
animation.onFinish( () => {
this.dismissView(true);
});
let distanceTraveled = Math.abs(to - newYValue);
let time = distanceTraveled / velocity;
if ( time > 300 ) {
time = 300;
}
animation.duration(time).easing('ease').play();
}示例9: init
init() {
const css = this.plt.Css;
const ele = this.leavingView.pageRef().nativeElement;
const toPosition = this.leavingView.data.position;
const fromPosition = ele.querySelector('img').getBoundingClientRect();
const imageElement = ele.querySelector('.image');
let offsetY = 0;
const imageYOffset = imageElement.style[css.transform];
if (imageYOffset) {
const regexResult = imageYOffset.match(/translateY\((-?\d*\.?\d*)px\)/);
offsetY = regexResult ? parseFloat(regexResult[1]) : offsetY;
}
const flipS = toPosition.width / fromPosition.width;
const flipY = toPosition.top - fromPosition.top + offsetY;
const flipX = toPosition.left - fromPosition.left;
const backdropOpacity = ele.querySelector('ion-backdrop').style['opacity'];
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
const image = new Animation(this.plt, imageElement);
image.fromTo('translateY', `${offsetY}px`, `${flipY}px`)
.fromTo('translateX', `0px`, `${flipX}px`)
.fromTo('scale', '1', flipS)
.beforeStyles({ [css.transformOrigin]: '0 0' })
.afterClearStyles([css.transformOrigin]);
backdrop.fromTo('opacity', backdropOpacity, '0');
this.easing('ease-in-out')
.duration(150)
.add(backdrop)
.add(image);
}示例10: doMoveAnimation
doMoveAnimation(previousYValue: number, newYalue: number, percentDragged: number) {
let animation = new Animation(this.backdrop, {renderDelay: 0});
let backdropAnimation = new Animation(this.backdrop, {renderDelay: 0});
backdropAnimation.fromTo('opacity', this.backdrop.nativeElement.style.opacity, `${1 - (percentDragged * 1.25)}`);
let imageAnimation = new Animation(this.nonScaledImageEle, {renderDelay: 0});
imageAnimation.fromTo('translateY', `${previousYValue}px`, `${newYalue}px`);
animation.add(backdropAnimation).add(imageAnimation).play();
}