Skip to content

Commit

Permalink
docs(ios): animation demo and doc update
Browse files Browse the repository at this point in the history
  • Loading branch information
wwwcg committed Aug 9, 2023
1 parent 03b3bec commit bbd34d5
Show file tree
Hide file tree
Showing 7 changed files with 29 additions and 25 deletions.
6 changes: 4 additions & 2 deletions docs/en-us/hippy-react/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
- Start the animation through the start interface of Animation, or stop and destroy the animation through destroy.

> Note that when switching to the web, you need to use the setRef method to manually pass in the ref to run the animation normally. hippy-react-web does not support color gradient animation.
>
> Note that version 2.17.1 greatly upgraded iOS animation, fixing the inconsistency between the historical version and the Android animation performance. Please pay attention to compatibility when upgrading.
## Construction Attributes

Expand All @@ -33,7 +35,7 @@

- `rad`: Indicates that the starting and ending values of the animation parameters are in radians, `this is default unit of rotate`.
- `deg`: Indicates that the starting and ending values of the animation parameters are in degrees.
- `color`: Indicates that the starting and ending values of the animation parameters are color values, which can modify the background color `backgroundColor` and text color `color` (only supported by Android), refer to [examples.](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation/index.jsx) `Minimum supported version 2.6.0`
- `color`: Indicates that the starting and ending values of the animation parameters are color values, which can modify the background color `backgroundColor` and text color `color` (Supported by iOS since version 2.17.1), refer to [examples.](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation/index.jsx) `Minimum supported version 2.6.0`

- Other options for timingFunction:
- `linear`: With a linear interpolator, the animation will proceed at a constant speed.
Expand Down Expand Up @@ -74,7 +76,7 @@

`(callback: () => void) => void` Register an animation listener callback, which will be called back when the animation ends.

### onAnimationRepeat (Android only)
### onAnimationRepeat (Supported by iOS since version 2.17.1)

`(callback: () => void) => void` Register an animation listener callback, which will be called back when the animation starts to repeat the next time.

Expand Down
6 changes: 4 additions & 2 deletions docs/hippy-react/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
- 通过 Animation 的 start 接口启动动画,或是通过 destroy 停止并销毁动画。

> 注意,转 Web 需要用 setRef 方法手动传入 ref 才可以正常运行动画,hippy-react-web 不支持颜色渐变动画。
>
> 注意,2.17.1版本对iOS动画进行了较大升级,修复了历史版本与Android端动画表现不一致的问题,升级时请关注兼容性。
## 构造参数

Expand All @@ -33,7 +35,7 @@

- `rad`:代表动画参数的起止值为弧度, `这是 rotate 动画的默认单位`
- `deg`:代表动画参数的起止值为度数;
- `color`:代表动画参数的起止值为颜色值,可修饰背景色 `backgroundColor` 和文字颜色 `color`(仅 Android 支持),参考 [例子](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation/index.jsx) `最低支持版本2.6.0`
- `color`:代表动画参数的起止值为颜色值,可修饰背景色 `backgroundColor` 和文字颜色 `color`(iOS 2.17.1版本开始支持),参考 [例子](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation/index.jsx) `最低支持版本2.6.0`

- timingFunction 的参数选项:
- `linear`:使用线性插值器,动画将匀速进行;
Expand Down Expand Up @@ -74,7 +76,7 @@

`(callback: () => void) => void` 注册一个动画的监听回调,在动画结束时将会回调 callback。

### onAnimationRepeat(仅 Android 支持
### onAnimationRepeat(iOS 2.17.1版本开始支持

`(callback: () => void) => void` 注册一个动画的监听回调,当动画开始下一次重复播放时 callback 将被回调。

Expand Down
4 changes: 2 additions & 2 deletions examples/android-demo/res/index.android.js

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions examples/android-demo/res/vendor.android.js

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions examples/hippy-react-demo/src/modules/Animation/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ export default class AnimationExample extends React.Component {
],
repeatCount: 'loop',
});
// TODO iOS暂不支持文字颜色渐变动画
// iOS support text color animation since 2.17.1
this.txtColorAnimationSet = new AnimationSet({
children: [
{
Expand Down Expand Up @@ -561,7 +561,7 @@ export default class AnimationExample extends React.Component {
}]}
/>
</View>
<Text style={styles.title}>颜色渐变动画(文字渐变仅Android支持)</Text>
<Text style={styles.title}>颜色渐变动画</Text>
<View style={styles.buttonContainer}>
<View
style={styles.button}
Expand Down Expand Up @@ -607,8 +607,8 @@ export default class AnimationExample extends React.Component {
><Text ref={(ref) => {
this.textColorRef = ref;
}} style={[styles.colorText, {
// TODO iOS暂不支持文字颜色渐变动画
color: Platform.OS === 'android' ? this.txtColorAnimationSet : 'white',
// iOS support text color animation since 2.17.1
color: this.txtColorAnimationSet,
}]}>颜色渐变背景和文字</Text></View>
</View>

Expand Down
6 changes: 3 additions & 3 deletions examples/ios-demo/res/index.ios.js

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions examples/ios-demo/res/vendor.ios.js

Large diffs are not rendered by default.

0 comments on commit bbd34d5

Please sign in to comment.