This is an automated email from the ASF dual-hosted git repository. kyork pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/master by this push: new d5b3085 * [Doc] Update doc for animation. (#268) d5b3085 is described below commit d5b3085d25672cc8676409a259edcf8e6e04bde1 Author: YorkShen <shenyua...@gmail.com> AuthorDate: Tue Dec 25 16:23:59 2018 +0800 * [Doc] Update doc for animation. (#268) --- source/cn/references/modules/animation.md | 90 +++++++++++++------------- source/references/modules/animation.md | 104 +++++++++++++++--------------- 2 files changed, 99 insertions(+), 95 deletions(-) diff --git a/source/cn/references/modules/animation.md b/source/cn/references/modules/animation.md index 368ed28..b7943b2 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 c0a69f5..e7a96c1 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)