-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
d53ef53
commit f106ccf
Showing
8 changed files
with
285 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
src/platform/core/common/animations/bounce/bounce.animation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}), | ||
| ]))), | ||
| ]); | ||
| } |
32 changes: 32 additions & 0 deletions
32
src/platform/core/common/animations/flash/flash.animation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}), | ||
| ]))), | ||
| ]); | ||
| } |
33 changes: 33 additions & 0 deletions
33
src/platform/core/common/animations/headshake/headshake.animation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}), | ||
| ]))), | ||
| ]); | ||
| } |
36 changes: 36 additions & 0 deletions
36
src/platform/core/common/animations/jello/jello.animation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}), | ||
| ]))), | ||
| ]); | ||
| } |
30 changes: 30 additions & 0 deletions
30
src/platform/core/common/animations/pulse/pulse.animation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}), | ||
| ]))), | ||
| ]); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters