zoukankan      html  css  js  c++  java
  • React Native学习——动画Animated(笔记)

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

    一、两个互补的动画系统

    • 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

  • 相关阅读:
    一条insert语句批量插入多条记录
    分析器错误消息: 未能加载类型“WebApplication._Default”
    Avi视频生成缩略图时,提示“尝试读取或写入受保护的内存。这通常指示其他内存已损坏”
    DataGridView 的单元格的边框、 网格线样式的设定【转】
    2015届求职经历(转)
    现在有m组n个有序数组,例如{1,2,3,4},{2,3,4,6},{1,3,5,7},在这些数组中选择第k小的数据,然后返回这个值
    给定数组A,大小为n,现给定数X,判断A中是否存在两数之和等于X
    ASP.Net中使用Report Service
    为自己尝试写点东西吧,程序员们!(转)
    ubuntu菜单面板丢了怎么找回
  • 原文地址:https://www.cnblogs.com/MaiJiangDou/p/8000315.html
Copyright © 2011-2022 走看看