YorkShen closed pull request #268: * [Doc] Update doc for animation.
URL: https://github.com/apache/incubator-weex-site/pull/268
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/source/cn/references/modules/animation.md
b/source/cn/references/modules/animation.md
index 368ed28b8..b7943b260 100644
--- a/source/cn/references/modules/animation.md
+++ b/source/cn/references/modules/animation.md
@@ -16,68 +16,68 @@ JS-Animation可以对组件执行一系列简单的变换 (位置、大小、旋
举个例子，如果有一个 `<image>` 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。
-> **注意：** 现在Weex只支持在JavaScript中使用动画, CSS 动画是和JavaScript
动画是不一样的。我们即将支持在CSS中使用动画。
+> **Note:** 如果需要使用CSS动画，参考
[transition](../../wiki/common-styles.html#property)。
+
## 基本用法
-### animation.transition(el, options, callback)
+### animation.transition(erf, options, callback)
```javascript
animation.transition(ref1, {
- styles: {
- backgroundColor: '#FF0000',
- transform: 'translate(250px, 100px)',
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
+ styles: {
+ backgroundColor: '#FF0000',
+ transform: 'translate(250px, 100px)',
+ },
+ duration: 800, //ms
+ timingFunction: 'ease',
+ needLayout:false,
+ delay: 0 //ms
+ }, function () {
+ modal.toast({ message: 'animation finished.' })
+ })
```
## 属性
-### `el `：
+### `ref `：
将要执行动画的元素。
-例如指定动画的元素 ``el`` 属性为 ``test`` , 可以通过调用 `this.refs.test` 来获取元素的引用。
+例如指定动画的元素 ``ref`` 属性为 ``test`` , 可以通过调用 `this.$refs.test` 来获取元素的引用。
### `options`：
- `styles`(object):设置不同样式过渡效果的键值对，下表列出了所有合法的参数：
-| 参数名 | 描述 | 值类型
| 默认值 |
-| --------------- | ---------------------------------------- | ---------------
| --------------- |
-| width | 动画执行后应用到组件上的宽度值 | length
| 无 |
-| height | 动画执行后应用到组件上的高度值 | length
| 无 |
-| backgroundColor | 动画执行后应用到组件上的背景颜色 | string
| none |
-| opacity | 动画执行后应用到组件上的不透明度值 | 介于 0 到 1 间的数值
| `1` |
-| transformOrigin | 定义变化过程的中心点. 参数 `x-aris` 可能的值为
`left`、`center`、`right`、长度值或百分比值, 参数 `y-axis` 可能的值为
`top`、`center`、`bottom`、长度值或百分比值 | `x-axis y-axis` | `center center` |
-| transform | 定义应用在元素上的变换类型，支持下表列出的属性 | object
| 无 |
-
-`transform`同时也有很多对应的属性，可以参见下表：
-
-(注:如果想同时执行多个动画只需要用空格隔开，比如)
-```
- transform: 'translate(250px, 100px) scale(1.5)'
-```
-
-
-| 名称 | 描述 |
值类型 | 默认值 |
-| ---------------------------------------- | ------------------------------- |
------- | ---- |
-| `translate`/`translateX`/`translateY` | 指定元素要移动到的位置 |
像素值或百分比 | 无 |
-| `rotate` | 指定元素将被旋转的角度，单位是度 |
number | 无 |
-| `scale`/`scaleX`/`scaleY` | 按比例放大或缩小元素 |
number | 无 |
-| `rotate`/`rotateX` <span class="api-version">v0.14+</span> /`rotateY` <span
class="api-version">v0.14+</span> | 指定元素将被旋转的角度，单位是度 | number |
无 |
-| `perspective` <span class="api-version">v0.16+</span> |
观察者距离z=0平面的距离，在Android 4.1及以上有效 | number | 正无穷 |
-
-* `duration `(number)：指定动画的持续时间 (单位是毫秒)，默认值是 `0`，表示没有动画效果。
+ | 参数名 | 描述 | 值类型 |
默认值 |
+ | --------------- | ---------------------------------------- | ---------- |
--------------- |
+ | width | 动画执行后应用到组件上的宽度值。设置为 `needLayout` `true` 如果你需要影响布局。
| length | computed width |
+ | height | 动画执行后应用到组件上的高度值。设置为 `needLayout` `true` 如果你需要影响布局。
| length | computed height |
+ | backgroundColor | 动画执行后应用到组件上的背景颜色 | string
| computed backgroundColor |
+ | opacity | 动画执行后应用到组件上的不透明度值 | computed
opacity | `1` |
+ | transformOrigin | 定义变化过程的中心点. 参数 `x-aris` 可能的值为
`left`、`center`、`right`、长度值或百分比值, 参数 `y-axis` 可能的值为
`top`、`center`、`bottom`、长度值或百分比值 | `x-axis y-axis` | `center center` |
+ | transform | 变换类型，可能包含rotate`, `translate`, `scale`及其他属性。| object| 无 |
+
+ * `transform`支持的字段如下：
+
+ | 名称 | 描述
| 值类型 | 默认值 |
+ | ---------------------------------------- |
------------------------------- | ------- | ---- |
+ | `translate`/`translateX`/`translateY` | 指定元素要移动到的位置
| 像素值或百分比 | 0 |
+ | `rotate` | 指定元素将被旋转的角度，单位是度
| number | 0 |
+ | `scale`/`scaleX`/`scaleY` | 按比例放大或缩小元素
| number | 1 |
+ | `rotate`/`rotateX` <span class="api-version">v0.14+</span> /`rotateY`
<span class="api-version">v0.14+</span> | 指定元素将被旋转的角度，单位是度 |
number | 无 |
+ | `perspective` <span class="api-version">v0.16+</span> |
观察者距离z=0平面的距离，在Android 4.1及以上有效 | number | 正无穷 |
+
+ > (注:如果想同时执行多个动画只需要用空格隔开，比如)
+ ```
+ transform: 'translate(250px, 100px) scale(1.5)'
+ ```
+
+* `duration `(number)：指定动画的持续时间 (单位是毫秒)，默认值是 `0`，表示瞬间达到动画结束状态。
* `delay ` (number)：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 `0`，表示没有延迟，在请求后立即执行动画。
-* `needLayout` (boolean)：节点动画执行时是否产生布局动画即LayoutAnimation，默认值是false。
-* `timingFunction ` (string)：描述动画执行的速度曲线，用于使动画变化更为平滑。默认值是
`linear`，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
+* `needLayout` (boolean)：动画执行是否影响布局，默认值是false。
+* `timingFunction ` (string)：描述动画执行的速度曲线，用于描述动画已消耗时间和动画完成进度间的映射关系。默认值是
`linear`，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
| 属性名 | 描述 |
| ------------------------------ | ---------------------------------------- |
@@ -91,7 +91,9 @@ animation.transition(ref1, {
### `callback `
`callback`是动画执行完毕之后的回调函数。在iOS平台上，你可以获取动画执行是否成功的信息。
- > **注意:
在0.16.0+版本后，iOS上可以获取animation是否执行成功的信息，callback中的`result`参数会有两种，分别是是`Success`与`Fail`，Android目前暂不支持。**
+ > **注意: 在0.16.0+版本后，iOS上可以获取 animation
是否执行成功的信息，callback中的`result`参数会有两种，分别是是`Success`与`Fail`。**
+
+ > **注意: Android 的callback 函数不支持result参数**
## 示例
[animation demo](http://dotwe.org/vue/a6c03edd4c5bbd6caea29cac688269a0)
diff --git a/source/references/modules/animation.md
b/source/references/modules/animation.md
index c0a69f54d..e7a96c1ad 100644
--- a/source/references/modules/animation.md
+++ b/source/references/modules/animation.md
@@ -15,76 +15,78 @@ JS-Animation can perform a series of simple transformations
(position, size, ro
For example, if you have a `image` component, you can move, rotate, grow, or
shrink it by animation.
-> **Note:** Now,Weex only support use animation in Javascript. CSS Animation
is different from this,we will soon support CSS Animation.
+> **Note:** Ref [transition](../../wiki/common-styles.html#property) if you
want to use CSS animation.
## Basic Usage
-### animation.transition(el, options, callback)
+### animation.transition(ref, options, callback)
```javascript
-animation.transition(ref1, {
- styles: {
- backgroundColor: '#FF0000',
- transform: 'translate(250px, 100px)',
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
+animation.transition(test, {
+ styles: {
+ backgroundColor: '#FF0000',
+ transform: 'translate(250px, 100px)',
+ },
+ duration: 800, //ms
+ timingFunction: 'ease',
+ needLayout:false,
+ delay: 0 //ms
+ }, function () {
+ modal.toast({ message: 'animation finished.' })
+ })
```
## Attributes
-### ``el``
+### ``ref``
-An element that will be animated.
+The element that will be animated.
-For example , specify the `el` attribute for the element you want to animated
as `element`, so you can get this element by calling `this.refs.element`.
+For example, if the value of `ref` for an element is `test`, you can start an
animation with `this.$refs.test`.
### ``options``
-- `styles` (object): Specify the names and values of styles to which a
transition effect should be applied. The allowed attributes are listed in the
following table:
-
-| name | description | value type
| default value |
-| :-------------- | :--------------------------------------- |
:-------------------- | :-------------- |
-| width | The width applied to the component after the animation
finished. | length | none |
-| height | The height applied to the component after the animation
finished. | length | none |
-| 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`` 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 |
-
-- `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). |
+- `styles` (object): Specify the names and values of styles to which a
transition effect should be applied. The supported styles are listed in the
following table:
+
+ | name | description | value type
| default value |
+ | :-------------- | :--------------------------------------- |
:-------------------- | :-------------- |
+ | width | The width applied to the component after the animation
finished. Set `needLayout` to true if you want the change to be persistence. |
length | computed width |
+ | height | The height applied to the component after the animation
finished. Set `needLayout` to true if you want the change to be persistence. |
length | computed height |
+ | backgroundColor | The background color applied to the component after the
animation finished. | string | computed backgroundColor
|
+ | opacity | The opacity applied to the component after the animation
finished. | number between 0 to 1 | computed opacity |
+ | transformOrigin | The pivot 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 object, which may include `rotate`,
`translate`, `scale` and etc. | object | none |
+
+ * The following table illustrate the detail of ``transform``.
+
+ | name | description
| value type | default value |
+ | :--------------------------------------- |
:--------------------------------------- | :--------------- | :----------------
|
+ | translate/translateX/translateY | Specifies the location which
the element will be translated to. | pixel or percent | 0 |
+ | 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 | 0 |
+ | perspective <span class="api-version">v0.16+</span> | 3D perspective.
The distance between the z=0 plane and the user. Supported for **Android 4.1**
and above. | number | positive infinity |
+ | scale/scaleX/scaleY | Stretch or shrink the
element. | number | 1 |
+
+- `duration` (number): Specify the duration of animation execution, the
default value is `0`, meaning that the component get the desired property
immediately.
+- `delay` (number): Specify the waiting time before the animation starts. The
default value is `0`.
+- `needLayout`(boolean)：Whether the change to layout(width/height/etc..) is
persistence and takes affect after the animation. Default value is `false`
+- `timingFunction` (string): Used to describe how the intermediate values are
calculated for the CSS properties being affected by the animation effect.
default value is `linear`, the supported values 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). |
### ``callback``
-Callback which is a function called after the completion of animation. In iOS
platform, you can use function to get animation processing's information.
+Callback is a function called after the completion of animation. In iOS
platform, you can use function to get information of animation execution.
>**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.**
+> **Note: Android doesn't support the result parameter.**
+
### Example
- [animation demo](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
