You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/12/15 09:03:09 UTC
[GitHub] [echarts] pissang opened a new pull request #16225: introduce new keyframe based animation to graphic component and custom series
pissang opened a new pull request #16225:
URL: https://github.com/apache/echarts/pull/16225
<!-- Please fill in the following information to help us review your PR more efficiently. -->
## Brief Information
This pull request is in the type of:
- [ ] bug fixing
- [x] new feature
- [ ] others
### What does this PR do?
TBD
## Misc
<!-- ADD RELATED ISSUE ID WHEN APPLICABLE -->
- [x] The API has been changed (apache/echarts-doc#xxx).
- [x] This PR depends on ZRender changes (ecomfe/zrender#xxx).
### Related test cases or examples to use the new APIs
TBD
## Others
### Merging options
- [ ] Please squash the commits into a single one when merging.
### Other information
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
plainheart commented on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-997793742
Seems the unit test didn't pass for some type errors.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#discussion_r771218134
##########
File path: src/animation/customGraphicKeyframeAnimation.ts
##########
@@ -0,0 +1,161 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { AnimationEasing } from 'zrender/src/animation/easing';
+import Element from 'zrender/src/Element';
+import { keys, filter, each, isArray } from 'zrender/src/core/util';
+import { ELEMENT_ANIMATABLE_PROPS } from './customGraphicTransition';
+import { AnimationOption, AnimationOptionMixin, Dictionary } from '../util/types';
+import { Model } from '../echarts.all';
+import { getAnimationConfig } from './basicTrasition';
+import { warn } from '../util/log';
+import { makeInner } from '../util/model';
+
+// Helpers for creating keyframe based animations in custom series and graphic components.
+
+type AnimationKeyframe<T extends Record<string, any>> = T & {
+ easing?: AnimationEasing
+ percent?: number // 0 - 1
+};
+
+type StateToRestore = Dictionary<any>;
+const getStateToRestore = makeInner<StateToRestore, Element>();
+
+export interface ElementKeyframeAnimationOption<Props extends Record<string, any>> extends AnimationOption {
+ // Animation configuration for keyframe based animation.
+ loop?: boolean
+ keyframes?: AnimationKeyframe<Props>[]
+}
+
+/**
+ * Stopped previous keyframe animation and restore the attributes.
+ * Avoid new keyframe animation starts with wrong internal state when the percent: 0 is not set.
+ */
+export function stopPreviousKeyframeAnimationAndRestore(el: Element) {
+ // Stop previous keyframe animation.
+ el.stopAnimation('keyframe');
+ // Restore
+ el.attr(getStateToRestore(el));
+}
+
+export function applyKeyframeAnimation<T extends Record<string, any>>(
+ el: Element,
+ animationOpts: ElementKeyframeAnimationOption<T> | ElementKeyframeAnimationOption<T>[],
+ animatableModel: Model<AnimationOptionMixin>
+) {
+ if (!animatableModel.isAnimationEnabled() || !animationOpts) {
+ return;
+ }
+
+ if (isArray(animationOpts)) {
+ each(animationOpts, singleAnimationOpts => {
+ applyKeyframeAnimation(el, singleAnimationOpts, animatableModel);
+ });
+ return;
+ }
+
+ const keyframes = animationOpts.keyframes;
+ let duration = animationOpts.duration;
+
+ if (animatableModel && duration == null) {
+ const config = getAnimationConfig('enter', animatableModel, 0);
+ duration = config && config.duration;
+ }
+
+ if (!keyframes || !duration) {
+ return;
+ }
+
+ const stateToRestore: StateToRestore = getStateToRestore(el);
+
+ each(ELEMENT_ANIMATABLE_PROPS, (targetPropName) => {
+ if (targetPropName && !(el as any)[targetPropName]) {
+ return;
+ }
+
+ let animator: ReturnType<Element['animate']>;
+ let endFrameIsSet = false;
+
+ // Sort keyframes by percent.
+ keyframes.sort((a, b) => a.percent - b.percent);
+
+ each(keyframes, kf => {
+ // Stop current animation.
+ const animators = el.animators;
+ const kfValues = targetPropName ? kf[targetPropName] : kf;
+
+ if (__DEV__) {
+ if (kf.percent >= 1) {
+ endFrameIsSet = true;
+ }
+ }
+
+ if (!kfValues) {
+ return;
+ }
+
+ let propKeys = keys(kfValues);
+ if (!targetPropName) {
+ // PENDING performance?
+ propKeys = filter(
+ propKeys, key => key !== 'percent' && key !== 'easing'
+ && key !== 'shape' && key !== 'style' && key !== 'extra'
+ );
Review comment:
It's better to use `include`?
```ts
!['percent', 'easing', 'shape', 'style', 'extra'].include(key)
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on a change in pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#discussion_r771333272
##########
File path: src/animation/customGraphicKeyframeAnimation.ts
##########
@@ -0,0 +1,161 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { AnimationEasing } from 'zrender/src/animation/easing';
+import Element from 'zrender/src/Element';
+import { keys, filter, each, isArray } from 'zrender/src/core/util';
+import { ELEMENT_ANIMATABLE_PROPS } from './customGraphicTransition';
+import { AnimationOption, AnimationOptionMixin, Dictionary } from '../util/types';
+import { Model } from '../echarts.all';
+import { getAnimationConfig } from './basicTrasition';
+import { warn } from '../util/log';
+import { makeInner } from '../util/model';
+
+// Helpers for creating keyframe based animations in custom series and graphic components.
+
+type AnimationKeyframe<T extends Record<string, any>> = T & {
+ easing?: AnimationEasing
+ percent?: number // 0 - 1
+};
+
+type StateToRestore = Dictionary<any>;
+const getStateToRestore = makeInner<StateToRestore, Element>();
+
+export interface ElementKeyframeAnimationOption<Props extends Record<string, any>> extends AnimationOption {
+ // Animation configuration for keyframe based animation.
+ loop?: boolean
+ keyframes?: AnimationKeyframe<Props>[]
+}
+
+/**
+ * Stopped previous keyframe animation and restore the attributes.
Review comment:
Fixed
##########
File path: src/animation/customGraphicKeyframeAnimation.ts
##########
@@ -0,0 +1,161 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { AnimationEasing } from 'zrender/src/animation/easing';
+import Element from 'zrender/src/Element';
+import { keys, filter, each, isArray } from 'zrender/src/core/util';
+import { ELEMENT_ANIMATABLE_PROPS } from './customGraphicTransition';
+import { AnimationOption, AnimationOptionMixin, Dictionary } from '../util/types';
+import { Model } from '../echarts.all';
+import { getAnimationConfig } from './basicTrasition';
+import { warn } from '../util/log';
+import { makeInner } from '../util/model';
+
+// Helpers for creating keyframe based animations in custom series and graphic components.
+
+type AnimationKeyframe<T extends Record<string, any>> = T & {
+ easing?: AnimationEasing
+ percent?: number // 0 - 1
+};
+
+type StateToRestore = Dictionary<any>;
+const getStateToRestore = makeInner<StateToRestore, Element>();
+
+export interface ElementKeyframeAnimationOption<Props extends Record<string, any>> extends AnimationOption {
+ // Animation configuration for keyframe based animation.
+ loop?: boolean
+ keyframes?: AnimationKeyframe<Props>[]
+}
+
+/**
+ * Stopped previous keyframe animation and restore the attributes.
+ * Avoid new keyframe animation starts with wrong internal state when the percent: 0 is not set.
+ */
+export function stopPreviousKeyframeAnimationAndRestore(el: Element) {
+ // Stop previous keyframe animation.
+ el.stopAnimation('keyframe');
+ // Restore
+ el.attr(getStateToRestore(el));
+}
+
+export function applyKeyframeAnimation<T extends Record<string, any>>(
+ el: Element,
+ animationOpts: ElementKeyframeAnimationOption<T> | ElementKeyframeAnimationOption<T>[],
+ animatableModel: Model<AnimationOptionMixin>
+) {
+ if (!animatableModel.isAnimationEnabled() || !animationOpts) {
+ return;
+ }
+
+ if (isArray(animationOpts)) {
+ each(animationOpts, singleAnimationOpts => {
+ applyKeyframeAnimation(el, singleAnimationOpts, animatableModel);
+ });
+ return;
+ }
+
+ const keyframes = animationOpts.keyframes;
+ let duration = animationOpts.duration;
+
+ if (animatableModel && duration == null) {
+ const config = getAnimationConfig('enter', animatableModel, 0);
+ duration = config && config.duration;
+ }
+
+ if (!keyframes || !duration) {
+ return;
+ }
+
+ const stateToRestore: StateToRestore = getStateToRestore(el);
+
+ each(ELEMENT_ANIMATABLE_PROPS, (targetPropName) => {
+ if (targetPropName && !(el as any)[targetPropName]) {
+ return;
+ }
+
+ let animator: ReturnType<Element['animate']>;
+ let endFrameIsSet = false;
+
+ // Sort keyframes by percent.
+ keyframes.sort((a, b) => a.percent - b.percent);
+
+ each(keyframes, kf => {
+ // Stop current animation.
+ const animators = el.animators;
+ const kfValues = targetPropName ? kf[targetPropName] : kf;
+
+ if (__DEV__) {
+ if (kf.percent >= 1) {
+ endFrameIsSet = true;
+ }
+ }
+
+ if (!kfValues) {
+ return;
+ }
+
+ let propKeys = keys(kfValues);
+ if (!targetPropName) {
+ // PENDING performance?
+ propKeys = filter(
+ propKeys, key => key !== 'percent' && key !== 'easing'
+ && key !== 'shape' && key !== 'style' && key !== 'extra'
+ );
Review comment:
Thanks for the suggestion. Changed to using `indexOf` to check if key is included. `includes` is not supported in IE. Which we haven't dropped officialy yet.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
pissang commented on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-999307188
@plainheart Improved it a bit in the PR https://github.com/ecomfe/zrender/pull/859. Now the behavior is:
https://user-images.githubusercontent.com/841551/147042848-f2e7d60e-66a5-4cdf-a0a9-616bba0057c0.mov
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang edited a comment on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-998499964
@plainheart Seems it's because keyframe animation is conflicted to the state animation.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] Ovilia commented on a change in pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
Ovilia commented on a change in pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#discussion_r771204073
##########
File path: src/animation/customGraphicKeyframeAnimation.ts
##########
@@ -0,0 +1,161 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { AnimationEasing } from 'zrender/src/animation/easing';
+import Element from 'zrender/src/Element';
+import { keys, filter, each, isArray } from 'zrender/src/core/util';
+import { ELEMENT_ANIMATABLE_PROPS } from './customGraphicTransition';
+import { AnimationOption, AnimationOptionMixin, Dictionary } from '../util/types';
+import { Model } from '../echarts.all';
+import { getAnimationConfig } from './basicTrasition';
+import { warn } from '../util/log';
+import { makeInner } from '../util/model';
+
+// Helpers for creating keyframe based animations in custom series and graphic components.
+
+type AnimationKeyframe<T extends Record<string, any>> = T & {
+ easing?: AnimationEasing
+ percent?: number // 0 - 1
+};
+
+type StateToRestore = Dictionary<any>;
+const getStateToRestore = makeInner<StateToRestore, Element>();
+
+export interface ElementKeyframeAnimationOption<Props extends Record<string, any>> extends AnimationOption {
+ // Animation configuration for keyframe based animation.
+ loop?: boolean
+ keyframes?: AnimationKeyframe<Props>[]
+}
+
+/**
+ * Stopped previous keyframe animation and restore the attributes.
Review comment:
`Stopped ... animation` should be `Stop ... animations`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
pissang commented on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-998413648
UT is fixed
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-994531633
Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout [the coding standard](https://echarts.apache.org/en/coding-standard.html) and Wiki about [How to make a pull request](https://github.com/apache/echarts/wiki/How-to-make-a-pull-request).
The pull request is marked to be `PR: author is committer` because you are a committer of this project.
Document changes are required in this PR. Please also make a PR to [apache/echarts-doc](https://github.com/apache/echarts-doc) for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the `PR: awaiting doc` label.
This PR depends on [ZRender](https://github.com/ecomfe/zrender) changes. Please update the ZRender dependency to the latest nightly version including this change, which takes place everyday at 8:00 UTC (16:00 Beijing Time).
You can use `npm i zrender@npm:zrender-nightly@dev` to update package.json.
If you have any question about this, please leave a comment and we will give you extra help on this.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-1000036160
Congratulations! Your PR has been merged. Thanks for your contribution! 👍
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang merged pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
pissang merged pull request #16225:
URL: https://github.com/apache/echarts/pull/16225
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
plainheart commented on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-998492571
I noticed the strange behavior when hovering on the animated marker. Is there anything wrong?
<img src="https://user-images.githubusercontent.com/26999792/146878166-4220c82a-f581-4b86-91fb-712c29e61afa.gif" width="400">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on pull request #16225: introduce new keyframe based animation to graphic component and custom series
Posted by GitBox <gi...@apache.org>.
pissang commented on pull request #16225:
URL: https://github.com/apache/echarts/pull/16225#issuecomment-998499964
@plainheart Seems it's because keyframe animation is conflicted to the hover animation.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org