From f106ccf8204d54a95312636aa961c199221fc538 Mon Sep 17 00:00:00 2001 From: Jason Weaver Date: Tue, 5 Sep 2017 11:55:40 -0500 Subject: [PATCH] feat(animation): attention seekers (#848) * feat(animation): Adding bounce animation base * chore(): animation clean up * feat(animation): Adding flash animation base * feat(animation): Adding headshake animation base * feat(animation): Adding jello animation base * feat(animation): Adding pulse animation base * chore(animations): general cleanup * chore(animations): Docs typo --- .../animations/animations.component.html | 98 +++++++++++++++++++ .../animations/animations.component.ts | 15 +++ .../animations/bounce/bounce.animation.ts | 36 +++++++ .../animations/flash/flash.animation.ts | 32 ++++++ .../headshake/headshake.animation.ts | 33 +++++++ .../animations/jello/jello.animation.ts | 36 +++++++ .../animations/pulse/pulse.animation.ts | 30 ++++++ src/platform/core/common/common.module.ts | 5 + 8 files changed, 285 insertions(+) create mode 100644 src/platform/core/common/animations/bounce/bounce.animation.ts create mode 100644 src/platform/core/common/animations/flash/flash.animation.ts create mode 100644 src/platform/core/common/animations/headshake/headshake.animation.ts create mode 100644 src/platform/core/common/animations/jello/jello.animation.ts create mode 100644 src/platform/core/common/animations/pulse/pulse.animation.ts diff --git a/src/app/components/components/animations/animations.component.html b/src/app/components/components/animations/animations.component.html index a8dbe9a652..4706c1355d 100644 --- a/src/app/components/components/animations/animations.component.html +++ b/src/app/components/components/animations/animations.component.html @@ -135,3 +135,101 @@

ease?: string

+ + + + Attention Seekers Animation + + +
+

Demos:

+ + + + + + + + + + + +

Typescript:

+ + + +

HTML:

+ + + @tdBounce mood + + + + + + ]]> + +
+ + +
+

API:

+ + +

anchor?: string

+

The anchor name is used to attach the animation to an arbitrary element in the template.

+ + + +

duration?: number

+

Duration the animation will run in miliseconds. Defaults to 500 ms.

+ + + +
+ + + \ No newline at end of file diff --git a/src/app/components/components/animations/animations.component.ts b/src/app/components/components/animations/animations.component.ts index 120e5ca61b..89994d96c8 100644 --- a/src/app/components/components/animations/animations.component.ts +++ b/src/app/components/components/animations/animations.component.ts @@ -2,6 +2,11 @@ import { Component, HostBinding } from '@angular/core'; import { slideInDownAnimation } from '../../../app.animations'; import { TdRotateAnimation } from '../../../../platform/core/common/animations/rotate/rotate.animation'; +import { TdBounceAnimation } from '../../../../platform/core/common/animations/bounce/bounce.animation'; +import { TdFlashAnimation } from '../../../../platform/core/common/animations/flash/flash.animation'; +import { TdHeadshakeAnimation } from '../../../../platform/core/common/animations/headshake/headshake.animation'; +import { TdJelloAnimation } from '../../../../platform/core/common/animations/jello/jello.animation'; +import { TdPulseAnimation } from '../../../../platform/core/common/animations/pulse/pulse.animation'; @Component({ selector: 'animations-demo', @@ -12,6 +17,11 @@ import { TdRotateAnimation } from '../../../../platform/core/common/animations/r TdRotateAnimation(), TdRotateAnimation({ anchor: 'tdRotate545', duration: 750, degrees: 545, ease: 'ease-in' }), TdRotateAnimation({ anchor: 'tdRotateNeg45', duration: 500, degrees: -45 }), + TdBounceAnimation({ anchor: 'tdBounce', duration: 750 }), + TdFlashAnimation({ anchor: 'tdFlash', duration: 750 }), + TdHeadshakeAnimation({ anchor: 'tdHeadshake', duration: 1500 }), + TdJelloAnimation({ anchor: 'tdJello', duration: 1000 }), + TdPulseAnimation({ anchor: 'tdPulse', duration: 750 }), ], }) export class AnimationsComponent { @@ -21,5 +31,10 @@ export class AnimationsComponent { rotateState1: boolean = false; rotateState2: boolean = false; + bounceState: boolean = false; + flashState: boolean = false; + headshakeState: boolean = false; + jelloState: boolean = false; + pulseState: boolean = false; } diff --git a/src/platform/core/common/animations/bounce/bounce.animation.ts b/src/platform/core/common/animations/bounce/bounce.animation.ts new file mode 100644 index 0000000000..25bab12196 --- /dev/null +++ b/src/platform/core/common/animations/bounce/bounce.animation.ts @@ -0,0 +1,36 @@ + +import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations'; +import { IAnimationOptions } from '../common/interfaces'; + +/** + * Function TdBounceAnimation + * + * params: + * * anchor: Name of the anchor that will attach to a dom element in the components template that will contain the animation. + * * duration: Duration the animation will run in miliseconds. Defaults to 500 ms. + * + * Returns an [AnimationTriggerMetadata] object with states for a boolean trigger based bounce animation. + * + * usage: [@myAnchorName]="true|false" + */ +export function TdBounceAnimation(bounceOptions: IAnimationOptions = {}): AnimationTriggerMetadata { + return trigger(bounceOptions.anchor || 'tdbounce', [ + state('0', style({ + transform: 'translate3d(0, 0, 0)', + })), + state('1', style({ + transform: 'translate3d(0, 0, 0)', + })), + transition('0 <=> 1', animate((bounceOptions.duration || 500) + 'ms', keyframes([ + style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0}), + style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.2}), + style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.4}), + style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.43}), + style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.53}), + style({animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -15px, 0)', offset: .7}), + style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.8}), + style({transform: 'translate3d(0, -4px, 0)', offset: .9}), + style({animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 1.0}), + ]))), + ]); +} diff --git a/src/platform/core/common/animations/flash/flash.animation.ts b/src/platform/core/common/animations/flash/flash.animation.ts new file mode 100644 index 0000000000..27efb4c0a2 --- /dev/null +++ b/src/platform/core/common/animations/flash/flash.animation.ts @@ -0,0 +1,32 @@ + +import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations'; +import { IAnimationOptions } from '../common/interfaces'; + +/** + * Function TdFlashAnimation + * + * params: + * * anchor: Name of the anchor that will attach to a dom element in the components template that will contain the animation. + * * duration: Duration the animation will run in miliseconds. Defaults to 500 ms. + * + * Returns an [AnimationTriggerMetadata] object with states for a boolean trigger based flash animation. + * + * usage: [@myAnchorName]="true|false" + */ +export function TdFlashAnimation(flashOptions: IAnimationOptions = {}): AnimationTriggerMetadata { + return trigger(flashOptions.anchor || 'tdflash', [ + state('0', style({ + opacity: 1, + })), + state('1', style({ + opacity: 1, + })), + transition('0 <=> 1', animate((flashOptions.duration || 500) + 'ms', keyframes([ + style({opacity: 1, offset: 0}), + style({opacity: 0, offset: 0.25}), + style({opacity: 1, offset: 0.5}), + style({opacity: 0, offset: 0.75}), + style({opacity: 1, offset: 1.0}), + ]))), + ]); +} diff --git a/src/platform/core/common/animations/headshake/headshake.animation.ts b/src/platform/core/common/animations/headshake/headshake.animation.ts new file mode 100644 index 0000000000..c88e505f33 --- /dev/null +++ b/src/platform/core/common/animations/headshake/headshake.animation.ts @@ -0,0 +1,33 @@ + +import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations'; +import { IAnimationOptions } from '../common/interfaces'; + +/** + * Function TdHeadshakeAnimation + * + * params: + * * anchor: Name of the anchor that will attach to a dom element in the components template that will contain the animation. + * * duration: Duration the animation will run in miliseconds. Defaults to 500 ms. + * + * Returns an [AnimationTriggerMetadata] object with states for a boolean trigger based headshake animation. + * + * usage: [@myAnchorName]="true|false" + */ +export function TdHeadshakeAnimation(headshakeOptions: IAnimationOptions = {}): AnimationTriggerMetadata { + return trigger(headshakeOptions.anchor || 'tdheadshake', [ + state('0', style({ + transform: 'translateX(0)', + })), + state('1', style({ + transform: 'translateX(0)', + })), + transition('0 <=> 1', animate((headshakeOptions.duration || 500) + 'ms', keyframes([ + style({transform: 'translateX(0)', offset: 0}), + style({transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.065}), + style({transform: 'translateX(5px) rotateY(7deg)', offset: 0.185}), + style({transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.315}), + style({transform: 'translateX(2px) rotateY(3deg)', offset: 0.435}), + style({transform: 'translateX(0)', offset: 0.50}), + ]))), + ]); +} diff --git a/src/platform/core/common/animations/jello/jello.animation.ts b/src/platform/core/common/animations/jello/jello.animation.ts new file mode 100644 index 0000000000..83f691f4e4 --- /dev/null +++ b/src/platform/core/common/animations/jello/jello.animation.ts @@ -0,0 +1,36 @@ + +import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations'; +import { IAnimationOptions } from '../common/interfaces'; + +/** + * Function TdJelloAnimation + * + * params: + * * anchor: Name of the anchor that will attach to a dom element in the components template that will contain the animation. + * * duration: Duration the animation will run in miliseconds. Defaults to 500 ms. + * + * Returns an [AnimationTriggerMetadata] object with states for a boolean trigger based jello animation. + * + * usage: [@myAnchorName]="true|false" + */ +export function TdJelloAnimation(jelloOptions: IAnimationOptions = {}): AnimationTriggerMetadata { + return trigger(jelloOptions.anchor || 'tdjello', [ + state('0', style({ + transform: 'none', + })), + state('1', style({ + transform: 'none', + })), + transition('0 <=> 1', animate((jelloOptions.duration || 500) + 'ms', keyframes([ + style({transform: 'none', offset: 0}), + style({transform: 'none', offset: 0.011}), + style({transform: 'skewX(-12.5deg) skewY(-12.5deg)', offset: 0.222}), + style({transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.333}), + style({transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.444}), + style({transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.555}), + style({transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', offset: 0.666}), + style({transform: 'skewX(0.390625deg) skewY(0.390625deg)', offset: 0.777}), + style({transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', offset: 0.888}), + ]))), + ]); +} diff --git a/src/platform/core/common/animations/pulse/pulse.animation.ts b/src/platform/core/common/animations/pulse/pulse.animation.ts new file mode 100644 index 0000000000..86074e77ea --- /dev/null +++ b/src/platform/core/common/animations/pulse/pulse.animation.ts @@ -0,0 +1,30 @@ + +import { trigger, state, style, keyframes, transition, animate, AnimationTriggerMetadata, AUTO_STYLE } from '@angular/animations'; +import { IAnimationOptions } from '../common/interfaces'; + +/** + * Function TdPulseAnimation + * + * params: + * * anchor: Name of the anchor that will attach to a dom element in the components template that will contain the animation. + * * duration: Duration the animation will run in miliseconds. Defaults to 500 ms. + * + * Returns an [AnimationTriggerMetadata] object with states for a boolean trigger based pulse animation. + * + * usage: [@myAnchorName]="true|false" + */ +export function TdPulseAnimation(pulseOptions: IAnimationOptions = {}): AnimationTriggerMetadata { + return trigger(pulseOptions.anchor || 'tdpulse', [ + state('0', style({ + transform: 'scale3d(1, 1, 1)', + })), + state('1', style({ + transform: 'scale3d(1, 1, 1)', + })), + transition('0 <=> 1', animate((pulseOptions.duration || 500) + 'ms', keyframes([ + style({transform: 'scale3d(1, 1, 1)', offset: 0}), + style({transform: 'scale3d(1.05, 1.05, 1.05)', offset: 0.5}), + style({transform: 'scale3d(1, 1, 1)', offset: 1.0}), + ]))), + ]); +} diff --git a/src/platform/core/common/common.module.ts b/src/platform/core/common/common.module.ts index 3ab3228080..90bf872eb4 100644 --- a/src/platform/core/common/common.module.ts +++ b/src/platform/core/common/common.module.ts @@ -22,6 +22,11 @@ export { TdToggleDirective, TdFadeDirective }; export { TdRotateAnimation, IRotateAnimation } from './animations/rotate/rotate.animation'; export { TdCollapseAnimation } from './animations/collapse/collapse.animation'; export { TdFadeInOutAnimation } from './animations/fade/fadeInOut.animation'; +export { TdBounceAnimation } from './animations/bounce/bounce.animation'; +export { TdFlashAnimation } from './animations/flash/flash.animation'; +export { TdHeadshakeAnimation } from './animations/headshake/headshake.animation'; +export { TdJelloAnimation } from './animations/jello/jello.animation'; +export { TdPulseAnimation } from './animations/pulse/pulse.animation'; /** * BEHAVIORS