时间:2021-05-28
前言
在前端应用中,动画是一个常见的场景。在使用了一系列的动画库之后,终于需要自己来实现一个动画了。这次的动画则是基于 Angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里,需要两个动画,一个是购物车数量的增加动画,一个则是折叠页面元素的动画。
在实现的过程上,我采用了两种不同的 Angular 动画的方式:
Angular 动画基础
如 Angular 官网中的示例那样,要在 Angular 应用中添加动画是比较简单的一件事——前提是我们懂得添加的法则。如下是官网的示例:
@Component({ selector: 'app-hero-list-basic', template: ` <ul> <li *ngFor="let hero of heroes" [@heroState]="hero.state" (click)="hero.toggleState()"> {{hero.name}} </li> </ul> `, styleUrls: ['./hero-list.component.css'], animations: [ trigger('heroState', [ state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) ]) ]})要使用动画,需要在模板中使用 [@heroState]语法,这里的 heroState 对应着 @Component 中的 heroState 相关的动画。
原理上,大概就是这么多了。然后,我就开始了我的动画之旅。
购物车数量增加动画
对于我的场景来说,要添加这个动画并不难。无非就是上一个值淡出,新的值淡入:
trigger('count', [ transition('void => current', [ animate( '400ms 150ms', 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 来实现了:
const myAnimation = 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 }) ]) ) ]); const player = myAnimation.create(forkFormComponent); player.play(); player.onDone(() => { const nativeElement = this.cartContainer.nativeElement; nativeElement.removeChild(nativeElement.childNodes[0]); this.renderer.setStyle(nativeElement, 'display', 'none'); });在那之前,我先复制了页面元素:
const formElement = this.formElement.nativeElement;const forkFormComponent = 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,然后实现缩放效果了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、功能描述:1、点击购买按钮,模拟抛物线将物品弹到购物车里;2、购物车添加物品后,显示+1动画;效果图如下:实现如下:1、导入jquery相关的包:2、htm
效果图动画代码这里只提供图中购物车动画代码,不提供以上点餐界面(需要点餐界面点击这里:Gitee仓库)。在触发代码中使用this.cartWwing()调用动画
在工作中,购物车场景非常常见。本文实现基于React-Native和Mobx实现两种购物车例子。其中,后期会加入动画等其他。本期先实现基础功能。二:基于Stat
本文实例为大家分享了java实现购物车功能的具体代码,供大家参考,具体内容如下1需要实现1、实现淘淘商城的购物车功能2购物车功能2.1功能说明1、商品加入购物车
本文实例为大家分享了angular.js购物车功能的具体代码,供大家参考,具体内容如下购物车.box{width:100%;border-bottom:1pxs