Angular动画实现的2种方式以及添加购物车动画实例代码
前言
在前端应用中,动画是一个常见的场景。在使用了一系列的动画库之后,终于需要自己来实现一个动画了。这次的动画则是基于Angular框架。我的场景是一个类似于添加购物车的动画。在这个场景里,需要两个动画,一个是购物车数量的增加动画,一个则是折叠页面元素的动画。
在实现的过程上,我采用了两种不同的Angular动画的方式:
- 使用TypeScript控制动画
- 使用@Component中的animations
Angular动画基础
如Angular官网中的示例那样,要在Angular应用中添加动画是比较简单的一件事——前提是我们懂得添加的法则。如下是官网的示例:
@Component({ selector:'app-hero-list-basic', template:`
- {{hero.name}}
要使用动画,需要在模板中使用[@heroState]语法,这里的heroState对应着@Component中的heroState相关的动画。
- 在这个trigger中,我们定义了inactive和active两个不同的state。即当模板中的hero.state发生变化的时候,我们就会找到对应的state的样式等等的内容。
- 在这个trigger中,我们还定义了两个transition,即当我们的state从inactive=>active或者active=>inactive时,我们就会执行后面的动画。
原理上,大概就是这么多了。然后,我就开始了我的动画之旅。
购物车数量增加动画
对于我的场景来说,要添加这个动画并不难。无非就是上一个值淡出,新的值淡入:
trigger('count',[ transition('void=>current',[ animate( '400ms150ms', keyframes([ style({opacity:0.6,transform:'translateY(0)',offset:0}), style({opacity:0.3,transform:'translateY(-15px)',offset:0.5}), style({opacity:0,transform:'translateY(-30px)',offset:1}) ]) ) ]), transition('void=>last',[ animate( 250, keyframes([ style({opacity:0,transform:'translateY(100%)',offset:0}), style({opacity:0.3,transform:'translateY(15px)',offset:0.5}), style({opacity:0.8,transform:'translateY(0)',offset:1.0}) ]) ) ]) ])
代码就是这么简单,这里用到了关键帧keyframes,来进行一些简单的动画转换。
页面缩放动画
随后,我需要做的就是对页面的元素进行缩放等效果,这个时候就需要用到AnimationBuilder来实现了:
constmyAnimation=this.animationBuilder.build([ animate( 1000, keyframes([ style({opacity:0.8,transform:'scale(0.8)',offset:0.3}), style({opacity:0.3,transform:'scale(0.3)',offset:0.5}), style({opacity:0.2,transform:'scale(0.2)translate(12000px,8000px)',offset:1}) ]) ) ]); constplayer=myAnimation.create(forkFormComponent); player.play(); player.onDone(()=>{ constnativeElement=this.cartContainer.nativeElement; nativeElement.removeChild(nativeElement.childNodes[0]); this.renderer.setStyle(nativeElement,'display','none'); });
在那之前,我先复制了页面元素:
constformElement=this.formElement.nativeElement; constforkFormComponent=this.cartContainer.nativeElement; forkFormComponent.appendChild(formElement.cloneNode(true)); this.renderer.setStyle(forkFormComponent,'display','block'); this.renderer.setStyle(forkFormComponent,'position','absolute'); this.renderer.setStyle(forkFormComponent,'top','-300px'); this.renderer.setStyle(forkFormComponent,'left','0');
这样一来,就能复制页面的DOM,然后实现缩放效果了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。