React Native动画-Animated

本文主要是介绍React Native动画-Animated，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

核心API

大部分你需要的东西都来自Animated模块。它包括两个值类型，Value用于单个的值，而ValueXY用于向量值；还包括三种动画类型，spring，decay，还有timing，以及三种组件类型，View，Text和Image。你可以使用Animated.createAnimatedComponent方法来对其它类型的组件创建动画。

这三种动画类型可以用来创建几乎任何你需要的动画曲线，因为它们每一个都可以被自定义：

• spring: 基础的单次弹跳物理模型，符合Origami设计标准
  • friction: 摩擦力，默认为7.
  • tension: 张力，默认40。
• decay: 以一个初始速度开始并且逐渐减慢停止。
  • velocity: 起始速度，必填参数。
  • deceleration: 速度衰减比例，默认为0.997。
• timing: 从时间范围映射到渐变的值。
  • duration: 动画持续的时间（单位是毫秒），默认为500。
  • easing：一个用于定义曲线的渐变函数。阅读Easing模块可以找到许多预定义的函数。iOS默认为Easing.inOut(Easing.ease)。
  • delay: 在一段时间之后开始动画（单位是毫秒），默认为0。

动画可以通过调用start方法来开始。start接受一个回调函数，当动画结束的时候会调用此回调函数。如果动画是因为正常播放完成而结束的，回调函数被调用时的参数为{finished: true}，但若动画是在结束之前被调用了stop而结束（可能是被一个手势或者其它的动画打断），它会收到参数{finished: false}。

组合动画

多个动画可以通过parallel（同时执行）、sequence（顺序执行）、stagger和delay来组合使用。它们中的每一个都接受一个要执行的动画数组，并且自动在适当的时候调用start/stop。举个例子：

Animated.sequence([            // 首先执行decay动画，结束后同时执行spring和twirl动画Animated.decay(position, {   // 滑行一段距离后停止velocity: {x: gestureState.vx, y: gestureState.vy}, // 根据用户的手势设置速度deceleration: 0.997,}),Animated.parallel([          // 在decay之后并行执行：Animated.spring(position, {toValue: {x: 0, y: 0}    // 返回到起始点开始}),Animated.timing(twirl, {   // 同时开始旋转toValue: 360,}),]),
]).start();                    // 执行这一整套动画序列

默认情况下，如果任何一个动画被停止或中断了，组内所有其它的动画也会被停止。Parallel有一个stopTogether属性，如果设置为false，可以禁用自动停止。

案例演示：

这里我们用spring来做缩放效果，以及timing来做若隐若现的渐变效果。第一种：图片先变大后变小的效果。初始化都需要定义 new Animated.Value(0).

export default class Playground extends Component {constructor(props) {super(props);this.state = {bounceValue: new Animated.Value(0),};}render() {return (<Animated.Image                         // 可选的基本组件类型: Image, Text, Viewsource={require('../images/1.jpg')}style={{width: 100,height: 100,margin:50,transform: [                        // `transform`是一个有序数组（动画按顺序执行）{scale: this.state.bounceValue},  // 将`bounceValue`赋值给 `scale`]}}/>);}componentDidMount() {this.state.bounceValue.setValue(1.5);     // 设置一个较大的初始值Animated.spring(                          // 可选的基本动画类型: spring, decay, timingthis.state.bounceValue,                 // 将`bounceValue`值动画化{toValue: 0.8,                         // 将其值以动画的形式改到一个较小值friction: 1,                          // Bouncier spring}).start();                                // 开始执行动画}
}

第二种：图片由透明度从0到1的显现的效果，timing的使用。

export default class Timing extends Component{constructor(props){super(props);this.state = {imgOpacity: new Animated.Value(0)}}componentDidMount(){Animated.timing(this.state.imgOpacity,{toValue:1,duration:3000}).start();}render(){return(<Animated.Image style={{opacity:this.state.imgOpacity,margin:100}}><Image source={require('../images/1.jpg')} style={{width:100,height:100}}/></Animated.Image>);}
}

有任何疑问，可以查看Github源码地址： https://github.com/SpicyBoiledFish/react-native-Animated-demos

这篇关于React Native动画-Animated的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---