react native Animated 使用详解(基础)
我们知道执行一个动画最基本的原理就是调用动画函数改变一个变量值,而这个变量值绑定到控件的属性上,比如透明的、位置等。通过动画函数改变值从而使控件动起来。所以最基本的动画要有2个属性:
- 变量值(Animated.Value和Animated.ValueXY)
- 动画类型:timing、spring、decay
我们先看一个最基本的demo,这个demo实现了平移动画
/*** Created by on 2017/5/26.*/
import React, {Component} from 'react';
import {StyleSheet,View,ScrollView,Text,Button,Animated,Alert,
} from 'react-native';export default class AnimatedDemo extends Component {static navigationOptions = {title: 'Animated'}state = {left:new Animated.Value(0),}_translateAni = ()=>{this.state.left.setValue(0);Animated.timing(this.state.left,{toValue: 300,duration: 1000,},).start();}render() {return (<View style={{flex:1}}><Button title='平移' onPress={()=>{this._translateAni()}}/><Animated.Viewstyle={{width:50,height:100,backgroundColor:'blue',left:this.state.left}}></Animated.View> </View>);}
}
要想写一个动画需要以下几步:
1、绑定需要动画的控件(Animated.View),并不是所有的组件都可以,只有View,Text,Image、通过Animated.createAnimatedComponent自定义创建的动画组件。
2、将动画变量值绑定到View style 的left属性上,这样看起来View就会向右移动。
3、启动动画:Animated.timing(…).start();
下面我们详细的说说
Animated.Value和Animated.ValueXY
Animated.Value和Animated.ValueXY就是上面我们所说的变量值即动画执行过程中会不断的更改这个值。Animated.Value:代表单个值,Animated.ValueXY代表(x,y)值或者也可以叫向量值。
动画的变量值初始化:left:new Animated.Value(0),不能这样初始化left:0,Animated.Value提供了以下方法:
- constructor:构造函数。new Animated.Value(0)
- setValue:设置新的值,注意此方法会停止动画
- setOffset:设置一个修正值,不论接下来的值是由setValue、一个动画,还是Animated.event产生的,都会加上这个值。常用来在拖动操作一开始的时候用来记录一个修正值(譬如当前手指位置和View位置)。
- flattenOffset:该用来把相对值合并到值里,然后相对值设置为0,最终输出的值不会发生变化。常常在拖动操作结束以后调用。
- addListener:异步监听动画值变化
- removeListener:删除指定监听器
- removeAllListeners:删除所有监听器
- stopAnimation:停止动画,返回当前动画值。
- interpolate:差值,可以将值映射成新的值,后面会具体介绍。
Animated.ValueXY其实是就是2个Animated.Value,方法和Animated.Value一样,不过比Animated.Value 多了2个方法:
getLayout:将一个{x, y} 组合转换为一个可用的位移变换(translation transform),例如:
style={{
transform: this.state.anim.getTranslateTransform()
}}getTranslateTransform:将一个{x, y} 组合转换为一个可用的位移变换(translation transform),例如:
style={{
transform: this.state.anim.getTranslateTransform()
}}
动画类型:timing、spring、decay
timing:值按照一个过渡曲线而随时间变化,原代码:
var timing = function(
value: AnimatedValue | AnimatedValueXY,
config: TimingAnimationConfig,
)
从原代码我们可以看出timing函数有2个参数:
1、第一个动画值,类型是AnimatedValue 或者AnimatedValueXY
2、第二个是配置参数,TimingAnimationConfig,TimingAnimationConfig原代码:
type TimingAnimationConfig = AnimationConfig & {
toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,
easing?: (value: number) => number,
duration?: number,
delay?: number,
};type AnimationConfig = {
isInteraction?: bool,
useNativeDriver?: bool,
onComplete?: ?EndCallback,
};
从原代码我们看出TimingAnimationConfig可以配置如下属性:
- toValue:最终值,动画值从初始之变化到此值。
- easing:曲线(动画)函数,默认Easing.inOut
- duration:持续时间,默认500
- delay:延迟时间,默认0
- useNativeDriver:是否使用原生驱动,默认false
- isInteraction:????
- onComplete:完成回调
咱们再来看看Easing,系统为我们定义了很多动画函数,原代码 ,大家可以看看官方注解,感觉语言说不太清楚,大家可以试试效果就明白了。
spring:弹簧动画,原代码:
var spring = function(
value: AnimatedValue | AnimatedValueXY,
config: SpringAnimationConfig,
)
依然需要2个参数:
1、动画值:同timing
2、SpringAnimationConfig,原代码:
type SpringAnimationConfig = AnimationConfig & {
toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,
overshootClamping?: bool,
restDisplacementThreshold?: number,
restSpeedThreshold?: number,
velocity?: number | {x: number, y: number},
bounciness?: number,
speed?: number,
tension?: number,
friction?: number,
};
和TimingAnimationConfig一样这里不说了,这里说下几个重要的属性:
- friction:摩擦系数,默认7
- tension:张力,默认40
其他的可以不考虑。
decay:带有加速度值的动画,原代码:
var decay = function(
value: AnimatedValue | AnimatedValueXY,
config: DecayAnimationConfig,
)
DecayAnimationConfig原代码:
type DecayAnimationConfig = AnimationConfig & {
velocity: number | {x: number, y: number},
deceleration?: number,
};
- velocity:初始速度
- deceleration:衰减速率,默认0.997
这一章我们简单的介绍了基本动画,下一章我们复杂 的动画。
/*** Created by on 2017/5/26.*/
import React, {Component} from 'react';
import {StyleSheet,View,ScrollView,Text,Button,Animated,Alert,
} from 'react-native';export default class AnimatedDemo extends Component {static navigationOptions = {title: 'Animated'}state = {animatedValue: new Animated.Value(0),decayValue: new Animated.Value(0),left:new Animated.Value(0),}_beforeValue = 0;_startAnimated = (type) => {this.state.animatedValue.setValue(0);if ('timing' === type) {Animated.timing(this.state.animatedValue,{toValue: 1,duration: 2000,},).start();} else if ('spring' === type) {Animated.spring(this.state.animatedValue,{toValue: 1,duration: 2000,},).start();} else if ('decay' === type) {Animated.decay(this.state.decayValue,{velocity: 2,deceleration:0.992,},).start(() => {});}this.state.decayValue.addListener((callback) => {var n = callback.value - this._beforeValue;this._beforeValue = callback.value;console.log(callback.value+'----'+n);})}_translateAni = ()=>{this.state.left.setValue(0);Animated.timing(this.state.left,{toValue: 300,duration: 1000,},).start();}render() {return (<View style={{flex:1}}><Button title='平移' onPress={()=>{this._translateAni()}}/><Animated.Viewstyle={{width:50,height:100,backgroundColor:'blue',left:this.state.left}}></Animated.View><View style={{flexDirection:'row'}}><View><Button title='开始动画:timing' onPress={()=>{this._startAnimated('timing')}}/><Button title='开始动画:spring' onPress={()=>{this._startAnimated('spring')}}/><Button title='开始动画:decay' onPress={()=>{this._startAnimated('decay')}}/></View><Animated.Viewstyle={{width:200,height:100,backgroundColor:'red',transform:[{translateY:this.state.animatedValue.interpolate({inputRange:[0,1],outputRange:[0,100]})},]}}></Animated.View></View><Animated.Viewstyle={{width:200,height:100,backgroundColor:'blue',transform:[{translateY:this.state.decayValue},]}}></Animated.View></View>);}
}
github下载地址
react native Animated 使用详解(基础)相关推荐
- React Native Animated 动画详解 - 实例篇 (这篇就够了)
之前已经更新过Animated动画基础篇相关知识点,今天讲解Animated.Value,Animated.ValueXY以及相关动画库使用实例.学习完 本篇相信大家对于动画库的基本使用应该是没有问题 ...
- React Native通信机制详解
http://blog.cnbang.net/tech/2698/ React Native是facebook刚开源的框架,可以用javascript直接开发原生APP,先不说这个框架后续是否能得到大 ...
- React Native-9.React Native Touchable组件详解
Touchable系列组件简介 RN中没有web中给元素绑定click事件的机制,但是在上一节中我们知道Text组件中我们可以绑定onPress事件来触发点击事件,为了像Text组件那样使得其它组件可 ...
- React Native Keyboard使用详解
当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入.但有时我们想在键盘弹出时对页面布局做个调整,或者在程序中使用代码收起这个软键盘,这些借助 React Native 框架提供的Keyboa ...
- React Native的Navigator详解
欢迎Follow我的Github,博客会同步在Github的Blog仓库更新.也可以关注我的CSDN博客的React Native分类 Github地址:LeoMobileDeveloper 前言 除 ...
- react native FlatList 使用详解
高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 -首页所有文章JavaScr ...
- Eclipse编译运行Native代码步骤详解
Eclipse编译运行Native代码步骤详解 标签: android jni层 android jni步骤 android jni接口 转自: http://blog.csdn.net/ ...
- js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由 通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
最新文章
- boss直聘Android找工作界面,Android仿Boss直聘我的界面滑动效果
- Sublime Text 菜单栏消失问题
- ubuntu 14.04 安装redmine
- Basic Example of JMX Technology--转载
- 机器人防火墙:人机识别在应用安全及风控领域的一点实践
- 谁还没个黑历史了。。。 | 今日最佳
- Chrome用户想哭:因重大缺陷成黑客取款机
- 老虎ji 剪枝模拟
- Centos添加ip黑名单禁止某个ip访问,对登陆失败的主机进行封禁
- 算法:找出相同字母组成的字符串Group Anagrams
- CSS display 常用属性小结
- 1块钱的路由器,10亿美金的小米网络
- php收费视频网站实现,超好影视网站PHP源码,一键采集视频资源,对接第三方免签码支付,能设置每个视频能否收费...
- 202101汇率换算
- 【OFDM】AWGN 信道下 BPSK 调制 (卷积码) 性能对比仿真实验 (Matlab 实现)
- 2011年下半年11月份系统架构设计师上午试题答案之二
- sturts2框架知识点(Struts2框架----今天脑子有点炸)
- 2021-2-26编程语言知识点整理
- JAVA软件技术人力外派外包费用怎么算?
- 基于Spring Boot和Vue3的博客平台文章详情与评论功能实现
热门文章
- gels imagej 图片处理_ImageJ在荧光照片分析中的应用介绍
- 简单了解ACL与NAT!
- H5静态网页设计与制作_川西旅游网设计作品(HTML+CSS+jQuery)
- 虚拟机监视器(VMM)
- RedHat安装yum和配置yum源
- Axure RP 9”已损坏,无法打开。 您应该将它移到废纸篓。
- python图片截取斜四边形_opencv 截取任意四边形区域的图像
- 华为路由器接口如何区分_华为路由器接口管理命令有哪些
- 通过微信公众号实现H5音频自动播放
- 面向对象:让我们红尘作伴,吃的白白胖胖