diff --git a/common/changes/@uifabric/styling/add-beacon-styling_2018-04-03-20-54.json b/common/changes/@uifabric/styling/add-beacon-styling_2018-04-03-20-54.json new file mode 100644 index 00000000000000..03e51932760a9f --- /dev/null +++ b/common/changes/@uifabric/styling/add-beacon-styling_2018-04-03-20-54.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "New pulsing beacon animation moved in from Coachmark for reuse.", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts new file mode 100644 index 00000000000000..eac7e609045cf6 --- /dev/null +++ b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts @@ -0,0 +1,90 @@ +import { IRawStyle, keyframes } from '@uifabric/merge-styles/lib/index'; + +const DEFAULT_DURATION = '14s'; +const DEFAULT_DELAY = '2s'; +const DEFAULT_ITERATION_COUNT = '1'; + +function _continuousPulseStepOne(beaconColorOne: string, innerDimension: string): IRawStyle { + return { + borderColor: beaconColorOne, + borderWidth: '0px', + width: innerDimension, + height: innerDimension + }; +} + +function _continuousPulseStepTwo(borderWidth: string): IRawStyle { + return { + opacity: 1, + borderWidth: borderWidth + }; +} + +function _continuousPulseStepThree(): IRawStyle { + return { + opacity: 1 + }; +} + +function _continuousPulseStepFour(beaconColorTwo: string, outerDimension: string): IRawStyle { + return { + borderWidth: '0', + width: outerDimension, + height: outerDimension, + opacity: 0, + borderColor: beaconColorTwo + }; +} + +function _continuousPulseStepFive(beaconColorOne: string, innerDimension: string): IRawStyle { + return { + ..._continuousPulseStepOne(beaconColorOne, innerDimension), + ...{ + opacity: 0 + } + }; +} + +function _continuousPulseAnimation( + beaconColorOne: string, + beaconColorTwo: string, + innerDimension: string, + outerDimension: string, + borderWidth: string +): string { + return keyframes({ + '0%': _continuousPulseStepOne(beaconColorOne, innerDimension), + '1.42%': _continuousPulseStepTwo(borderWidth), + '3.57%': _continuousPulseStepThree(), + '7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension), + '8%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '30%': _continuousPulseStepOne(beaconColorOne, innerDimension), + '31.42%': _continuousPulseStepTwo(borderWidth), + '33.57%': _continuousPulseStepThree(), + '37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension), + '38%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension), + '79.43': _continuousPulseStepOne(beaconColorOne, innerDimension), + '81.85': _continuousPulseStepTwo(borderWidth), + '83.42': _continuousPulseStepThree(), + '87%': _continuousPulseStepFour(beaconColorTwo, outerDimension), + '100%': {} + }); +} + +function _createDefaultAnimation( + animationName: string, +): IRawStyle { + return { + animationName, + animationIterationCount: DEFAULT_ITERATION_COUNT, + animationDuration: DEFAULT_DURATION, + animationDelay: DEFAULT_DELAY + }; +} + +export const PulsingBeaconAnimationStyles = { + continuousPulseAnimation: _continuousPulseAnimation, + createDefaultAnimation: _createDefaultAnimation +}; \ No newline at end of file