第13课：添加优化动画

最新推荐文章于 2022-06-19 22:05:43 发布

疯狂紫萧

最新推荐文章于 2022-06-19 22:05:43 发布

阅读量139

点赞数

分类专栏： React Native 实战：构建电商 App 文章标签：移动开发 React Native 前端电商

本文链接：https://blog.csdn.net/cuo9958/article/details/108729693

版权

React Native 实战：构建电商 App 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

知识点：

首页动画
动画组件说明
动画优化

首页加入动画

我们在首页加入这样一个动画，在默认情况下首页顶部是透明的，当内容往下滚动的时候，将顶部的背景颜色变成白色，搜索框颜色变成其他颜色。

在首页的 state 中加入默认的位置值，这里使用动画库的单项值，设置默认值为 0。

scrollTop: new Animated.Value(0)

修改 FlatList 组件的滚动监听频率，这里的意思是每秒触发 100 次监听方法，即等于每 10 毫秒触发一次方法。

scrollEventThrottle={100}

修改监听方法，如果滚动超过 200 就不再做任何操作，这里使用直接设置值的方式，滚动的数字变化特别频繁，已经不需要使用动画的方式改变值了。

//滚动监听
_onScroll(e) {
    const y = e.contentOffset.y;
    if (y < 200) this.state.scrollTop.setValue(y)
}

将顶部的组件外层替换使用 Animated.View，这里做了一个映射，将数字直接映射成对应的颜色透明度。注意不要使用 opacity，该属性会把内容也变成透明的，这里同时映射负数是因为列表在下拉刷新的时候会变成负数，也要将这个因素也考虑进来。

<Animated.View style={[styles.headerView,{
                backgroundColor: this.state.scrollTop.interpolate({
                    inputRange: [-100, 0, 100],
                    outputRange: ['rgba(255,255,255,.5)', 'rgba(255,255,255,0)', 'rgba(255,255,255,1)']
                })
            }]}>
                <SearchHeader share={() => this.share()} navigation={this.props.navigation} />
            </Animated.View>

回到顶部

在监听滚动条的基础上可以直接做滚动到顶部的判断，如果滚动距离超过 400 并且回到顶部按钮是隐藏的，直接显示按钮，反之则把按钮隐藏起来。

在渲染方法中加入一个可点击的图片，设置点击滚动到最顶层。

{this.state.showTop && <TouchableOpacity onPress={()=>this.toTop()}>
  <Image style={styles.toBtn}
      source={{ uri: require("../images/icon-to-top") }} />
</TouchableOpacity>}

修改监听方法，让滚动的时候可以根据情况改变按钮的显示隐藏，这里加上判断可以减少很多不必要的状态设置。

//滚动监听
_onScroll(e) {
    const y = e.contentOffset.y;
    if (y < 200) this.state.scrollTop.setValue(y)
    if (y < 500 && this.state.showTop) {
        this.setState({ showTop: false })
    }
    if (y > 500 && !this.state.showTop) {
        this.setState({ showTop: true })
    }
}

添加回到顶部的方法：

//回到顶部
toTop(){
    this.refs.flatlist.scrollToOffset({offset:0})
}

其他动画

顶部颜色变换只是一个很简单的动画，有兴趣的同学可以试试加入更多的变化，比如通过叠加的两个图片造成一个图片的变色动画，以及字体的颜色、阴影（提示：不能用阴影属性）动画等，这些都需要靠各位的聪明才智来实现了。

动画组件说明

RN 自带的 Animated 组件提供了几个已经处理过的组件，在使用动画的时候必须使用处理过的组件，不然是不支持的。虽然 RN 也提供了 createAnimatedComponent 方法来自定义组件，但是尽量还是不要使用的好。

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

创建动画组件能够接收的值必须使用下面其中之一初始化变量。动画组件会根据配置动态的改变值的内容，同时这个变化也会体现在 UI 界面上，不需要使用 set 方式去改变。

Animated.Value() //改变单个值
Animated.ValueXY() //改变两个值

最常用的是 timing 方法，该方法根据时间动态生成最终的结果，比如点击之后：

Animated.timing(value/*要改变的值*/,{
    //配置
    duration:500,//动画持续时间
    easing:Easing.inOut(Easing.ease),//动画方式，需要引入 Easing
    delay:0,//开始动画之前的延迟,默认0
    useNativeDriver:false//是否使用原生方式动画，默认不实用
}).start();//最后调用start启动动画

设置好的变量还可以直接调用它上面的方法，比如停止动画、改变值等操作。

this.state.anim.setValue(1);//直接设置值
this.state.anim.stopAnimation(callback?);//停止动画，参数是停止之后的回调
this.state.anim.addListener(callback);//监听值的变化
this.state.anim.setOffset(1);//动画偏移，每次计算都会加上这个值
this.state.anim.flattenOffset();//清除偏移

要使用动画做效果，最好使用 Transform 下面的值来生成最终的结果，Transform 下面通常支持 scale、scaleX、scaleY、translateX、translateY、rotate、rotateX、rotateY、rotateZ 这几个属性。

如果要设置颜色、角度等字符串型的值就要使用到插值函数 interpolate，该方法可以将对应的值映射为最终的结果，如果不在映射区间的则不会有改动。

//设置背景色
backgroundColor: this.state.scrollTop.interpolate({
  inputRange: [0, 100],
  outputRange: ['rgba(255,255,255,0)', 'rgba(255,255,255,1)']
  })
//设置角度
transform:[
 {rotate: this.state.rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']})}
]

除了上面的简单动画，也可以使用 RN 的方法将几个动画组合使用。

Animated.delay(time)；//延迟毫秒执行动画
Animated.parallel([],config); //同时开始执行动画
Animated.sequence([]); //一次执行动画

下面是一个顺序执行动画的例子。

startAnimation() {
  this.state.bounceValue.setValue(1.5); // 设置一个较大的初始值
  this.state.fadeOutOpacity.setValue(1);

  Animated.sequence([
      //  基础的单次弹跳物理模型
      Animated.spring(
          this.state.bounceValue, {
            toValue: 0.8,
            friction: 1,// 摩擦力，默认为7.
            tension: 40,// 张力，默认40。
          }), 
      //渐隐动画
      Animated.timing(this.state.fadeOutOpacity, {
        toValue: 0,
        duration: 2000,
        easing: Easing.linear,
      })
  ]).start();
}