很多地方都需要用到动画,先看下文档吧。

一、两个互补的动画系统

  • LayoutAnimation:用于全局的布局动画
  • Animated:用于创建更精细的交互控制的动画(主要是这个)

二、Animated动画组件

  • 已封装动画组件

    • Animated.Image
    • Animated.ScrollView
    • Animated.Text
    • Animated.View
  • 自定义动画组件
    • 可以使用Animated.createAnimatedComponent()来封装自己的组件

三、两种类型的值

  • Animated.Value()用于单个值。
  • Animated.ValueXY()用于矢量值

注:Animated.Value可以绑定到样式或是其他属性上,也可以进行插值运算。单个Animated.Value可以用在任意多个属性上。

四、三种动画类型

  • Animated.decay()以指定的初始速度开始变化,然后变化速度越来越慢直至停下(递减)
    • velocity: 初始速度。必填。
    • deceleration: 衰减系数。默认值0.997。
    • useNativeDriver: 使用原生动画驱动。默认不启用(false)。
  • Animated.spring() 提供了一个简单的弹性模型
    • friction:控制“反弹”/过冲。默认7。
    • tension:控制速度。默认40。
    • speed:控制动画的速度。默认12。
    • bounciness:控制弹性。默认8。
    • useNativeDriver:使用原生动画驱动。默认不启用(false)。
  • Animated.timing() 随着时间变化,使value按照easing函数进行变化
    • duration:动画的持续时间(毫秒)。默认值为500。
    • easing:easing函数来定义曲线。默认值为Easing.inOut(Easing.ease)
    • delay:开始动画前的延迟时间(毫秒)。默认为0。
    • useNativeDriver:使用原生动画驱动。默认不启用(false)。

五、组合动画

  • Animated.delay() 在给定的延迟后开始动画。
  • Animated.parallel() 同时启动一些动画。
  • Animated.sequence() 按顺序启动动画,一个完成再开始下一个。
  • Animated.stagger() 一个动画数组,里面的动画有可能会同时执行(重叠),不过会以指定的延迟来开始。starts animations in order and in parallel, but with successive delays.

注:默认情况下,如果一个动画停止或中断,则组中的所有其他动画也会停止。

六、合成动画值

  • Animated.add()     将两个动画值相加计算,得出一个新的动画值
  • Animated.divide()   相除
  • Animated.modulo()   取模(取余数)
  • Animated.multiply()  相乘

七、插值

  • interpolate()

注:已知离散点,且插值函数要过每个离散点,离散点以外的就是插值(个人理解)

八、处理手势和其他事件

  • Animated.event()

--------------------------------------

没写例子,等我整明白滴(。-ω-)zzz

React Native学习——动画Animated(笔记)的更多相关文章

  1. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  2. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  3. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  4. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  5. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  6. React Native学习笔记之2

    1:如何创建一个react native工程 首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProjec ...

  7. React Native学习笔记之1

    1:运行React Native报连接错误解决 解决方式: 在终端进入项目文件里,然后执行:(cd Pods/React; npm run start) 2:组件生命周期介绍 创建阶段 1. getD ...

  8. react native 学习笔记

    假设你的机器现在还没安装任何环境. 不同的操作系统.不同的目标平台,具体的步骤也会有所不同.如果你想同时开发android和ios也没问题,只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同 本 ...

  9. React Native学习(二)之View

    React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. ...

随机推荐

  1. Java的绝对路径和相对路径

    Java的绝对路径和相对路径 参考:http://blog.csdn.net/u011225629/article/details/46872775 1. 绝对路径 以根部件开始的路径是绝对路径,比如 ...

  2. Debian GNU/Linux 8.4 (jessie)编译安装php.md

    编译遇到的问题很多.网上的文章往往是记录遇到的报错,贴上对应的解决. 而实际的环境,如操作系统,安装的软件必然有差异,所以,更重要的是,如何找到解决方法(不担保按步骤做可以编译成功),并将过程自动化. ...

  3. h5实现照片墙效果

    <style> *{ margin: 0; padding: 0; } body{ background: url(images/bg.jpg); } #div1{ width: 100% ...

  4. 如何获取系统Home(Launcher)应用判断用户是否处于home界面

    要把我们的应用程序作为home(launcher应用),只需要在AndroidManifest.xml中添加: <category android:name="android.inte ...

  5. Rank of Tetris

    Rank of Tetris Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  6. 三目运算的使用&bytes类型转str类型

    一.三目运算的使用 就像c语言中有三目运算符一样,python中也有三目运算符,废话不多说直接上代码 a=3 c=4 b=a if a>c else c print(b) 意思就和 if a&g ...

  7. 图片格式 WebP APNG

    WebP  是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件 ...

  8. Skylin CityBuilder 6.6.1 提示授权过期解决(License Manager中显示未过期)

    最近工作中使用到Skyline 系列软件,授权一切正常,启动CityBuilder时提示授权过期 运行License Manger之后查看授权状态 ' 一切正常,并没有出现授权过期等情况. 如何解决: ...

  9. C#3.0中的扩展方法

    在实际应用中,开发者完成代码的编译后,除非重新编译更改后的代码,否则开发者很难在原有代码中添加新的功能. 在C#3.0中,提供了一个扩展方法的新特性,可以使得开发者在编译后的程序集里边添加相关的方法, ...

  10. [转载] TCP长连接与短连接的区别

    转载自http://www.cnblogs.com/liuyong/archive/2011/07/01/2095487.html 1. TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前 ...