feat(hippy-react,hippy-vue): support color animation

ava.config.js

@@ -19,9 +19,9 @@ export default {
     'packages/**/*.js',
   ],
   require: [
-    'esm',                          // Use ES modules in NodeJS.
-    'module-alias/register',        // Use _moduleDirectories defined package.json
-    './scripts/flow-remove-types',  // Remove flow definition from Vue.
-    './scripts/mock-global',        // Define the global
+    'esm', // Use ES modules in NodeJS.
+    'module-alias/register', // Use _moduleDirectories defined package.json
+    './scripts/flow-remove-types', // Remove flow definition from Vue.
+    './scripts/mock-global', // Define the global
   ],
 };

docs/hippy-react/components.md

@@ -95,8 +95,8 @@ import icon from './qb_icon_new.png';
 | preloadItemNumber     | 指定当列表滚动至倒数第几行时触发 `onEndReached` 回调。 | `number` | `ALL` |
 | onAppear     | 当有`ListViewItem`滑动进入屏幕时（曝光）触发，入参返回曝光的`ListViewItem`对应索引值。 | `(index) => any` | `ALL` |
 | onDisappear     | 当有`ListViewItem`滑动离开屏幕时触发，入参返回离开的`ListViewItem`对应索引值。 | `(index) => any` | `ALL` |
-| onWillAppear     | 当有`ListViewItem`至少一个像素进入屏幕时（曝光）触发，入参返回曝光的`ListViewItem`对应索引值。 | `(index) => any` | `ALL` |
-| onWillDisappear     | 当有`ListViewItem`至少一个像素滑动离开屏幕时触发，入参返回离开的`ListViewItem`对应索引值。 | `(index) => any` | `ALL` |
+| onWillAppear     | 当有`ListViewItem`至少一个像素进入屏幕时（曝光）触发，入参返回曝光的`ListViewItem`对应索引值。 `最低支持版本2.3.0` | `(index) => any` | `ALL` |
+| onWillDisappear     | 当有`ListViewItem`至少一个像素滑动离开屏幕时触发，入参返回离开的`ListViewItem`对应索引值。 `最低支持版本2.3.0`| `(index) => any` | `ALL` |
 | onEndReached          | 当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 `onEndReached` 回调。 | `Function`                                                  | `ALL`    |
 | onMomentumScrollBegin | 在 `ListView` 开始滑动的时候调起                           | `Function`                                                  | `ALL`    |
 | onMomentumScrollEnd   | 在 `ListView` 结束滑动的时候调起                           | `Function`                                                  | `ALL`    |
@@ -130,7 +130,7 @@ import icon from './qb_icon_new.png';
 
 ### collapsePullHeader
 
-`() => void` 收起刷新条PullHeader。当设置了`renderPullHeader`后，每当下拉刷新结束需要主动调用该方法结束。
+`() => void` 收起刷新条 PullHeader。当设置了`renderPullHeader`后，每当下拉刷新结束需要主动调用该方法收回 PullHeader。
 
 # Modal
 

docs/hippy-react/modules.md

@@ -5,7 +5,7 @@
 
 # Animation
 
-[[Animation 范例]](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation)
+[[Animation 范例]](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation/index.jsx)
 
 `Animation` 是 Hippy 提供的动画组件，可以支持传入动画配置，以及手动控制开始与结束。在 Hippy 上实现一个动画分为三个步骤：
 
@@ -21,16 +21,17 @@
 | -------------- | -------------------- | ---- | ------ | ------------------------------------------------------------ |
 | mode           | `string`             | 是   | timing | 动画时间轴模式                                               |
 | delay          | `number`             | 是   | -      | 动画延迟开始的时间，单位为毫秒，默认为 0，即动画start之后立即执行；指定列表的行数，一般直接传入数据源条数 `length` 即可 |
-| startValue     | `number`, `Animation` | 是   | -      | 动画开始时的值，可为 Number 类型或一个 Animation 的对象，如果指定为一个 Animation 时，代表本动画的初始值为其指定的动画结束或中途 cancel 后的所处的动画值（这种场景通常用于 AnimationSet 中实现多个连续变化的动画）； |
-| toValue        | `number`             | 是   | -      | 动画结束时候的值                                             |
-| valueType*      | `number`, `string`    | 否   | null   | 动画的开始和结束值的单位类型，默认为空，代表动画起止的单位是普通Number，单位pt。 PS: Web平台此接口只支持number类型传参 |
+| startValue     | `number`, `Animation`, `string` | 是   | -      | 动画开始时的值，可为 Number 类型 String 类型，或一个 Animation 的对象，如果指定为一个 Animation 时，代表本动画的初始值为其指定的动画结束或中途 cancel 后的所处的动画值（这种场景通常用于 AnimationSet 中实现多个连续变化的动画）；如果为颜色值参考 [color](style/color.md)  |
+| toValue        | `number`, `string`             | 是   | -      | 动画结束时候的值；如果为颜色值参考 [color](style/color.md)                                             |
+| valueType*      | `number`, `string`    | 否   | null   | 动画的开始和结束值的类型，默认为空，代表动画起止的单位是普通Number。 PS: Web平台此接口只支持number类型传参 |
 | duration       | `number`             | 否   | -      | 动画时长，单位为毫秒(ms)                                     |
 | timingFunction* | `string`             | 否   | linear | 动画插值器类型                                               |
 | repeatCount    | `number`, `loop`             | 否   | -      | 动画的重复次数，默认为0，即只播放一次，为"loop"时代表无限循环播放； repeatCount 设为 n 时，则动画会播放 n 次 |
 
 * valueType 的参数选项：
   * `rad`：代表动画参数的起止值为弧度；
   * `deg`：代表动画参数的起止值为度数；
+  * `color`：代表动画参数的起止值为颜色值，可修饰背景色 `backgroundColor` 和文字颜色 `color`(仅Android支持)，参考 [例子](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation/index.jsx) `最低支持版本2.6.0`
 
 * timingFunction 的参数选项：
   * `linear`：使用线性插值器，动画将匀速进行；

docs/hippy-vue/components.md

@@ -280,8 +280,8 @@ ul 的子节点，终端层节点回收和复用的最小颗粒度。
 | sticky       | 对应的item是否需要使用悬停效果（滚动到顶部时，会悬停在List顶部，不会滚出屏幕） | `boolean`                                | `ALL`
 | appear       | 当有`li`节点滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。 | `(index) => any` | `ALL` |
 | disappear       | 当有`li`节点滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。 | `(index) => any` | `ALL` |
-| willAppear       | 当有`li`节点至少一个像素滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。 | `(index) => any` | `ALL` |
-| willDisappear       | 当有`li`节点至少一个像素滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。 | `(index) => any` | `ALL` |
+| willAppear       | 当有`li`节点至少一个像素滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。`最低支持版本2.3.0` | `(index) => any` | `ALL` |
+| willDisappear       | 当有`li`节点至少一个像素滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。`最低支持版本2.3.0` | `(index) => any` | `ALL` |
 
 # p
 

docs/hippy-vue/external-components.md

@@ -20,12 +20,17 @@
 | actions*        | 动画方案，其实是一个样式值跟上它的动画方案，详情请参考范例。 | Object                                | `ALL`    |
 
 * actions 详解
-
-和 React 不同，它将单个动画 Animation 和动画序列 AnimationSet 合二为一了，其实方法特别简单，发现是个对象就是 Animation，如果是个数组就是动画序列就用 AnimationSet 处理，单个动画参数具体参考 [Animation 模块](../hippy-react/modules.md?id=animation)，和[范例](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/native-demos/animations)。
-
-需要说明 hippy-vue 的动画参数有一些[默认值](https://github.com/Tencent/Hippy/blob/master/packages/hippy-vue-native-components/src/animation.js#L4)，只有差异部分才需要填写。
-
-actions更改时，会自动新建动画。
+
+  和 React 不同，它将单个动画 Animation 和动画序列 AnimationSet 合二为一了，其实方法特别简单，发现是个对象就是 Animation，如果是个数组就是动画序列就用 AnimationSet 处理，单个动画参数具体参考 [Animation 模块](../hippy-react/modules.md?id=animation)和 [范例](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/native-demos/animations)。需要说明 hippy-vue 的动画参数有一些[默认值](https://github.com/Tencent/Hippy/blob/master/packages/hippy-vue-native-components/src/animation.js#L5)，只有差异部分才需要填写。
+
+  特别说明，对 actions 替换后会自动新建动画，需手动启动新动画。有两种处理方式：
+  * 替换 actions => 延迟一定时间后（如setTimeout） 调用 `this.[animation ref].start()`（推荐）
+  * `playing = false` =>  替换 actions =>  延迟一定时间后（如setTimeout） `playing = true`
+
+  2.6.0 版本新增 `backgroundColor` 背景色渐变动画支持，参考 [渐变色动画DEMO](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/animations/color-change.vue)
+  * 设置 `actions` 对 `backgroundColor` 进行修饰
+  * 设置 `valueType` 为 `color`
+  * 设置 `startValue` 和 `toValue` 为 [color值](style/color.md)
 
 ## 事件
 
@@ -44,11 +49,11 @@ actions更改时，会自动新建动画。
 
 ### start
 
-`() => void` 手动触发动画开始（`playing`属性置为`true`会自动触发`start`函数调用）
+`() => void` 手动触发动画开始（`playing`属性置为`true`也会自动触发`start`函数调用）
 
 ### pause
 
-`() => void` 手动触发动画暂停（`playing`属性置为`false`会自动触发`pause`函数调用）
+`() => void` 手动触发动画暂停（`playing`属性置为`false`也会自动触发`pause`函数调用）
 
 ### resume
 
@@ -60,7 +65,7 @@ actions更改时，会自动新建动画。
 
 ### reset
 
-`() => void` 重置已开始标记
+`() => void` 重置开始标记
 
 # dialog