You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by doumafang <gi...@git.apache.org> on 2017/10/27 04:02:10 UTC
[GitHub] incubator-weex-site pull request #5: [WEEX-86][doc] Update animation module'...
GitHub user doumafang opened a pull request:
https://github.com/apache/incubator-weex-site/pull/5
[WEEX-86][doc] Update animation module's document.
Add more details about animation.
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/doumafang/incubator-weex-site doc-animation
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/incubator-weex-site/pull/5.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #5
----
commit cdf9c195c3330546702dae253001aba90058947e
Author: doumafang <do...@gmail.com>
Date: 2017-10-27T04:01:23Z
[WEEX-86][doc] Update animation module's document.
----
---
[GitHub] incubator-weex-site pull request #5: [WEEX-86][doc] Update animation module'...
Posted by cxfeng1 <gi...@git.apache.org>.
Github user cxfeng1 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/5#discussion_r157439670
--- Diff: source/references/modules/animation.md ---
@@ -47,62 +55,36 @@ Smooth and meaningful animation is very effective for enhancing the user experie
| backgroundColor | The background color applied to the component after the animation finished. | string | none |
| opacity | The opacity applied to the component after the animation finished. | number between 0 to 1 | `1` |
| transformOrigin | The povit of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent | `x-axis y-axis` | `center center` |
-| transform | Transform function to be applied to the element. The properties in the following table are supported | object | none |
+| **transform** | Transform function to be applied to the element. The properties in the following table are supported | object | none |
-properties of `transform`:
+``transform`` also have many parameters,please see the table below.
-| name | description | value type | default value |
-| :------------------------------ | :--------------------------------------- | :--------------- | :------------ |
-| translate/translateX/translateY | Specifies the location of which the element will be translated to. | pixel or percent | none |
-| rotate/rotateX <span class="api-version">v0.14+</span> /rotateY <span class="api-version">v0.14+</span> |Specifies the angle of which the element will be rotated, the unit is degree.|number|none|
-| perspective <span class="api-version">v0.16+</span> | The distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Supported for Android 4.1 and above. | number | positive infinity
-| scale/scaleX/scaleY | Stretch or shrink the element. | number | none |
+| name | description | value type | default value |
+| :--------------------------------------- | :--------------------------------------- | :--------------- | :---------------- |
+| translate/translateX/translateY | Specifies the location of which the element will be translated to. | pixel or percent | none |
+| rotate/rotateX <span class="api-version">v0.14+</span> /rotateY <span class="api-version">v0.14+</span> | Specifies the angle of which the element will be rotated, the unit is degree. | number | none |
+| perspective <span class="api-version">v0.16+</span> | The distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Supported for Android 4.1 and above. | number | positive infinity |
+| scale/scaleX/scaleY | Stretch or shrink the element. | number | none |
-- `callback`(function): Callback which is called after the completion of transition.**NOTISE, after WeexSDK0.16.0, in iOS platform can get animation's message about completion, there are two types of parameters with `result`, is `Success`and `Fail`, Android can not support until now.**
+- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur.
+- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`.
+- `needLayout`(boolean)：Whether or not the layout animation occurs when animation is executed，default value is `false`
+- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table:
+| name | description |
+| :----------------------------- | :--------------------------------------- |
+| `linear` | Specifies a transition effect with the same speed from start to end |
+| `ease` | Specifies a transition effect with a slower and slower speed |
+| `ease-in` | Specifies a transition effect with a slow start |
+| `ease-out` | Specifies a transition effect with a slow end |
+| `ease-in-out` | Specifies a transition effect with a slow start and end |
+| `cubic-bezier(x1, y1, x2, y2)` | Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-### Example
+### ``callback``
-```html
-<template>
- <div class="wrapper">
- <div ref="test" @click="move" class="box"></div>
- </div>
-</template>
-
-<script>
- const animation = weex.requireModule('animation')
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- move () {
- var testEl = this.$refs.test;
- animation.transition(testEl, {
- styles: {
- color: '#FF0000',
- transform: 'translate(250px, 100px)',
- transformOrigin: 'center center'
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- width: 250px;
- height: 250px;
- background-color: #DDD;
- }
-</style>
-```
+Callback which is a function called after the completion of animation. In iOS platform, you can use function to get animation processing's information.
--- End diff --
What do you mean by saying get animation processing's information, is there any code examples ?
---
[GitHub] incubator-weex-site pull request #5: [WEEX-86][doc] Update animation module'...
Posted by asfgit <gi...@git.apache.org>.
Github user asfgit closed the pull request at:
https://github.com/apache/incubator-weex-site/pull/5
---
[GitHub] incubator-weex-site pull request #5: [WEEX-86][doc] Update animation module'...
Posted by cxfeng1 <gi...@git.apache.org>.
Github user cxfeng1 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/5#discussion_r157439218
--- Diff: source/references/modules/animation.md ---
@@ -47,62 +55,36 @@ Smooth and meaningful animation is very effective for enhancing the user experie
| backgroundColor | The background color applied to the component after the animation finished. | string | none |
| opacity | The opacity applied to the component after the animation finished. | number between 0 to 1 | `1` |
| transformOrigin | The povit of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent | `x-axis y-axis` | `center center` |
-| transform | Transform function to be applied to the element. The properties in the following table are supported | object | none |
+| **transform** | Transform function to be applied to the element. The properties in the following table are supported | object | none |
-properties of `transform`:
+``transform`` also have many parameters,please see the table below.
-| name | description | value type | default value |
-| :------------------------------ | :--------------------------------------- | :--------------- | :------------ |
-| translate/translateX/translateY | Specifies the location of which the element will be translated to. | pixel or percent | none |
-| rotate/rotateX <span class="api-version">v0.14+</span> /rotateY <span class="api-version">v0.14+</span> |Specifies the angle of which the element will be rotated, the unit is degree.|number|none|
-| perspective <span class="api-version">v0.16+</span> | The distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Supported for Android 4.1 and above. | number | positive infinity
-| scale/scaleX/scaleY | Stretch or shrink the element. | number | none |
+| name | description | value type | default value |
+| :--------------------------------------- | :--------------------------------------- | :--------------- | :---------------- |
+| translate/translateX/translateY | Specifies the location of which the element will be translated to. | pixel or percent | none |
+| rotate/rotateX <span class="api-version">v0.14+</span> /rotateY <span class="api-version">v0.14+</span> | Specifies the angle of which the element will be rotated, the unit is degree. | number | none |
+| perspective <span class="api-version">v0.16+</span> | The distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Supported for Android 4.1 and above. | number | positive infinity |
+| scale/scaleX/scaleY | Stretch or shrink the element. | number | none |
-- `callback`(function): Callback which is called after the completion of transition.**NOTISE, after WeexSDK0.16.0, in iOS platform can get animation's message about completion, there are two types of parameters with `result`, is `Success`and `Fail`, Android can not support until now.**
+- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur.
+- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`.
+- `needLayout`(boolean)：Whether or not the layout animation occurs when animation is executed，default value is `false`
+- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table:
+| name | description |
+| :----------------------------- | :--------------------------------------- |
+| `linear` | Specifies a transition effect with the same speed from start to end |
+| `ease` | Specifies a transition effect with a slower and slower speed |
+| `ease-in` | Specifies a transition effect with a slow start |
+| `ease-out` | Specifies a transition effect with a slow end |
+| `ease-in-out` | Specifies a transition effect with a slow start and end |
+| `cubic-bezier(x1, y1, x2, y2)` | Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-### Example
+### ``callback``
-```html
-<template>
- <div class="wrapper">
- <div ref="test" @click="move" class="box"></div>
- </div>
-</template>
-
-<script>
- const animation = weex.requireModule('animation')
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- move () {
- var testEl = this.$refs.test;
- animation.transition(testEl, {
- styles: {
- color: '#FF0000',
- transform: 'translate(250px, 100px)',
- transformOrigin: 'center center'
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- width: 250px;
- height: 250px;
- background-color: #DDD;
- }
-</style>
-```
+Callback which is a function called after the completion of animation. In iOS platform, you can use function to get animation processing's information.
-[try it](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
+>**Note: after WeexSDK0.16.0, in iOS platform can get animation's message about completion, there are two types of parameters with `result`, is `Success`and `Fail`, Android can not support until now.**
+
+### Example
+- [animation demo](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
--- End diff --
Please give more examples!
---