ReactNative动画之Animated初识篇

Animated提供了两种类型的值：

1.Animated.Value()用于单个值

2.Animated.ValueXY()用于矢量值{x:0,y:0}

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

目前Animated提供的动画组件有View,Image,Text,ScrollView;当然我们也可以使用createAnimatedComponent方法来创建自己的动画组件。

static createAnimatedComponent(Component: any)使得任何一个React组件支持动画。用它来创建Animated.View等等。

目前Animated提供了三种动画：每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：
1.Animated.decay()以指定的初始速度开始变化，然后变化速度越来越慢直至停下。

static decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig)推动一个值以一个初始的速度和一个衰减系数逐渐变为0。Config参数有以下这些属性：velocity: 初始速度。必填。deceleration: 衰减系数。默认值0.997。useNativeDriver: 使用原生动画驱动。默认不启用(false)。

2.Animated.spring()弹性动画

static spring(value: AnimatedValue | AnimatedValueXY, config: SpringAnimationConfig)产生一个基于Rebound和Origami实现的Spring动画。它会在toValue值更新的同时跟踪当前的速度状态，以确保动画连贯。可以链式调用。Config参数有以下这些属性（注意你不能同时定义bounciness/speed和 tension/friction这两组，只能指定其中一组）：friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.useNativeDriver: 使用原生动画驱动。默认不启用(false)。

3.Animated.timing()依赖时间的动画

static timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig)推动一个值按照一个过渡曲线而随时间变化。Easing模块定义了一大堆曲线，你也可以使用你自己的函数。Config参数有以下这些属性：duration: 动画的持续时间（毫秒）。默认值为500.easing: Easing function to define curve。默认值为Easing.inOut(Easing.ease).delay: 开始动画前的延迟时间（毫秒）。默认为0.useNativeDriver: 使用原生动画驱动。默认不启用(false)。

大多数情况下应该使用timing(),动画默认值easeInOut。

使用样例：

constructor(props){
super(props);
this.state = { bottom: new Animated.Value(-200), }
}

1.常在state中设置一个动画初始值

2.在componentDidMount或者其他逻辑处理中开始动画

 componentWillReceiveProps(nextProps,nextState) {if (nextProps.isShow === true) {//不能同时定义bounciness/speed和 tension/friction这两组，只能指定其中一组/** configfriction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.useNativeDriver: 使用原生动画驱动。默认不启用(false)。*//*Animated.spring(this.state.bottom,{toValue:0,speed:12, //bounciness:1}).start(()=>{console.log('animated finished')});*/Animated.timing(this.state.bottom,{toValue:0,duration:350,}).start(()=>{console.log('animated finished')});}else {//在组件隐藏后还原下一次动画前的初始位置this.setState({bottom: new Animated.Value(-200),})}}

组合动画

RN动画还可以以组合函数方式进行：

Animated.delay() 在给定延迟后开始动画。

static delay(time: number) #在指定的延迟之后开始动画。

Animated.parallel() 同时启动多个动画。

static parallel(animations: Array<CompositeAnimation>, config?: ParallelConfig) #同时开始一个动画数组里的全部动画。默认情况下，如果有任何一个动画停止了，其余的也会被停止。你可以通过stopTogether选项来改变这个效果。

Animated.sequence() 按顺序启动动画，等待每一个动画完成后再开始下一个动画

static sequence(animations: Array<CompositeAnimation>) #按顺序执行一个动画数组里的动画，等待一个完成后再执行下一个。如果当前的动画被中止，后面的动画则不会继续执行。

Animated.stagger() 按照给定的延时间隔，顺序并行的启动动画。

static stagger(time: number, animations: Array<CompositeAnimation>) #一个动画数组，里面的动画有可能会同时执行（重叠），不过会以指定的延迟来开始。用来制作拖尾效果非常合适。

ReactNative动画之Animated初识篇相关推荐

移动跨平台ReactNative动画组件Animated【14】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
React Native Animated 动画详解 - 实例篇 (这篇就够了)
之前已经更新过Animated动画基础篇相关知识点,今天讲解Animated.Value,Animated.ValueXY以及相关动画库使用实例.学习完本篇相信大家对于动画库的基本使用应该是没有问题 ...
React Native 动画（Animated）
一.前言对于一个移动应用APP,其中的动画交互能够给用户带来很好的体验,所以动画在移动应用开发过程中是非常重要的; 二.React Native中实现动画的方式 -不断修改state -Animat ...
React Native 动画（Animated）笔记
学习笔记--方便下次查看大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画: 1.API Animated.timin ...
分布式事务科普（初识篇）
点击上方"朱小厮的博客",选择"设为星标" 后台回复"高效Java"领取<Effective Java第三版> 欢迎跳转到本文的 ...
python数据挖掘课程】十七.社交网络Networkx库分析人物关系（初识篇）
#2018-03-30 09:21:39 March Friday the 13 week, the 089 day SZ SSMR python数据挖掘课程]十七.社交网络Networkx库分析人物 ...
事务控制新增后修改_分布式事务科普（初识篇）
点击上方"IT牧场",选择"设为星标" 技术干货每日送达! <分布式事务科普>是我在YQ期间整理的一篇科普型文章,内容共计两万五千字左右,应该算是涵 ...
android studio实现动画,android studio上的基本动画实现（第一篇）
hello,各位小伙伴们,在不少小伙伴们刚刚开始学习android的时候,经常会有一些project里面须要有一些基本动画的插入,那么具体是要怎么实现呢?咱们接下一块儿分析一下在android中的几种 ...
虚幻引擎学习之路：动画模块之基础篇
原文链接:https://blog.uwa4d.com/archives/Study_Unreal4_Animation_1.html 在之前的微信文章推送中,我们陆续为大家详细介绍了Unreal 4 ...

ReactNative动画之Animated初识篇

组合动画

ReactNative动画之Animated初识篇相关推荐

最新文章

热门文章