React Native 動(dòng)畫

動(dòng)畫

準(zhǔn)備工作

本文基于react-native 0.47版本，提供兩個(gè)動(dòng)畫系統(tǒng)：

  • Animated : 細(xì)粒度的交互動(dòng)畫
  • LayoutAnimation : 動(dòng)畫在全局布局上

Animated

Animated API

1. 動(dòng)畫值
  • Value
  • AnimatedValueXY

我們可以操作的動(dòng)畫值有兩種，一種是簡單值，一種是二維矢量值。
初始化一個(gè)動(dòng)畫值： new Animated.Value(0) 或 new Animated.ValueXY(0, 0)

2. 動(dòng)畫設(shè)置函數(shù)
  • decay //衰減的。以一個(gè)初始速度開始，逐漸變慢到結(jié)束
  • timing //用Easing方法操作動(dòng)畫值
  • spring //彈簧的
  • delay (特殊的timing) //延遲執(zhí)行

每個(gè)方法以不同的動(dòng)畫曲線控制動(dòng)畫值從初始值到最終值。
上面的方法返回的對(duì)象可以start()或者stop()來控制動(dòng)畫開始或者結(jié)束。

3. 動(dòng)畫值生成函數(shù)
  • add
  • divide
  • multiply
  • modulo
  • diffClamp

可以對(duì)兩個(gè)動(dòng)畫值進(jìn)行加、除、乘、模等運(yùn)算，生成一個(gè)新動(dòng)畫值。
動(dòng)畫值的interpolate方法可以傳入range映射輸出（插值運(yùn)算，更多關(guān)于插值需要看Interpolation.js文件）

4. 控制多個(gè)動(dòng)畫設(shè)置函數(shù)
  • sequence //按順序執(zhí)行，執(zhí)行完一個(gè)再執(zhí)行下一個(gè)
  • parallel //一組動(dòng)畫同時(shí)執(zhí)行
  • stagger //按順序執(zhí)行，一個(gè)動(dòng)畫開始后下一個(gè)動(dòng)畫在指定延遲執(zhí)行
  • loop

上面方法控制的是"動(dòng)畫設(shè)置函數(shù)"（timing等）的開始和結(jié)束的方式。

  • event

手勢（panning、scrolling等）或者其他 events 可以直接使用Animated.event方法映射動(dòng)畫值。

  • createAnimatedComponent

只有可動(dòng)畫的組件才能動(dòng)畫，createAnimatedComponent 方法可以讓組件可動(dòng)畫，Animated 直接提供了下面4個(gè)可動(dòng)畫的組件，就是使用的這個(gè)方法包裝的：

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

一個(gè)基于Animated的創(chuàng)建過程：

  1. 初始化一個(gè)動(dòng)畫值（new Animated.Value(0)）
  2. 把這個(gè)動(dòng)畫值綁定到一個(gè)可動(dòng)畫組件的style屬性上（style={{opacity: animValue}}）
  3. 設(shè)置這個(gè)動(dòng)畫值的變化方法（Animated.timing等方法）
  4. 開始動(dòng)畫（Animated.timing().start()）

一個(gè)簡單的動(dòng)畫

使用上面的創(chuàng)建過程，實(shí)現(xiàn)一個(gè)簡單的動(dòng)畫，動(dòng)畫效果如下：

animated-simple.gif

代碼如下：

class Simple extends Component {
  constructor(props) {
    super(props)
    this.state = {
      /*
       1. 初始化動(dòng)畫值
       * */
      fadeAnim: new Animated.Value(0)
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Animated.Text style={{
          /*
           2. 將動(dòng)畫值綁定到style的屬性
           * */
          opacity: this.state.fadeAnim
        }}>
          Simple Animated Used Animated.timing
        </Animated.Text>
        <Button title="touch me"
                onPress={() => {
                  /*
                   3. 處理動(dòng)畫值，并啟動(dòng)動(dòng)畫
                   * */
                  Animated.timing(
                    this.state.fadeAnim,
                    {
                      duration: 1000,
                      toValue: 1
                    }
                  ).start()
                }} />
      </View>
    )
  }
}

一個(gè)稍微復(fù)雜的動(dòng)畫

要知道，一個(gè)動(dòng)畫值只能由一個(gè)變化的原因，就是不能被多個(gè)動(dòng)畫設(shè)置函數(shù)（timing等）操控。但是一個(gè)動(dòng)畫值可以綁定多個(gè)style屬性。

我們做一個(gè)動(dòng)畫，控制一個(gè)View的opacity、translateX 和 scale，這三個(gè)屬性都綁定一個(gè)動(dòng)畫值。

動(dòng)畫效果如下：

animated-multi.gif

代碼如下：

class SingleValueToMultiProps extends Component {
  constructor(props) {
    super(props)
    this.state = {
      /*
       初始化動(dòng)畫值
       * */
      animValue: new Animated.Value(1),
      currentValue: 1, //標(biāo)志位
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center' }}>
        <Animated.View style={{
          width: '50%',
          height: '50%',
          backgroundColor: 'skyblue',
          /*
           將動(dòng)畫值綁定到style的屬性
          * */
          opacity: this.state.animValue, //透明度動(dòng)畫
          transform: [ //位置動(dòng)畫（可以思考一下：下面的元素順序不同會(huì)有不同效果）
            {
              translateX: this.state.animValue.interpolate({
                inputRange: [0, 1],
                outputRange: [300, 0] //線性插值，0對(duì)應(yīng)-100，1對(duì)應(yīng)0
              })
            },
            {
              scale: this.state.animValue, //大小動(dòng)畫
            },
          ]
        }} />
        <Button title="touch me"
                onPress={() => {
                  /*
                   處理動(dòng)畫值，并啟動(dòng)動(dòng)畫
                   * */
                  this.state.currentValue = this.state.currentValue == 1 ? 0 : 1
                  Animated.timing(this.state.animValue, {
                      toValue: this.state.currentValue,
                      duration: 1500,
                  }).start()
                }} />
      </View>
    )
  }
}

控制多個(gè)動(dòng)畫

我們拿Animated.stagger()舉例，控制一個(gè)動(dòng)畫開始后0.25秒開始下一個(gè)動(dòng)畫。

const animations = [
      Animated.timing(
        this.state.skyAnimValue,
        {
          toValue: 1,
        }),
      Animated.timing(
        this.state.redAnimValue,
        {
          toValue: 1,
        }),
      Animated.timing(
        this.state.greenAnimValue,
        {
          toValue: 1,
        })
    ]
Animated.stagger(250, animations).start()

注意：sequence、parallel、stagger、loop 方法控制的是"動(dòng)畫設(shè)置函數(shù)"的開始和結(jié)束的方式，所以傳入的是一組對(duì)動(dòng)畫值操作后的對(duì)象，即timing等方法調(diào)用后的對(duì)象。

events 事件控制動(dòng)畫

使用events事件控制動(dòng)畫，實(shí)際上就是替換了上面的“動(dòng)畫設(shè)置函數(shù)”，動(dòng)畫值不再由“動(dòng)畫設(shè)置函數(shù)”來控制，而是由events來控制。

比如scrolling的event，可以用滾動(dòng)的偏移量來設(shè)置動(dòng)畫值：

onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.offsetYAnim } } }])}

比如panning的event，可以用手勢在頁面的位置設(shè)置動(dòng)畫值：

onPanResponderMove: Animated.event([{ nativeEvent: { pageX: this.state.animValue } }])

LayoutAnimation

在下一次渲染時(shí)，自動(dòng)讓views動(dòng)畫到新狀態(tài)。

一般在setState之前調(diào)用LayoutAnimation.configureNext(config)方法。

LayoutAnimation API

  • configureNext //配置動(dòng)畫在下一次渲染時(shí)發(fā)生

其中config組成如下：

type Config = {
  duration: number,
  create?: Anim,  //創(chuàng)建views時(shí)的動(dòng)畫配置
  update?: Anim,  //更新views時(shí)的動(dòng)畫配置
  delete?: Anim,  //刪除views時(shí)的動(dòng)畫配置
}

其中create、update、delete的組成如下：

type Anim = {
  duration?: number,
  delay?: number, //延遲
  springDamping?: number,   //彈簧阻尼系數(shù)（配合type=spring時(shí)使用）
  initialVelocity?: number, //初始速度
  type?: $Enum<typeof TypesEnum>, 
  property?: $Enum<typeof PropertiesEnum>,
}

  • Types //動(dòng)畫曲線類型

    • spring //彈簧
    • linear //線性
    • easeInEaseOut //緩入緩出
    • easeIn //緩入
    • easeOut //緩出

  • Properties //動(dòng)畫的屬性

    • opacity //透明度
    • scaleXY //縮放

  • create

  • Presets

上面兩個(gè)方法都能生成 configureNext 所需的 config，可以快捷的生成所需的 config。

  • easeInEaseOut
  • linear
  • spring

上面的三個(gè)方法是由 configureNext.bind(null, Presets.xxx) 生成的，可以直接調(diào)用。

代碼如下：

LayoutAnimation.configureNext({
              duration: 1000,
              create: {
                type: LayoutAnimation.Types.linear,
                property: LayoutAnimation.Properties.opacity,
              },
              update: {
                type: LayoutAnimation.Types.linear,
                property: LayoutAnimation.Properties.scaleXY,
              }
            })
            this.setState({
              size: this.state.bigTag ? 60 : 100,
              bigTag: !this.state.bigTag,
            })

效果如下：

LayoutAnimation.gif

完整代碼在這

參考

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容