本文整理匯總了TypeScript中ionic-angular.Animation.fromTo方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Animation.fromTo方法的具體用法？TypeScript Animation.fromTo怎麽用？TypeScript Animation.fromTo使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類ionic-angular.Animation的用法示例。
在下文中一共展示了Animation.fromTo方法的9個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的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: 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();
}示例3: 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();
}示例4: 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);
}示例5: 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);
}示例6: 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);
}示例7: 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;
}示例8: scaleFrom
scaleFrom(lowResImgWidth) {
const highResImgWidth = this.element.clientWidth;
const imageTransition = this.imageAnimation
.fromTo('scale', lowResImgWidth / highResImgWidth, 1)
.duration(100)
.easing('ease-in-out')
.play();
}示例9: animateItemWrapperOut
animateItemWrapperOut(index: number, callback: () => any):void {
let array = this.itemWrappers.toArray();
let animation = new Animation(array[index].nativeElement, {renderDelay: 0});
animation.fromTo('height', `${array[index].nativeElement.clientHeight}px`, `${0}px`);
animation.easing('ease-in');
animation.duration(DELETE_ANIMATION_DURATION);
animation.onFinish(callback);
animation.play();
}