>

动画片初探之加载动画

- 编辑:至尊游戏网站 -

动画片初探之加载动画

React Native学习执行:动画初探之加载动画

2016/04/29 · JavaScript · 1 评论 · React, React Native, 动画

本文我: 伯乐在线 - D.son 。未经笔者许可,幸免转发!
款待参加伯乐在线 专辑笔者。

学习和执行react已经有龙马精神段时间了,在经验了从先前时代的犹疑到解决痛点时的提神,再到持续实施后受到难题时的苦恼,确实被那如火如荼种新的合计方法和付出形式所折服,但react亦不是才高行洁的,在无数气象下滥用反而会白璧微瑕,这里不张开商量。

有了react的实行经验,结合在此以前自个儿的一点ios开采经历,决定继续冒险,最初react-native学习和进行,近日入眼是从常规的native功用入手,稳步用react-native达成,基础知识如开辟情况搭建、调节和测量检验工具等合斯洛伐克语档有很驾驭的辅导,不再赘述,这里首借使想把实际学习实行中遇见的坑大概风趣的经历记录下来,为科普react-native初学者提供一些参照。O(∩_∩)O~

话非常的少说,步向正题,今日要达成的是一个加载动画,效果如下:

至尊游戏网站 1

很简短二个卡通,不是么?用native完结实在是小菜风流倜傥碟,未来大家试着用牧马人N来兑现它!

先将动画片的视图结构搭建出来,这么些比较轻巧,正是4个会变形的View顺序排列:

<View style={styles.square}> <Animated.View style={[styles.line,{height:this.state.fV}]}> <Animated.View style={[styles.line,{height:this.state.sV}]}> <Animated.View style={[styles.line,{height:this.state.tV}]}> <Animated.View style={[styles.line,{height:this.state.foV}]}> </View>

1
2
3
4
5
6
<View style={styles.square}>
     <Animated.View  style={[styles.line,{height:this.state.fV}]}>
      <Animated.View style={[styles.line,{height:this.state.sV}]}>
      <Animated.View style={[styles.line,{height:this.state.tV}]}>
      <Animated.View style={[styles.line,{height:this.state.foV}]}>
  </View>

此处的视图结构很平凡,只但是在OdysseyN中,供给施加动画的视图,都不能是平凡的View,而是Animated.View,包罗施加动画的图形,也理应是Animated.Image,须要在意。

猎豹CS6N承袭了react的核心理想,基于虚构DOM和多少驱动的方式,用state来保管视图层,所以摩根Plus 8N的卡通片和react的动画片类似,都是通过改造state进而试行render实行视图重绘,表现动画。

确定,先从Animated库动手,那是facebook官方提供的极其用于落到实处动画的库,它比较强硬,集成了多样大规模的卡通格局,正如官方文档写道:

Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.

它小心于输入和输出之间的呼应关系,其间是足以安插的各样变形,通过轻巧的上马和安歇方法来调整基于时间的卡通。

为此利用这几个库的时候,须要了然领悟动画的输入值,可是那并不意味着要求精通每三个随即动画的纯正属性值,因为那是大器晚成种插值动画,Animated只必要知道初阶值和告竣值,它会将享有中等值动态总结出来运用到动画中,那有一点类似于CSS3中的关键帧动画。它提供了spring、decay、timing二种动画方式,其实这约等于两种区别的差值格局,钦命同样的开头值和了结值,它们会以分裂的函数总结中间值并接纳到动画中,最后输出的正是二种分裂的动画片,比方官方给出的以身作则:

class Playground extends React.Component { constructor(props: any) { super(props); this.state = { bounceValue: new Animated.Value(0),//这里设定了动画的输入起先值,注意不是数字0 }; } render(): ReactElement { return ( Animated.Image //这里不是平日Image组件 source={{uri: ' style={{ flex: 1, transform: [ //增多调换,transform的值是数组,包罗风度翩翩多种施加到指标上的调换 {scale: this.state.bounceValue}, // 转换是缩放,缩放值state里的bounceValue,这几个值是三个动态值,也是卡通的根源 ] }} /> ); } componentDidMount() { this.state.bounceValue.setValue(1.5); // 组件加载的时候设定bounceValue,因而图片会被加大1.5倍 Animated.spring( //这里运用的spring方法,它的差值情势不是线性的,会展现弹性的效力this.state.bounceValue, //spring方法的率先个参数,表示被动态插值的变量 { toValue: 0.8, //这里就是输入值的截至值 friction: 1, //这里是spring方法接收的一定参数,表示弹性周到 } ).start();// 最早spring动画 } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Playground extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),//这里设定了动画的输入初始值,注意不是数字0
    };
  }
  render(): ReactElement {
    return (
      Animated.Image  //这里不是普通Image组件
        source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
        style={{
          flex: 1,
          transform: [  //添加变换,transform的值是数组,包含一系列施加到对象上的变换
            {scale: this.state.bounceValue},  // 变换是缩放,缩放值state里的bounceValue,这个值是一个动态值,也是动画的根源
          ]
        }}
      />
    );
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // 组件加载的时候设定bounceValue,因此图片会被放大1.5倍
    Animated.spring( //这里运用的spring方法,它的差值方式不是线性的,会呈现弹性的效果
      this.state.bounceValue, //spring方法的第一个参数,表示被动态插值的变量
      {
        toValue: 0.8, //这里就是输入值的结束值
        friction: 1, //这里是spring方法接受的特定参数,表示弹性系数
      }
    ).start();// 开始spring动画
  }
}

能够想像该动画效果大约为:图片首先被放大1.5倍显示出来,然后以弹性情势降低到0.8倍。这里的start方法还能收到贰个参数,参数是二个回调函数,在动画符合规律奉行完成之后,会调用这么些回调函数。

Animated库不仅唯有spring/decay/timing四个点子提供三种动画,还会有sequence/decay/parallel等方法来决定动画队列的实市价势,比方多少个卡通顺序实践也许同一时间举行等。

介绍完了基础知识,大家开头研讨那么些实际动画的支出,那么些动画要求动态插值的品质其实非常的粗略,独有多个视图的惊人值,其次,也没有须求特别的弹性或然缓动作效果果。所以大家只须求将种种视图的万丈依次变化,就足以了,so easy!

初始尝试:

Animated.timing( this.state.fV, { toValue: 100, duration:500, delay:500, } ).start(); Animated.timing( this.state.sV, { toValue: 100, duration:1000, delay:1000, } ).start(); Animated.timing( this.state.tV, { toValue: 100, duration:1000, delay:1500, } ).start(); Animated.timing( this.state.foV, { toValue: 100, duration:1000, delay:2000, } ).start();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Animated.timing(                        
      this.state.fV,                
      {
        toValue: 100,
        duration:500,
        delay:500,                
      }
    ).start();
    Animated.timing(                        
      this.state.sV,                
      {
        toValue: 100,
        duration:1000,
        delay:1000,                
      }
    ).start();
    Animated.timing(                        
      this.state.tV,                
      {
        toValue: 100,
        duration:1000,
        delay:1500,                
      }
    ).start();
    Animated.timing(                        
      this.state.foV,                
      {
        toValue: 100,
        duration:1000,
        delay:2000,                
      }
    ).start();

至尊游戏网站 2
WTF!
至尊游戏网站 3
虽说动画动起来了,不过那根本便是四根火柴在做广播体操。。。

再者八个更严重的标题是,动画运转完,就结束了。。。,而loading动画应该是循环的,在查阅了文书档案及Animated源码之后,未有找到类似loop这种垄断循环的属性,无助之下,只可以打破常规了。

上文提到过,Animated动画的start方法可以在动画完结未来施行回调函数,假若动画施行完成之后再实行本人,就贯彻了巡回,由此,将动画片封装成函数,然后循环调用自身就足以了,可是当下动画还只把高度变矮了,未有再一次变高的意气风发对,因而固然循环也不会有功效,动画部分也亟需校订:

...//别的部分代码 loopAnimation(){ Animated.parallel([//最外层是多个并行动画,多少个视图的动画片以不相同延迟并行运营Animated.sequence([//这里是一个逐项动画,针对种种视图有八个卡通:收缩和恢复,他们相继打开Animated.timing(//这里是压缩动画 this.state.fV, { toValue: Utils.getRealSize(100), duration:500, delay:0, } ), Animated.timing(//这里是过来动画 this.state.fV, { toValue: Utils.getRealSize(200), duration:500, delay:500,//注意这里的delay刚好等于duration,也正是压缩之后,就起来还原 } ) ]), ...//后边多少个数值的动画类似,依次加大delay就足以 ]).start(this.loopAnimation2.bind(this)); } ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...//其他部分代码
loopAnimation(){
    Animated.parallel([//最外层是一个并行动画,四个视图的动画以不同延迟并行运行
      Animated.sequence([//这里是一个顺序动画,针对每个视图有两个动画:缩小和还原,他们依次进行
        Animated.timing(//这里是缩小动画                        
          this.state.fV,                
          {
            toValue: Utils.getRealSize(100),
            duration:500,
            delay:0,                
          }
        ),
        Animated.timing(//这里是还原动画                        
          this.state.fV,                
          {
            toValue: Utils.getRealSize(200),
            duration:500,
            delay:500,//注意这里的delay刚好等于duration,也就是缩小之后,就开始还原                
          }
        )
      ]),
      ...//后面三个数值的动画类似,依次加大delay就可以
    ]).start(this.loopAnimation2.bind(this));
}
...

功能粗来了!

至尊游戏网站 4
怎么说啊至尊游戏网站 5,

动画片是粗来了,基本完毕了循环动画,可是总以为远远不够那么点灵(sao)动(qi),留心剖判会发掘,那是因为大家的轮回的兑现是经过试行回调来促成的,当parallel实施完成之后,会实践回调举办第贰次动画,也正是说parallel不实施完结,第一回是不会最初的,那正是干吗动画会略显僵硬,由此紧凑考查,第4个章节在试行完本身的降低放大动画后,只有在等到第八个条也幸不辱命减少放大动画,整个并行队列才算实践完,回调才会被实施,首次动画才伊始。

So,回调能被提前施行呢?
Nooooooooooooooooooooop!

万般感人,眼角貌似有翔滑过。。。。。

唯独,不哭站撸的程序员是不会随机折服的,在三番两遍查阅Animated文书档案之后,无果,累觉不爱(可能大家并不正好)~~~
还好facebook还提供了另一个更基础的requestAnimationFrame函数,熟稔canvas动画的同班对它应当不面生,那是贰个动画重绘中日常遇上的办法,动画的最基本原理正是重绘,通过在每趟绘制的时候改动元素的职责照旧别的品质使得成分在眼睛看起来动起来了,因而,在碰壁之后,大家尝试用它来促成大家的动画。

实在,用requestAnimationFrame来达成动画,就一定于须要大家和睦来做插值,通过特定措施动态总结出中间值,将那一个中间值赋值给成分的万丈,就贯彻了动画片。

那多少个卡通是一模一样的,只是以一定延迟顺序进行的,由此分解之后假使完结七个就能够了,每个动画正是条块的莫斯中国科学技术大学学任何时候间表现规律变化:
至尊游戏网站 6

粗粗就介么个野趣。那是二个分支函数,弄起来相比复杂,我们得以将其近似成极其接近的延续函数–余弦函数,那样就比较轻易了:

let animationT=0;//定义贰个全局变量来标示动画时间 let animationN=50,//余弦函数的极值倍数,即最大偏移值范围为正负50 animationM=150;//余弦函数偏移值,使得极值在100-200之内 componentDidMount(){ animationT=0; requestAnimationFrame(this.loopAnimation.bind(this));//组件加载之后就履行loopAnimation动画 } loopAnimation(){ var t0=animationT,t1=t0+0.5,t2=t1+0.5,t3=t2+timeDelay,t4=t3+0.5;//这里分别是四个卡通的此时此刻岁月,依次增进了0.5的推迟 var v1=Number(Math.cos(t0).toFixed(2))*animationN+animationM;//将cos函数的小数值只准确到小数点2位,进步运算功效var v2=Number(Math.cos(t1).toFixed(2))*animationN+animationM; var v3=Number(Math.cos(t2).toFixed(2))*animationN+animationM; var v4=Number(Math.cos(t3).toFixed(2))*animationN+animationM; this.setState({ fV:v1, sV:v2, tV:v3, foV:v4 }); animationT+=0.35;//扩充时间值,每便增值越大动画越快 requestAnimationFrame(this.loopAnimation.bind(this)); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let animationT=0;//定义一个全局变量来标示动画时间
let animationN=50,//余弦函数的极值倍数,即最大偏移值范围为正负50
    animationM=150;//余弦函数偏移值,使得极值在100-200之间
componentDidMount(){
    animationT=0;
    requestAnimationFrame(this.loopAnimation.bind(this));//组件加载之后就执行loopAnimation动画
}
 
loopAnimation(){
    var t0=animationT,t1=t0+0.5,t2=t1+0.5,t3=t2+timeDelay,t4=t3+0.5;//这里分别是四个动画的当前时间,依次加上了0.5的延迟
    var v1=Number(Math.cos(t0).toFixed(2))*animationN+animationM;//将cos函数的小数值只精确到小数点2位,提高运算效率
    var v2=Number(Math.cos(t1).toFixed(2))*animationN+animationM;
    var v3=Number(Math.cos(t2).toFixed(2))*animationN+animationM;
    var v4=Number(Math.cos(t3).toFixed(2))*animationN+animationM;
    this.setState({
      fV:v1,
      sV:v2,
      tV:v3,
      foV:v4
    });
    animationT+=0.35;//增加时间值,每次增值越大动画越快
    requestAnimationFrame(this.loopAnimation.bind(this));
  }

末尾效果:
至尊游戏网站 7

能够见到,极度灵(sao)动(qi),因此也足以黄金年代窥SportageN的质量,大家知道,RAV4N中的JS是运维在JavaScriptCore条件中的,对大相当多React Native应用来讲,业务逻辑是运维在JavaScript线程上的。那是React应用所在的线程,也是爆发API调用,以致管理触摸事件等操作的线程。更新数据到原生扶植的视图是批量展开的,而且在事变循环每举行三遍的时候被发送到原生端,这一步日常会在龙马精神帧时刻结束以前管理完(假使黄金年代切顺遂的话)。能够观察,大家在每后生可畏帧都开展了运算并更换了state,那是在JavaScript线程上开展的,然后通过PAJERON推送到native端实时渲染每后生可畏帧,说真话,最开头对动画的品质依旧比较担心的,未来总的来讲还算不错,不过那只是一个很简短的卡通片,必要绘制的事物少之甚少,在实际app应用中,依旧须求结合真实情状不断优化。

其一动画应该还大概有越来越好更省心的贯彻方式,这里投砾引珠,希望我们能够在那基础上查究出质量越来越好的完结方式并享受出来。

好了,这一次动画初探就到那边,随着学习和实践的深切,还大概会陆陆续续推出风华正茂密密层层分享,敬请关切。

打赏辅助笔者写出更加多好文章,多谢!

打赏作者

初稿链接:
摘要: 在移动支付中,动画是拉长客户体验不可缺点和失误的三个元素。在React Native中,动画API提供了部分现有的组件:Animated.View,Animated.Text和Animated.Image暗许扶植动画。

打赏支持自个儿写出越来越多好小说,多谢!

任选生机勃勃种支付情势

至尊游戏网站 8 至尊游戏网站 9

1 赞 2 收藏 1 评论

在活动支付中,动画是增加客商体验不可缺点和失误的一个因素。在React Native中,动画API提供了一些现有的零部件:Animated.View,Animated.Text和Animated.Image默许扶持动画。动画API会调用iOS或许Android的地点代码来实现那么些零件的运动、大小等动画片。

有关小编:D.son

至尊游戏网站 10

80后码农兼伪文青风流洒脱枚,闷骚而不木讷,猥琐不流浪荡 个人主页 · 小编的稿子 · 1

至尊游戏网站 11

至尊游戏网站,在React Native中,Animated制程如下:

开创Animated.Value,设置初步值,比方一个视图的opacity属性,最起初安装Animated.Value(0),来代表动画的始发时候,视图是全透明的。
AnimatedValue绑定到Style的可动画属性,比方反射率,{opacity: this.state.fadeAnim}
利用Animated.timing来创建机关的卡通片,也许利用Animated.event来依据手势,触摸,Scroll的动态更新动画的景观(本文子禽侧重解说Animated.timing)
调用Animated.timeing.start()起头动画
Animated简介
大部意况下,在 React Native 中制造动画是引用应用 Animated API 的,其提供了几个关键的艺术用于创造动画:

Animated.timing() -- 带动八个值依照八个接通曲线而随即间变化。Easing 模块定义了数不完缓冲曲线函数。
Animated.decay() -- 拉动叁个值以一个上马的进程和一个衰减周详渐渐变为0。
Animated.spring() -- 产生一个基于 Rebound 和 Origami 实现的Spring动画。它会在 toValue 值更新的还要追踪当前的进程状态,以保证动画连贯。
除了那几个之外那四个创建动画的秘诀,对于每一个独立的章程都有三种调用该动画的措施:

Animated.parallel() --同期初步三个动画片数组里的意气风发切卡通。默认情形下,倘诺有其余二个动画停止了,别的的也会被终止。你能够通过stopTogether 选项来更改那个成效。
Animated.sequence() --按梯次试行三个动画片数组里的动画,等待八个达成后再奉行下二个。如果当前的卡通片被暂停,后边的动画片则不会继续施行。
Animated.stagger() -- 三个动画片数组,里面包车型大巴动画片有希望会同期实践(重叠),但是会以内定的延期来起首。
Animated.timing()
应用 Animated.timing 制造的团团转动画。Animated.timing()的大旨使用方法如下:

Animated.timing(
  someValue,
  {
    toValue: number,
    duration: number,
    easing: easingFunction,
    delay: number
  }
)
Easing 也是用React Native创制动画的载体,它同意我们接纳已经定义好的各种缓冲函数,比如:linear, ease, quad, cubic, sin, elastic, bounce, back, bezier, in, out, inout 。由于有直线运动,大家将运用 linear。
接下去,需求在构造函数中起头化二个带来画属性的值用于旋转动画的早先值:

constructor () {
  super()
  this.spinValue = new Animated.Value(0)
}
咱俩采纳 Animated.Value注解了三个 spinValue 变量,并传了八个 0 作为带头值。然后成立了一个名字为 spin 的措施,并在 componentDidMount 中调用它,指标是在 app 加载之后运转动画。

componentDidMount () {
  this.spin()
}
spin () {
  this.spinValue.setValue(0)
原稿链接:
  Animated.timing(
    this.spinValue,
    {
      toValue: 1,
      duration: 4000,
      easing: Easing.linear
    }
  ).start(() => this.spin())
}
近日方式已经成立好了,接下去正是在UI中渲染动画了。

render () {
  const spin = this.spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  })
  return (
    <View style={styles.container}>
      <Animated.Image
        style={{
          width: 227,
          height: 200,
          transform: [{rotate: spin}] }}
          source={{uri: '
      />
    </View>
  )
}
实现效果与利益:
此地写图片描述

风流洒脱体化代码:

/**
* Sample React Native App
*
* @flow
*/

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Animated,
    TouchableOpacity,
    Easing,
    View
} from 'react-native';

class AnimationRotateScene extends Component {

    constructor(props) {
        super(props);
        this.spinValue = new Animated.Value(0)
    }

    componentDidMount () {
        this.spin()
    }

    spin () {
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 4000,
                easing: Easing.linear
            }
        ).start(() => this.spin())
    }

    render() {

        const
            spin = this.spinValue.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '360deg']
            })

        return (
            <View style={styles.container}>
初藳链接:

                <Animated.Image
                    style={{
                        width: 227,
                        height: 200,
                        transform: [{rotate: spin}] }}
                    source={{uri: '
                />
                <TouchableOpacity onPress={() => this.spin()} style={styles.button}>
                    <Text>运转动画</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        marginTop: 20,
        backgroundColor:'#808080',
        height:35,
        width:140,
        borderRadius:5,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default AnimationRotateScene;

Animated.spring()
应用 Animated.spring() 方法创立贰个加大裁减的动画。
此处写图片描述
Animated.spring() 方法应用:

Animated.spring(
    someValue,
    {
      toValue: number,
      friction: number
    }
)
如上海教室所示,大家要接纳Animated.spring()创立二个放大裁减的动画效果。
在构造函数中,创造三个 springValue 变量,最早化其值为0.3。

constructor () {
  super()
  this.springValue = new Animated.Value(0.3)
}

下一场,删除 animated 方法和componentDidMount方法,创制二个新的 spring 方法。

spring () {
  this.springValue.setValue(0.3)
  Animated.spring(
    this.springValue,
    {
      toValue: 1,
      friction: 1
    }
  ).start()
}
接下来大家给View的button增加二个点击事件,出发上面包车型大巴spring动画。

<View style={styles.container}>
  <Text
    style={{marginBottom: 100}}
    onPress={this.spring.bind(this)}>Spring</Text>
    <Animated.Image
      style={{ width: 227, height: 200, transform: [{scale: this.springValue}] }}
      source={{uri: ';
</View>
总体代码如下:

/**
* Sample React Native App
*
* @flow
*/

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Animated,
    TouchableOpacity,
    Easing,
    View
} from 'react-native';
初稿链接:

class AnimationRotateScene extends Component {

    constructor(props) {
        super(props);
        this.spinValue = new Animated.Value(0)
    }

    componentDidMount () {
        this.spin()
    }

    spin () {
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 4000,
                easing: Easing.linear
            }
        ).start(() => this.spin())
    }

    render() {

        const
            spin = this.spinValue.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '360deg']
            })

        return (
            <View style={styles.container}>

                <Animated.Image
                    style={{
                        width: 227,
                        height: 200,
                        transform: [{rotate: spin}] }}
                    source={{uri: '
                />
                <TouchableOpacity onPress={() => this.spin()} style={styles.button}>
                    <Text>运维动画</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        marginTop: 20,
        backgroundColor:'#808080',
        height:35,
        width:140,
        borderRadius:5,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default AnimationRotateScene;

Animated.parallel()
Animated.parallel() 会同不时间启幕四个卡通数组里的万事动画。parallel()会经受一个动画数组,首先看一下api:

Animated.parallel(arrayOfAnimations)
// In use:
Animated.parallel([
  Animated.spring(
    animatedValue,
    {
      //config options
    }
  ),
  Animated.timing(
     animatedValue2,
     {
       //config options
     }
  )
])
之所以,大家先创制二个卡通数组,并起头化。

constructor () {
  super()
  this.animatedValue1 = new Animated.Value(0)
  this.animatedValue2 = new Animated.Value(0)
  this.animatedValue3 = new Animated.Value(0)
}
下一场,创制一个 animate 方法并在 componendDidMount() 中调用它。

componentDidMount () {
  this.animate()
}
animate () {
  this.animatedValue1.setValue(0)
  this.animatedValue2.setValue(0)
  this.animatedValue3.setValue(0)
  const createAnimation = function (value, duration, easing, delay = 0) {
    return Animated.timing(
      value,
      {
        toValue: 1,
        duration,
        easing,
        delay
      }
    )
  }
  Animated.parallel([
    createAnimation(this.animatedValue1, 2000, Easing.ease),
    createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
    createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)       
  ]).start()
}
在 animate 方法中,我们将多个卡通属性值重新初始化为0。此外,还创办了一个createAnimation 方法,该情势选取多个参数:value, duration, easing, delay(默许值是0),再次回到二个新的卡通。

接下来,调用 Animated.parallel(),并将八个利用 createAnimation 成立的动画作为参数传递给它。在 render 方法中,大家需求设置插值:
最早的文章链接:

render () {
  const scaleText = this.animatedValue1.interpolate({
    inputRange: [0, 1],
    outputRange: [0.5, 2]
  })
  const spinText = this.animatedValue2.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '720deg']
  })
  const introButton = this.animatedValue3.interpolate({
    inputRange: [0, 1],
    outputRange: [-100, 400]
  })
  ...
}
最后,我们用三个主 View 包裹七个 Animated.Views:

<View style={[styles.container]}>
  <Animated.View
    style={{ transform: [{scale: scaleText}] }}>
    <Text>Welcome</Text>
  </Animated.View>
  <Animated.View
    style={{ marginTop: 20, transform: [{rotate: spinText}] }}>
    <Text
      style={{fontSize: 20}}>
      to the App!
    </Text>
  </Animated.View>
  <Animated.View
    style={{top: introButton, position: 'absolute'}}>
    <TouchableHighlight
      onPress={this.animate.bind(this)}
      style={styles.button}>
      <Text
        style={{color: 'white', fontSize: 20}}>
        Click Here To Start
      </Text>
   </TouchableHighlight>
  </Animated.View>
</View>

全体的代码如下:

/**
* Sample React Native App
*
* @flow 组动画
*/

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Animated,
    TouchableOpacity,
    TouchableHighlight,
    Easing,
    View
} from 'react-native';

初藳链接:
class AnimationGroupScene extends Component {

    constructor() {
        super()
        this.animatedValue1 = new Animated.Value(0)
        this.animatedValue2 = new Animated.Value(0)
        this.animatedValue3 = new Animated.Value(0)
    }

    componentDidMount() {
        this.animate()
    }

    animate() {
        this.animatedValue1.setValue(0)
        this.animatedValue2.setValue(0)
        this.animatedValue3.setValue(0)
        const createAnimation = function (value, duration, easing, delay = 0) {
            return Animated.timing(
                value,
                {
                    toValue: 1,
                    duration,
                    easing,
                    delay
                }
            )
        }
        Animated.parallel([
            createAnimation(this.animatedValue1, 2000, Easing.ease),
            createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
            createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)
        ]).start()
    }

    startAnimation() {
        this.state.currentAlpha = this.state.currentAlpha == 1.0 ? 0.0 : 1.0;
        Animated.timing(
            this.state.fadeAnim,
            {toValue: this.state.currentAlpha}
        ).start();
    }

    render() {

        const scaleText = this.animatedValue1.interpolate({
            inputRange: [0, 1],
            outputRange: [0.5, 2]
        })
        const spinText = this.animatedValue2.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '720deg']
        })
        const introButton = this.animatedValue3.interpolate({
            inputRange: [0, 1],
            outputRange: [-100, 400]
        })

        return (
            <View style={styles.container}>

                <Animated.View
                    style={{transform: [{scale: scaleText}]}}>
                    <Text>Welcome</Text>
                </Animated.View>
                <Animated.View
                    style={{marginTop: 20, transform: [{rotate: spinText}]}}>
                    <Text
                        style={{fontSize: 20}}>
                        to the App!
                    </Text>
                </Animated.View>
                <Animated.View
                    style={{top: introButton, position: 'absolute'}}>
                    <TouchableHighlight
                        onPress={this.animate.bind(this)}
                        style={styles.button}>
                        <Text>运维组动画</Text>
                    </TouchableHighlight>
                </Animated.View>

            </View>
        );
    }
}
原来的文章链接:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        marginTop: 20,
        backgroundColor: '#808080',
        height: 35,
        width: 140,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default AnimationGroupScene;

以身作则使用表明
此间写图片描述
这里写图片描述
如图所示,作者对动画片的代码做了二个简练的股盘的整理,我们在选拔的时候一向引入AnimationRoot文件就能够。
AnimationRoot文件内容如下:

/**
* Sample React Native App
*
* @flow
*/

import React, {Component} from 'react';
import { StackNavigator } from 'react-navigation';

import AnimationIndex from './AnimationIndex';
import AnimationSpringScene from './AnimationSpringScene';//缩放动画
import AnimationRotateScene from './AnimationRotateScene';//旋转动画
import AnimationAlphaScene from './AnimationAlphaScene';//Alpha动画
import AnimationGroupScene from './AnimationGroupScene';//组动画
import AnimationFrameScene from './AnimationFrameScene';//帧动画

const anim = StackNavigator({
    AnimationIndex: { screen: AnimationIndex },
    AnimationSpringScene: { screen: AnimationSpringScene },
    AnimationRotateScene: { screen: AnimationRotateScene },
    AnimationAlphaScene: { screen: AnimationAlphaScene },
    AnimationGroupScene: { screen: AnimationGroupScene },
    AnimationFrameScene: { screen: AnimationFrameScene },
});
export default anim;

终极是项目贯彻的末梢结出图,代码地址动画源码
初藳链接:

本文由技术教程发布,转载请注明来源:动画片初探之加载动画