TypeScript ionic-angular.Animation类代码示例

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

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

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

开发者ID:Riron，项目名称:ionic-img-viewer，代码行数:33，代码来源:image-viewer-transitions.ts

示例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;
 }

开发者ID:eldorplus，项目名称:ionic-mailbox-app，代码行数:9，代码来源:unread-inbox.ts

示例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);
 }

开发者ID:qwb0920，项目名称:TaxiBus，代码行数:12，代码来源:dropdown-transitions.ts

示例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);
  }

开发者ID:ColinJS，项目名称:Chillter，代码行数:14，代码来源:custom-modal-enter.ts

示例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);
  }

开发者ID:zeqk，项目名称:mapleapp，代码行数:16，代码来源:mc-house-popup.ts

示例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();
 }

开发者ID:chaabni，项目名称:ionic-image-gallery-app，代码行数:10，代码来源:photo-viewer.ts

示例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();
	}

开发者ID:Riron，项目名称:ionic-img-viewer，代码行数:9，代码来源:image-viewer-src-animation.ts

示例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();
 }

开发者ID:chaabni，项目名称:ionic-image-gallery-app，代码行数:20，代码来源:photo-viewer.ts

示例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);
	}

开发者ID:pliablepixels，项目名称:ionic-img-viewer，代码行数:39，代码来源:image-viewer-transitions.ts

示例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();
 }

开发者ID:chaabni，项目名称:ionic-image-gallery-app，代码行数:8，代码来源:photo-viewer.ts

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