React-Native项目中使用动画-Animated

动画 Animated

RN中的动画在某种程度上可以理解为“属性动画”,也就是以某种过渡方式改变组件样式属性值(如组件样式的left值),驱动组件以动画的形式发生变化(位移、形变或转动)

可动画化的组件:

  • View (Animated.View)
  • Text (Animated.Text)
  • Image (Animated.Image)
  • 使用createAnimatedComponent自定义

三种动画类型:

  • spring 基础的单次弹跳物理模型
  • decay 以一个初始速度开始并且按一定的衰减比逐渐减慢直至停止
  • timing 时间和变量线性变化

1.关联属性的初始化

关联属性指的是动画过程中对应变化的属性,这个属性的类型是Animated.Value,可以通过new Animated.Value()new Animated.ValueXY()(处理2D动画)等方法初始化,如下:

class PlaygroundContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            left1: new Animated.Value(0),
            rotation2: new Animated.Value(0),
            pan: new Animated.Value({x:0, y:0})
        }
    }
    ...
}

2.与组件关联

用spring实现的动画

import loadingImage from '../../assets/0.gif'
...
class PlaygroundContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            left1: new Animated.Value(0),
        }
    }
    componentDidMount() {
        Animated.spring(this.state.left1, {
            toValue: 100,       //属性目标值
            friction: 1,        //摩擦力 (越小 振幅越大)
            tension: 100,       //拉力 
        }).start();         //执行动画
    }
    render(){
        return (
            ...
            <Animated.Image
                style={[styles.image,{left: this.state.left1}]}
                source={ loadingImage }/>
            ...
        )
    }
}

用timing实现的翻转动画效果

import loadingImage from '../../assets/0.gif'
...
class PlaygroundContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rotation2: new Animated.Value(0),
        }
    }
    componentDidMount() {
        Animated.timing(this.state.rotation2, {
            toValue: 1,     //属性目标值
            duration: 3000  //动画执行时间
        }).start(); //执行动画
    }
    render(){
        return (
            ...
            <Animated.Image
                style={[styles.image,{
                    transform:[
                        {
                            rotateX: this.state.rotation2.interpolate({
                                inputRange:[0,1],
                                outputRange:['0deg','360deg']
                            })
                        }
                    ]
                }]}
                source={ loadingImage }/>
            ...
        )
    }
}

<b> 这里用到<l style="color:red">插值函数</l>interpolate,它可以接受一个输入区间,然后将其映射到另一个的输出区间,如下:</b>

{
    rotateX: this.state.rotation2.interpolate({
        inputRange:[0,1],
        outputRange:['0deg','360deg']
    })
}

通过映射,

rotation2的value 映射输出
0
0.2 72°
0.5 180°
1 360°

用decay实现衰减动画

import loadingImage from '../../assets/0.gif'
...
class PlaygroundContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            decayLeft4: new Animated.Value(0),
        }
    }
    componentDidMount() {
        Animated.decay(this.state.decayLeft4, {
            velocity: 2,// 起始速度,必填参数。
            deceleration:0.992  //速度衰减比例,默认为0.997。
        }).start();
    }
    render(){
        return (
            ...
            <Animated.Image
                style={[styles.image,{
                    left: this.state.decayLeft4
                }]}
                source={ loadingImage }/>
            ...
        )
    }
}

组合画效果

  • static sequence(animations: Array<CompositeAnimation>) (接受一个动画数组,<b style="color: red">依次</b>执行数组里的动画)

  • static parallel(animations: Array<CompositeAnimation>, config?: ParallelConfig) (接受一个动画数组,<b style="color: red">同时</b>执行数组里的动画)

      import loadingImage from '../../assets/0.gif'
      ...
      class PlaygroundContainer extends Component {
          constructor(props) {
              super(props);
              this.state = {
                  left3: new Animated.Value(0),
                  rotation3: new Animated.Value(0),
                  scale3: new Animated.Value(0.5),                }
          }
          componentDidMount() {
              //串行执行
              Animated.sequence([ 
                  // 并行执行(滚动,同时旋转)
                  Animated.parallel([
                      Animated.timing(this.state.left3, {
                          toValue: 1,
                          duration: 3000,
                      }),
                      Animated.timing(this.state.rotation3, {
                          toValue: 1,
                          duration: 1000,
                      }),
                  ]),
                  // 滚动、旋转结束  执行缩放
                  Animated.timing(this.state.scale3, {
                      toValue: 1,
                      duration: 500,
                  })
              ]).start()  //执行动画
          }
          render(){
              return (
                  ...
                  <Animated.Image
                      style={[styles.image,{
                          left: this.state.left3.interpolate({
                              inputRange:[0,1],
                              outputRange:[0, width - 100]
                          }),
                          transform:[
                              {rotateZ: this.state.rotation3.interpolate({
                                      inputRange:[0,1],
                                      outputRange:['0deg','360deg']})
                              },
                              {rotateX: this.state.rotation3.interpolate({
                                      inputRange:[0,1],
                                      outputRange:['0deg','360deg']})
                              },
                              {scale: this.state.scale3}
                          ]
                      }]}
                      source={ loadingImage }/>
                  ...
              )
          }
      }
    

用delay做延时动画

Animated.delay(1000)延时1000ms
delay动画放进sequence 执行串行的动画数组中

import loadingImage from '../../assets/0.gif'
...
class PlaygroundContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            left5: new Animated.Value(0),
        }
    }
    componentDidMount() {
        Animated.sequence([
            // 1000 ms后执行
            Animated.delay(1000),
            Animated.timing(this.state.left5, {
                toValue: 100,// 起始速度,必填参数。
                duration: 1000
            })
        ]).start()
    }
    render(){
        return (
            ...
            <Animated.Image
                style={[styles.image,{
                    left: this.state.left5
                }]}
                source={ loadingImage }/>
            ...
        )
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容