-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor(): BREAKING Animation removing byValue, removing fxStraigthen. #8547
Merged
Merged
Changes from 5 commits
Commits
Show all changes
29 commits
Select commit
Hold shift + click to select a range
1cdfea3
small removals
asturur 2fe7cbb
small removals
asturur 47f3cfe
fix tests
asturur 1cdd49d
added parkinglot
asturur fe59b48
renames and color easing as a const
asturur a73bf6d
prettier and changelog
asturur 6b66b47
prettier again
asturur 86dc5be
Merge branch 'master' into small-animation-preferences
asturur 9cca498
merged conflicts
asturur 7687271
better comments
asturur 2c7b22c
removed by Value
asturur cd52d71
prettier
asturur 64c968e
removed misc.ts
asturur dd3c2a0
Update CHANGELOG.md
asturur b17f989
Merge branch 'master' into small-animation-preferences
asturur 5a72663
Update test/unit/animation.js
asturur c23dce3
simpler types
ShaMan123 0dd3a08
Update animation.ts
ShaMan123 85bd8ee
fix(): animation types by overload
ShaMan123 2c5c818
Merge branch 'master' into small-animation-preferences
ShaMan123 ff05bc3
fix(): make types align with logic
ShaMan123 aba89e2
future proofing: use freeze instead of concat
ShaMan123 b50b98f
Update AnimationBase.ts
ShaMan123 0c0e746
Update animation.js
ShaMan123 ef30290
Update animation.js
ShaMan123 25605ce
fix(): `changeRatio` for opacity anim
ShaMan123 1541b5a
rename: changeRatio => valueProgress
ShaMan123 5eef243
Update animation.js
ShaMan123 1201289
Merge branch 'master' into small-animation-preferences
asturur File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
// @ts-nocheck | ||
import { noop } from "../constants"; | ||
import { FabricObject } from "../shapes/Object/FabricObject"; | ||
import { TDegree } from "../typedefs"; | ||
import { animate } from "../util/animation/animate"; | ||
|
||
Object.assign(FabricObject.prototype, { | ||
/** | ||
* @private | ||
* @return {Number} angle value | ||
*/ | ||
_getAngleValueForStraighten(this: FabricObject) { | ||
const angle = this.angle % 360; | ||
if (angle > 0) { | ||
return Math.round((angle - 1) / 90) * 90; | ||
} | ||
return Math.round(angle / 90) * 90; | ||
}, | ||
|
||
/** | ||
* Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) | ||
*/ | ||
straighten(this: FabricObject) { | ||
this.rotate(this._getAngleValueForStraighten()); | ||
}, | ||
|
||
/** | ||
* Same as {@link straighten} but with animation | ||
* @param {Object} callbacks Object with callback functions | ||
* @param {Function} [callbacks.onComplete] Invoked on completion | ||
* @param {Function} [callbacks.onChange] Invoked on every step of animation | ||
*/ | ||
fxStraighten( | ||
this: FabricObject, | ||
callbacks: { | ||
onChange?(value: TDegree): any; | ||
onComplete?(): any; | ||
} = {} | ||
) { | ||
const onComplete = callbacks.onComplete || noop, | ||
onChange = callbacks.onChange || noop; | ||
|
||
return animate({ | ||
target: this, | ||
startValue: this.angle, | ||
endValue: this._getAngleValueForStraighten(), | ||
duration: this.FX_DURATION, | ||
onChange: (value: TDegree) => { | ||
this.rotate(value); | ||
onChange(value); | ||
}, | ||
onComplete: () => { | ||
this.setCoords(); | ||
onComplete(); | ||
}, | ||
}); | ||
} | ||
}); |
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
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
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,26 +1,29 @@ | ||||||
import { Color } from '../../color'; | ||||||
import { TRGBAColorSource } from '../../color/color.class'; | ||||||
import { halfPI } from '../../constants'; | ||||||
import { capValue } from '../misc/capValue'; | ||||||
import { AnimationBase } from './AnimationBase'; | ||||||
import { ColorAnimationOptions, TOnAnimationChangeCallback } from './types'; | ||||||
import type { ColorAnimationOptions, TEasingFunction, TOnAnimationChangeCallback } from './types'; | ||||||
|
||||||
const defaultColorEasing: TEasingFunction = (timeElapsed, startValue, byValue, duration) => { | ||||||
const durationProgress = | ||||||
1 - Math.cos((timeElapsed / duration) * (halfPI)); | ||||||
return startValue + byValue * durationProgress; | ||||||
} | ||||||
|
||||||
const wrapColorCallback = <R>( | ||||||
callback?: TOnAnimationChangeCallback<string, R> | ||||||
) => | ||||||
callback && | ||||||
((rgba: TRGBAColorSource, valueRatio: number, durationRatio: number) => | ||||||
callback(new Color(rgba).toRgba(), valueRatio, durationRatio)); | ||||||
((rgba: TRGBAColorSource, valueProgress: number, durationProgress: number) => | ||||||
callback(new Color(rgba).toRgba(), valueProgress, durationProgress)); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I also think that the the color animation callbacks should pass a
Suggested change
|
||||||
|
||||||
export class ColorAnimation extends AnimationBase<TRGBAColorSource> { | ||||||
constructor({ | ||||||
startValue, | ||||||
endValue, | ||||||
byValue, | ||||||
easing = (timeElapsed, startValue, byValue, duration) => { | ||||||
const durationRatio = | ||||||
1 - Math.cos((timeElapsed / duration) * (Math.PI / 2)); | ||||||
return startValue + byValue * durationRatio; | ||||||
}, | ||||||
easing = defaultColorEasing, | ||||||
onChange, | ||||||
onComplete, | ||||||
abort, | ||||||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This line handled the key path dot notation using
key.split('.')
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i just moved it down, we need to execute it only if startValue is not passed.